D3.js

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

投稿日:2012年12月23日 更新日:

前の記事

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

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

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

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

Rubyでデータクリーニング~mechanize & active_support

 

参考書

D3をはじめよう

D3.jsとは

D3.jsはデータに基づいてドキュメントを操作するためのJavaScritpライブラリです.D3はHTML、SVGとCSSを使ってデータに命を吹き込むのを手助けしてくれます.
D3の強調するべき点は、特定のフレームワークに縛られずに、強力なビジュアライゼーションの部品とDOM操作に対するデータ駆動のアプローチを結びつけて、現代的なブラウザのすべての能力を使うことができることです.

Googleアナリティクスみたいなマウスオーバーとかクリックで色々反応するグラフが作れる

書き方はDOM操作なのでjQueryがわかればだいたいわかると思う

公式

d3js.org/

参考

 SVG入門 (全14回)

D3.js入門 (全17回)

 

グラフを書くときのHTMLの構造

この構造はHTMLに書くのではなく、d3.jsで構築していくことになる

スケルトン

HTML

bodyの下につけてもいいし、指定の場所にグラフ描画用のdiv要素を作っておいてもよい

main.coffee

 jsonデータの形式

Michaの黄金律 「JSON blobのキーにデータを保存してはいけない」

NG ”bob”: 20

OK    name: “bob”,  age: 20

(参考書 10.3ページくらい <- ePubだからわかんない)

現実的なグラフ作成の定石

大外のコンテナ領域の大きさと実際のグラフ描画領域の大きさを決めてその差をmarginとする

  • svgの大きさ = コンテナ領域の大きさ
  • scaleとかに使う領域 = グラフ描画領域の大きさ

右マージンとか左マージンとかを微調整する場合にはもう少し細かく

*参考

Margin Convention

 

scaleとextent

extentは最大値と最小値のarrayを返してくれる関数

extentを使えば特に考えなくてもグラフが最適な縮尺になる

しかし、例えば2枚のグラフを比べたい場合とかは縮尺が変更されると困るので直でdomainの値を指定する

d3.time.scale()という時間軸専用のscaleがある.

これを使うと目盛りとかに自動的にいい感じの値をつけてくれる(月ごととか時間ごととか)

axis

axisは目盛り付きの軸

定義して、callでセレクトした場所(の下?)に呼び出す

transform -> transrateで移動

 ラベル

xとyはFireBugとか使ってうまく調整する

y軸に関してはsvgに縦書を指定するcssがあるけど、firefoxが未対応らしい

chromeでやったら日本語は縦書になった

*日本語ドキュメント発見

ja.d3js.node.ws/

 

-D3.js
-,

執筆者:

関連記事

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

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

no image

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

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

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

気になるD3.jsサンプル

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

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

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