D3.js

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

投稿日:

 

前提

SVGでビジュアライゼーションことはじめ~d3.js

 

データの数だけ棒を表示する

前回、一つの棒に必要な要素をハッシュにしたものを配列でdata()に渡せば、each文のようにデータの個数分だけ処理してくれることがわかった

SVGでは左上が(0,0)の座標となるので、一番簡単な横向きの棒グラフを作成してみる

rectでは左上の点の座標(x,y)と幅(width)と高さ(height)を与えればよかったので、棒グラフを作成するには、

  • xはすべて0
  • yは一定間隔(棒の高さと少しのすき間)
  • 幅はその要素の数値をpxで表す長さ
  • 高さは一定の高さ

試しにこんな数値を与えると

できた

scale

ただ、ふつう与えられるデータはpxを考慮したものじゃないから、いちいち要素の個数や最大値にあわせて配分を考えるのは面倒すぎる

そこで、要素の数値をpxに変換する関数scaleが用意されている

一番簡単なイディオムは

で、データの最小値と最初のpxの座標、データの最大値と最後のpxの座標を対応するようにして、nScale(x)で求めるpx座標を計算して返してくれる

linear()は線形つまり正比例の関係を示す

例えば、

こんなデータが与えられたときデータの個数は5個だから

縦は

これで 3をだいたい60くらいに変換してくれる

*逆に配置

domain([0,5]).range([100,0])とすると下から上に要素を配置できる

 

幅は100点満点とすると

これで45を90に変換してくれる

*配列の最大値を取得する

配列の最大値を取得してそこを最大に設定することもできる

 

これを使って適当な初期設定値を与えてやれば

こんどはデータ形式からグラフが作成できた

テキストラベルをつける

同様に適当に座標に変換されるようにマージンを設定すれば

好きな場所に文字も表示できる

また色も適当な関数を設定すれば条件によって色も変えられる

JSONで読む

データを次のようなJSON形式で保存して、(my.json)

d3.json()で読み出すことができる

 

-D3.js
-,

執筆者:

関連記事

no image

D3.jsのBarChartをCoffeeScriptでクラス化(仮)

    グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

no image

d3.jsで力指向グラフを使って遊ぶ2

力指向グラフ(force layout)でノードの追加・削除をやってみた     緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

参考 D3をはじめよう 参考 Force Layout 目次1 forceレイアウトのスケルトン2 zoom&pan forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用し …

気になるD3.jsサンプル

Hierarchical Bars バーをクリックするとその内訳がまたバーチャートになる         Collapsible Indented Tree 開閉できる階 …

svgでビジュアライゼーションことはじめ~d3.js

  d3js.org/ nvd3.com/ 参照 www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm   環境 ubuntu serv …