D3.js

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

投稿日:

 

d3js.org/

nvd3.com/

参照

www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm

 

環境 ubuntu server 12.04 + apache2 + CoffeeScript 1.3.3

 

テスト環境

自分の環境では/var/www/をユーザー権限に変更し、ユーザーのhomeフォルダにwwwのシンボリックリンクを作成している

 

ライブラリとサンプルの取得

で、InternetExplorerでサーバアドレスにアクセスすればwwwルートディレクトリがみられるはずだ

d3/examplesにサンプルがあるので、みられる(Firefoxでは残念ながら半分くらいエラーが出てみられなかった)

*サンプルコードではなくライブラリの方からエラーが出ていたので、指定を圧縮版の方にしたらとりあえずFirefoxでも見られた

 

 

例えば、bar chart(棒グラフ)

かっこいいアニメーションで描かれる

棒をクリックすると、その棒の細かい内訳がみられる

ScatterPlot

気になるデータ範囲をドラッグすると、該当するほかの散布図でもそのデータの範囲が選択される

チュートリアル

準備

参照のページが素晴らしいチュートリアルを作成してくれているので、その最初の最初だけCoffeeScriptで試してみた

適当にさきほどのwwwルートにtest.htmlを作成

同じディレクトリにmy.coffeeというファイルを作成して試していく

丸を描く

やっぱりsvgはきれい

ハッシュでデータを渡す

attrにはfunctionを指定できるので、ハッシュなどでデータを指定してまとめて渡すこともできる

svg.append(“rect”)で2回四角形を作成しておいて、selectAllで全部の四角形を選択して、eachのようにdataAttrの配列から順番にデータを渡していくことができる

リンク先ではさらに便利なイディオムとして、最初に空の四角形要素を選択して、後からデータの数だけ四角形を作成するという方法も紹介されている

これを利用してグラフを作成していくことになる

enter()は新たなオブジェクトを追加する、その逆はexit()でオブジェクトを削除する

明日は目盛り付きの棒グラフを作成してみようと思う

-D3.js
-, ,

執筆者:

関連記事

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

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

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

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

no image

d3.jsで力指向グラフを使って遊ぶ2

力指向グラフ(force layout)でノードの追加・削除をやってみた     緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …

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

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

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …