d3.v5.js で棒グラフを作成する

d3.js の　Version 5.0.0　のサンプルです。
![bar_mar30.png](https://qiita-image-store.s3.amazonaws.com/0/179446/cdb9a90f-5468-3f2f-72f6-76c198599a70.png)


```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Bar Chart</title>
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/d3.v5.min.js"></script>
</head>
<body>
<h2>Bar Chart</h2>
<div id="Dash"></div>
<script src="bar_chart.js">></script>
Mar/30/2018<p />
</body>
</html>
```

```js:bar_chart.js
// ------------------------------------------------------------------------
//	bar_chart.js
//
//						Jun/02/2017
// ------------------------------------------------------------------------
const file_json="data.json"

jQuery.getJSON(file_json,function (data)
	{
	drawStackChart(data)
})


// ------------------------------------------------------------------------
    //Draw Stack Chart
const marginStackChart = { top: 20, right: 20, bottom: 30, left: 40 }
const widthStackChart = 500 - marginStackChart.left - marginStackChart.right
const heightStackChart = 300 - marginStackChart.top - marginStackChart.bottom

const xStackChart = d3.scaleBand()
            .range([0, widthStackChart])
            .padding(0.1)
const yStackChart = d3.scaleLinear()
                .range([heightStackChart, 0])


const colorStackChart = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"])


var canvasStackChart = d3.select("#Dash").append("svg")
        .attr("width", widthStackChart + marginStackChart.left + marginStackChart.right)
        .attr("height", heightStackChart + marginStackChart.top + marginStackChart.bottom)
        .append("g")
        .attr("transform", "translate(" + marginStackChart.left + "," + marginStackChart.top + ")");

// ------------------------------------------------------------------------
function drawStackChart(data)
{
	colorStackChart.domain(d3.keys(data[0]).filter(function (key) { return key !== "Year"; }));

	data.forEach(function (d) {
                var y0 = 0;
                d.ages = colorStackChart.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; });
                d.total = d.ages[d.ages.length - 1].y1;
            });

            data.sort(function (a, b) { return b.total - a.total; });

            xStackChart.domain(data.map(function (d) { return d.Year; }));
            yStackChart.domain([0, d3.max(data, function (d) { return d.total; })]);

            canvasStackChart.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + heightStackChart + ")")
            .call(d3.axisBottom(xStackChart));

            canvasStackChart.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yStackChart))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("No Of Buildings");

            var state = canvasStackChart.selectAll(".Year")
            .data(data)
            .enter().append("g")
            .attr("class", "g")
            .attr("transform", function (d) { return "translate(" + xStackChart(d.Year) + ",0)"; });

            state.selectAll("rect")
            .data(function (d) { return d.ages; })
            .enter().append("rect")
            .attr("width", xStackChart.bandwidth())
            .attr("y", function (d) { return yStackChart(d.y1); })
            .attr("height", function (d) { return yStackChart(d.y0) - yStackChart(d.y1); })
            .style("fill", function (d) { return colorStackChart(d.name); });

            var legend = canvasStackChart.selectAll(".legend")
            .data(colorStackChart.domain().slice().reverse())
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });

            legend.append("rect")
            .attr("x", widthStackChart - 18)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", colorStackChart);

            legend.append("text")
            .attr("x", widthStackChart - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function (d) { return d; });
}

// ------------------------------------------------------------------------
```

```json:data.json
[
             {
                 "Year": "2012",
                 "Category1": "20",
                 "Category2": "5",
                 "Category3": "5",
                 "Category4": "5",
                 "Category5": "5",
                 "Category6": "5",
                 "Category7": "5",
                 "Category8": "5",
                 "Category9": "5"
             },
             {
                 "Year": "2013",
                 "Category1": "30",
                 "Category2": "10",
                 "Category3": "10",
                 "Category4": "10",
                 "Category5": "10",
                 "Category6": "10",
                 "Category7": "10",
                 "Category8": "10",
                 "Category9": "10"
             },
             {
                 "Year": "2014",
                 "Category1": "35",
                 "Category2": "15",
                 "Category3": "15",
                 "Category4": "15",
                 "Category5": "15",
                 "Category6": "15",
                 "Category7": "15",
                 "Category8": "15",
                 "Category9": "15"
             },
             {
                 "Year": "2015",
                 "Category1": "50",
                 "Category2": "20",
                 "Category3": "20",
                 "Category4": "20",
                 "Category5": "20",
                 "Category6": "20",
                 "Category7": "20",
                 "Category8": "20",
                 "Category9": "20"
             },
             {
                 "Year": "2016",
                 "Category1": "50",
                 "Category2": "40",
                 "Category3": "40",
                 "Category4": "40",
                 "Category5": "40",
                 "Category6": "35",
                 "Category7": "35",
                 "Category8": "30",
                 "Category9": "25"
             }
        ]
```