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
-,

執筆者:

関連記事

気になるD3.jsサンプル

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

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

Inkscapeでsvgのグラデーションとフィルターを作成してみた

    Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識 SVGを勉強しているとそのフィルタエディタがとても便利だった 参考にしたページ www.atmark …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

D3にはd3.select(this)という便利なイディオムがあるのです 色はd3.rgbというオブジェクトにすると、brighter …

Tree図をいろいろ試してみる~d3.js

  前提 Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize これで取得してきたJSONを使っていろいろ試してみた と言っても、まだ指定のJSONを置き換えただ …