D3.js v4/v5 入門⑤ – グラフの書き方
チュートリアル目次
散布図の作成方法
簡単なグラフのサンプルとして散布図を作成します。今回は次のデータを使います。
|
1 2 3 |
var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; |
[ ]は配列で、[ [x座標1, y座標1], [x座標2, y座標2], …]のような形式の二次元配列のデータです。
まず、座標を丸を表示する”circle”を使って表示していきます。
|
1 2 3 4 5 6 7 |
svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .attr("r", 4); |
“circle”に割り当てたデータは二次元配列のため”circle”には[x座標, y座標]のデータが、例えば、一つ目の”circle”には[5, 20]が割り当てられます。これをcx,cy属性にそれぞれ設定しています。次に座標位置をx座標,y座標の形式でテキストで表示してみます。
|
1 2 3 4 5 6 7 8 9 10 |
svg.selectAll("text") .data(dataset) .enter() .append("text") .attr("x", function(d) { return d[0]; }) .attr("y", function(d) { return d[1]; }) .attr("fill", "red") .text(function(d) { return d[0] + "," + d[1]; }); |
x座標は右に向かって増加するので良いのですが、y座標は下に向かって増加していますし、グラフにするには縦横比をもう少し変えたいところです。スケールの変換には次のD3の関数を使います。
|
1 2 3 |
var scale = d3.scaleLinear() .domain([0, 500]) .range([0, 100]); |
この関数はdomainで指定した範囲をrangeで指定した範囲に変換する関数を作成して、scaleに設定してくれます。
例えば、
|
1 |
scale(100); |
とすると 20 が返ってきます。これは、[0, 500]のレンジを[0,100]のレンジに変更、つまり、座標を1/5にした結果です。
これをグラフに適用します。グラフの幅と高さを設定します。
|
1 2 |
var width = 400; var height = 300; |
比率を4:3に設定しました。
|
1 2 3 4 5 6 7 |
var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d){return d[0];})]) .range([0, width]); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d){return d[1];})]) .range([height, 0]); |
ここで、データの最大値を求めるためにd3.max()を使います。d3.maxは第一引数に配列を、第二引数に返り値を関数で指定できます。y座標は逆転させたいので、rangeの第一引数に大きい値を入れています。
この関数を使って、描画しなおしてみます。
|
1 2 3 4 5 6 7 |
svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]; }) .attr("r", 4); |
y座標は下側が小さくなっていますし、縦横比も4:3になりました。 最後に軸を書いていきます。こちらはD3の関数が用意されています。
|
1 2 3 |
var axisX = d3.axisBottom(xScale); svg.append("g") .call(axisX); |
先ほどの、scaleと組み合わせて使います。下側の軸を表す、d3.axisBottomのほかに、d3.axisTop、d3.axisRight、d3.axisLeftがあります。これをcall関数で呼び出すと下のように軸を記載してくれます。
が位置と軸のメモリを表示する幅を考慮してくれません。そこで、次のように
|
1 2 3 4 5 |
var axisX = d3.axisBottom(xScale); var padding = 30; svg.append("g") .attr("transform", "translate(" + 0 + "," + (height-padding) + ")") .call(axisX); |
位置を移動させます。これらを考慮するとグラフを描画するコードは下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // ここにコードを書いていきます。 var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; var width = 400; var height = 300; var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); var padding = 30; var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d){return d[0];})]) .range([padding, width - padding]); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d){return d[1];})]) .range([height - padding, padding]); var axisx = d3.axisBottom(xScale); var axisy = d3.axisLeft(yScale); svg.append("g") .attr("transform", "translate(" + 0 + "," + (height - padding) + ")") .call(axisx); svg.append("g") .attr("transform", "translate(" + padding + "," + 0 + ")") .call(axisy); svg.append("g") .selectAll("circle") .data(dataset) .enter() .append("circle").attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("fill", "SkyBlue") .attr("r", 4); </script> </body> </html> |
これで散布図が完成です。プロットの色も青くしてみました。
このサイトには、他にもD3のサンプルを多数用意しています。 よろしければご覧ください。
チュートリアル目次