D3.jsを少し使ってみた

■D3.jsについて
　・JQuery風のJavaScriptライブラリ。
　　　※メソッドチェーンで記述できる。
　・JQueryと同じでDOMを簡単に操作できる。
　・SVG(Scalable Vector Graphics)形式でグラフを描画したり操作したりすることができる。
・D3.jsはグラフ描画ライブラリではなく、
　　データを可視化するための座標計算を行ってくれるライブラリ。
　・複雑なグラフを描くには結構ロジックが難しい・・・。
　・SVGについての知識が必要。
　・canvas等で描画するグラフ等と違って、各オブジェクトの操作やイベント取得が簡単。
　　たとえば、グラフに対してマウスオーバーした際に詳細情報を表示することができる。
　・グラフに対してアニメーションも追加できる。
　・修正BSDライセンスで商用利用可能。
　
公式サイト：http://d3js.org/

■SVGについて
　・ベクタ画像のため、拡縮してもきれいに表示することが出来る。
　・IE9から対応している。

■レイアウト（グラフ）の種類

Bundle
Chord
Cluster
Force
Hierarchy
Histogram
Pack
Partition
Pie
Stack　　　　
Tree 　　　　
Treemap

レイアウトについては下記ページを参照。
　 https://github.com/mbostock/d3/wiki/Layouts

■棒グラフの描画例（SVG）

・ソースコード

<div id="Graph1"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

//データ
var dataset = [5,10,20,30,25,20,5];

//DIVタグ（id="Graph1"）にSVG要素を追加
var svg = d3.select("#Graph1")
            .append("svg")
            .attr("width",500)
            .attr("height",50);

//SVG要素にグラフを描画
svg.selectAll("rect") //矩形要素を選択
   .data(dataset)　　 //データをバインド
   .enter()
   .append("rect")　　//矩形要素を１つ選択
   .attr("x",function(d,i){ return i * 21; }) //X軸を計算（幅＋１px）
   .attr("y",function(d,i){ return 50 - d;})　//y軸を計算（上から下へ描画するっぽい）
   .attr("width",20)　//幅指定
   .attr("height", function(d){ return d;});　//高さ指定

</script>

・実行例

■ひとこと
D3.jsの公式サイトのサンプルを見ると、いろいろ出来そう使いこなせると楽しそう。
だたの棒グラフの描画でも、それなりにロジックを書かないと行けないので、
使いこなせるようになるには、それなりに頑張る必要がありそう。

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化