ヒストグラムはデータの分布状況を調べるのに便利です。D3.jsではヒストグラムを表示するためのレイアウト機能が備え付けられています。
ヒストグラム作成の基本
HTMLファイルには、予めヒストグラムで表示する棒などのstyleをCSSクラスで設定します。svg要素などのを用意しておくのは、これまでの記事と変わりません。
使用するデータはテストの点数で、０～100点が点数の範囲です。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ヒストグラムを表示する</title> <script src="../js/d3.js"></script> <style> svg{ width:380px; height:240px; border:2px solid black; } .bar{ fill:blue; stroke:white; stroke-width:2px; } </style> </head> <body> <h1>ヒストグラムを表示</h1> <svg id="graph"></svg> <script src="test.js"></script> </body> </html> |
|
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 |
/* ヒストグラムを表示する */ // svg要素の幅、高さはここで設定 var svgEle = document.getElementById("graph"); var svgWidth = window.getComputedStyle( svgEle,null) .getPropertyValue("width"); var svgHeight = window.getComputedStyle( svgEle,null) .getPropertyValue("height"); svgWidth = parseFloat( svgWidth ); // 取得した値を整数へ変換 svgHeight = parseFloat( svgHeight ); // 取得した値を整数へ変換 var barWidth = svgWidth / 11; //棒の横幅 var arrData =[ ]; for( var i = 0 ; i < 30 ; i++){ // 0～100までの数値をランダムで設定 arrData[i] = Math.floor( Math.random() * 101 ); } var histogram = d3.layout.histogram() .range([ 0, 100]) .bins([ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90,100]); var maxVal = d3.max( histogram(arrData), function(d,i){ return d.y; // 最大個数を返す }); var yScale = d3.scale.linear() .domain( [ 0,maxVal] ) .range( [svgHeight, 0]); var barElements = d3.select("#graph") .selectAll("rect") .data( histogram(arrData)) .enter() .append("rect") .attr("class","bar") .attr("x", function(d, i){ return i * barWidth; }) .attr("y", function(d, i){ return yScale(d.y); }) .attr("width", barWidth) .attr("height", function(d,i){ return svgHeight - yScale(d.y); }); |
サンプルコードについて・・・
10点刻みのヒストグラムように、棒の幅はsvg要素の幅を11で割ります。
|
1 |
var barWidth = svgWidth / 11; |
ヒストグラムのレイアウトは、d3.layout.histogram()メソッドを使います。ヒストグラムの場合は、range()メソッドでデータの範囲を指定します。range()メソッドのパラメータは配列形式で指定し、１番目の要素が最小値、２番目の要素は最大値です。テストの点数は０～１００なので、range([ 0, 100])とかきます。
bins()メソッドは区切る範囲を配列形式で指定します。
10点刻みならいかのように書きます。
|
1 |
.bins([ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90,100]); |
下記のようにヒストグラムの値にスケールを設定します。スケールを設定しないと、縦棒が低すぎて目視できないからです。そのためはじめにヒストグラムの最大値を(一定範囲内に存在するデータの個数)を求めなければなりません。最大値を求めるにはd3.max()メソッドを使います。d3.max()メソッドの１番目のパラメータには点数の値が入っている配列をしていするのではなく、histogram(arrData)を指定します。そうすると、ヒストグラムを計算した結果を元にした最大値を求めることができます。そして、スケールを設定します。domain()メソッドとrange()メソッドと使いデータの範囲を表示範囲に収まるようにします。maxValは最大値で,svgHeightは縦方向の表示範囲を表しています。
|
1 2 3 |
var yScale = d3.scale.linear() .domain( [ 0,maxVal] ) .range( [svgHeight, 0]); |
スケールを求めることができたら、下記のようにかいて表示する座標を求めることができます。
|
1 2 3 |
.attr("height", function(d,i){ return svgHeight - yScale(d.y); }); |