D3.js

気になるD3.jsサンプル

投稿日:

Hierarchical Bars

バーをクリックするとその内訳がまたバーチャートになる

2013-01-19_02h36_03

 

 

 

 

Collapsible Indented Tree

開閉できる階層構造

2013-01-19_02h39_22

 

 

Sortable Bar Chart

チェックすると昇順に並べ替える

2013-01-19_02h44_37

 

 

Spline Editor

色々な線を書ける

2013-01-19_02h45_45

 

 

Zoomable Area Chart

横スクロールと軸の拡大縮小。グラフの表題ラベルの年代も動的に変わるなど芸が細かい。

2013-01-19_02h58_25

 

 

Bederson Publications

www.cs.umd.edu/~bederson/papers/index.html

著書の紹介。年代別、分野別に分けたり、フィルタリングできたりする。著者名をクリックすると年代グラフのその著者の著書が色付けされる

 

The Wealth & Health of Nations

右下の年号のうえでマウスを左右に動かすと年代が変化する。分布の変化がよくわかる。

2013-01-19_03h06_05

-D3.js
-

執筆者:

関連記事

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

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

 

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

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

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

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

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

  前提 SVGでビジュアライゼーションことはじめ~d3.js   目次1 データの数だけ棒を表示する2 scale3 テキストラベルをつける4 JSONで読む データの数だけ棒を …

no image

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

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