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を置き換えただ …

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

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

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

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

d3.jsのグラフにマウスオーバーでツールチップをつける

決め打ちで スタイルでフォントサイズを指定した ツールチップがはみ出す場合の条件と処理を追加

 

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

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …