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のグラフにマウスオーバーでツールチップをつける

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

 

Inkscapeでsvgのグラデーションとフィルターを作成してみた

    Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識 SVGを勉強しているとそのフィルタエディタがとても便利だった 参考にしたページ www.atmark …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

D3にはd3.select(this)という便利なイディオムがあるのです 色はd3.rgbというオブジェクトにすると、brighter …

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

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

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

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