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でrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

目次1 基本になるrectを追加2 角丸3 半透明4 グラデーション5 ドロップシャドウ6 ライティング7 html要素を追加する~foreignObject 基本になるrectを追加 SVG 1.1 …

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

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

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を置き換えただ …

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

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