スポンサーリンク
スポンサーリンク

ヒストグラムを作成する

ヒストグラムはデータの分布状況を調べるのに便利です。D3.jsではヒストグラムを表示するためのレイアウト機能が備え付けられています。

ヒストグラム作成の基本

HTMLファイルには、予めヒストグラムで表示する棒などのstyleをCSSクラスで設定します。svg要素などのを用意しておくのは、これまでの記事と変わりません。
使用するデータはテストの点数で、0~100点が点数の範囲です。

サンプルコードの実行結果はこちら

サンプルコードについて・・・
10点刻みのヒストグラムように、棒の幅はsvg要素の幅を11で割ります。

ヒストグラムのレイアウトは、d3.layout.histogram()メソッドを使います。ヒストグラムの場合は、range()メソッドでデータの範囲を指定します。range()メソッドのパラメータは配列形式で指定し、1番目の要素が最小値、2番目の要素は最大値です。テストの点数は0~100なので、range([ 0, 100])とかきます。

bins()メソッドは区切る範囲を配列形式で指定します。
10点刻みならいかのように書きます。

下記のようにヒストグラムの値にスケールを設定します。スケールを設定しないと、縦棒が低すぎて目視できないからです。そのためはじめにヒストグラムの最大値を(一定範囲内に存在するデータの個数)を求めなければなりません。最大値を求めるにはd3.max()メソッドを使います。d3.max()メソッドの1番目のパラメータには点数の値が入っている配列をしていするのではなく、histogram(arrData)を指定します。そうすると、ヒストグラムを計算した結果を元にした最大値を求めることができます。そして、スケールを設定します。domain()メソッドとrange()メソッドと使いデータの範囲を表示範囲に収まるようにします。maxValは最大値で,svgHeightは縦方向の表示範囲を表しています。

スケールを求めることができたら、下記のようにかいて表示する座標を求めることができます。

コメント

タイトルとURLをコピーしました