D3とは、
Data-Driven Documents(データ・ドリブン・ドキュメント)のことです。

データからドキュメントを生成するためのライブラリです。
ここで言うデータというのは、グラフなどのもとになる数値のことで、それをグラフィカルな表示にします。
HTMLの表を作成したり、インタラクティブなSVGのグラフを作成し、ユーザーの操作でスムーズに変化させることができます。

グラフには色々な種類があるけれど

D3.jsは頑張れば、複雑なグラフを描けます。

D3公式サイト

「頑張れば」というのが曲者で、グラフを描ける他のライブラリとは違い、グラフを簡単に表示する機能はありません。

D3の機能を利用して、自分でグラフの見た目を作らなくてはいけません。
その分、自由度が高いのですが、それなりに頑張りが必要なわけです。

とにかく手を動かして、円グラフを作ってみた

特に理由はありませんが、円グラフを作ってみました。
ボタンを2つ置いて、データを入れ替えると、円グラフをアニメーションさせようと思います。

デモはここから

D3のライブラリを読み込み

まずは、D3.jsを読み込まないと始まりません。
公式サイトからダウンロードしても良いですし、公式サイトからリンクしても良いでしょう。
今回は、headタグ内に、リンクさせました。

円グラフを表示させるdivと、切り替えるボタンを置く

body内はこんな感じにします。
script.jsというファイルにガリガリとD3を書いていこうと思います。

</body>の前ならhtmlの読み込みを気にしなくて良いので、ここに書きます。
その他、円グラフを配置するdivと、ボタンを置いておきます。

script.jsを書く

それでは、ここからは、D3.jsでコーディングをしていきます。
補足として、ソースに書いたコメントも載せていきます。

データの用意

まずは、適当にデータを用意します。
入れ替えようのデータも準備します。

大きさを決める

SVGで円グラフを描画するので、大きさなどを決めます。
自分で色を決めるのだ面倒だったので、d3.scale.category10で、色を用意します。

円を生成

円グラフを作成する場合、こう書くのが決まりごとのようです。

SVGの作成

上記の設定をもとにSVGを描画していきます。
D3.jsは、jQueryのようなチェーンメソッドを採用しています。

グループの作成とデータの読み込み

dataで円としてデータを読み込みます。
そうすると、データがsvgのタグと関連付けされ、enterappendでデータ分だけタグが増えます。
dataset1の中には5つデータがあるので、gタグは5つ追加されます。

円の描画

増やしたgタグ内に、円を描くときに使用するpathタグを追加します。

文字の描画

円と同じようにデータの数値を文字としても表示してみます。
SVGにはtextというタグで文字が書けます。

イベントの追加

二つのボタンに、クリックでデータが変更するように、イベントを入れます。

イベントの内容

arcAnimeでは、データを入れ替えて、円と文字にアニメーションを加えています。

まとめ

D3.jsは、難しそうなリッチなデータ表示を、比較的簡単に作ることができるのが魅力です。
少し学習コストは高いですが、オリジナルにこだわりたい方は、勉強するのも良いのではないでしょうか。