D3.jsでパーティションレイアウト

D3.jsには幾つかのレイアウト(テンプレート的な?)というものがあります。

パッと見面白いものから

  • Fource:円と線をつなぐ方のグラフ、物理演算もしてくれる
  • Stack:体積グラフ
  • Pie:円グラフ
  • Pack:丸の中に丸がある、階層構造につかわれる

など12個(2014年2月19日のところ)のレイアウトを使うことができます。それぞれのドキュメントやレイアウトを使用したサンプルも豊富にあります(英語ですが)。

 

レイアウトを使用しても変わらずsvgのアニメーションなどをすることができます。ドラッグしてパーティクルを振り回したり選択したデータごとに遷移する体積グラフなど、やりたいことにあったレイアウトがあれば便利だなぁーと思いました。

 

あと、Partitionという階層構造を表す円グラフを使って自称カレンダーのようなものをつくってみました。年には月が12個あり、年には日が約30個あり〜という階層構造としてグラフを表示します。今年も今月も残り何%しかないのか〜というのを実感しちゃいます。あ、色のついてる部分と真ん中はクリックできます。
ソースコードfarundorL/d3Calendar · GitHub