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

執筆者:

関連記事

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

no image

d3.jsでグラフ描画するときの枠組み作成のメモ

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …

d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

目次1 基本になるrectを追加2 角丸3 半透明4 グラデーション5 ドロップシャドウ6 ライティング7 html要素を追加する~foreignObject 基本になるrectを追加 SVG 1.1 …

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

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