D3.js(v5)で棒グラフを書くサンプルを紹介します。
N.Y.の年間降水量を棒グラフにしてみます。
目次
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Pie Chart</title>
<script src="d3.min.js"></script>
<style>
h1{
font-size: small;
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}
svg{
font: 12px sans-serif;
background-color: #eee;
text-align: right;
padding: 3px;
margin: 1px;
color: #333;
}
</style>
</head>
<body>
<h1>NYの平均降水量(mm)</h1>
<script>
// NYの降水量データをセット
var dataset = [
{ "label": "1月", "value": 87 },
{ "label": "2月", "value": 83 },
{ "label": "3月", "value": 104 },
{ "label": "4月", "value": 107 },
{ "label": "5月", "value": 112 },
{ "label": "6月", "value": 93 },
{ "label": "7月", "value": 111 },
{ "label": "8月", "value": 102 },
{ "label": "9月", "value": 99 },
{ "label": "10月", "value": 90 },
{ "label": "11月", "value": 114 },
{ "label": "12月", "value": 99 },
]
var width = 600; // グラフの幅
var height = 400; // グラフの高さ
var padding = 36; // スペース設定
// SVGの設定
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
// 軸スケールの設定
var xScale = d3.scaleBand()
.rangeRound([padding, width - padding])
.padding(0.2)
.domain(dataset.map(function(d) { return d.label; }));
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.value; })])
.range([height - padding, padding]);
// 軸の描画
svg.append("g")
.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", "translate(" + padding + "," + 0 + ")")
.call(d3.axisLeft(yScale));
// 棒グラフの描画
svg.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d) { return xScale(d.label); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - padding - yScale(d.value); })
.attr("fill", "#00bfff");
</script>
</body>
</html>
データをセットする
JSONデータ形式で、x軸のラベル情報（月）、y軸の値（降水量）を変数にセットします。
グラフの幅と高さ、スペースも設定しています。
// NYの降水量データをセット
var dataset = [
{ "label": "1月", "value": 87 },
{ "label": "2月", "value": 83 },
{ "label": "3月", "value": 104 },
{ "label": "4月", "value": 107 },
{ "label": "5月", "value": 112 },
{ "label": "6月", "value": 93 },
{ "label": "7月", "value": 111 },
{ "label": "8月", "value": 102 },
{ "label": "9月", "value": 99 },
{ "label": "10月", "value": 90 },
{ "label": "11月", "value": 114 },
{ "label": "12月", "value": 99 },
]
var width = 600; // グラフの幅
var height = 400; // グラフの高さ
var padding = 36; // スペース設定 軸スケールの設定
X軸の設定
scaleBand を使って軸の設定、bandwidth で軸の幅を出力すると横幅などを計算しなくてよくなるので便利です。
// 軸スケールの設定
var xScale = d3.scaleBand()
.rangeRound([padding, width - padding])
.padding(0.2)
.domain(dataset.map(function(d) { return d.label; }));Y軸の設定
scaleLinearで実数範囲を実数範囲にマッピングすることができます。
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.value; })])
.range([height - padding, padding]);軸スケールの描画
.axisBottom() 軸の下側にラベルが表示されます。x軸に使っています。.axisLeft()軸の左側にラベルが表示されます。y軸に使っています。
// 軸の描画
svg.append("g")
.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", "translate(" + padding + "," + 0 + ")")
.call(d3.axisLeft(yScale));
棒グラフの描画
rectを使って棒グラフを書いていきます。
横幅には.bandwidth()を使って、paddingも入った値を使います。
// 棒グラフの描画
svg.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d) { return xScale(d.label); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - padding - yScale(d.value); })
.attr("fill", "#00bfff");まとめ
d3.jsで棒グラフを描画する方法でした。
関連情報
リンク
リンク
リンク
