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
-, ,

執筆者:

関連記事

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

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

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

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

no image

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

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

no image

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

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …

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

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