d3.jsが格好良すぎてやばい - 生存戦略型プログラミング

d3.jsとはなにか

d3.jsとはData Driven Documentの略です。

データ可視化のためのjavascriptのライブラリです。簡単にデータをグラフ描画してくれたり、ちょっとしたアニメーションも作成することができます。

今回はd3.jsの簡単な使い方とか魅力とかを解説していきたいとおもいます。

まずは、HTMLファイルを用意します。d3.jsを導入するには以下の行をbodyタグ内に挿入するだけで使うことができます。

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

d3.jsの操作は主に以下の手順で行います。

d3.jsではSVGにグラフや図形を書いて行きます。SVGとは「Scalable Vechtor Graphics」の略でベクター方式で2次元グラフィックスh3を表現するためのXMLベースの言語のことです。詳しい説明はこちらをご覧ください。

では、実際にSVGを作成して行こうとおもいます。以下のコードが実際のコードです。

var svg = d3.select("body").append("svg").attr({width: 700,height: 200})

上のコードではbodyタグの中に横幅700px、高さ200pxの領域でSVGを定義したことになります。

では、先ほど作成したSVGに実際に簡単なグラフを書き入れてみましょう。棒グラフ系は以前、jqplotを使ったときに実装しているため、今回は散布図を書いてみることにしました。結果は以下のような感じになります。軸がないのでグラフに見えづらいですけど、散布図ですw

f:id:pgpg-sou:20140103232009p:plain

ソースは以下のような感じになります。ソースコードもそこまでむずかしくなく、簡単に上のような散布図を描くことができます。

さきほど紹介したようなグラフは他のライブラリでも似たような文法なのですが、d3.jsがすごいところはなんといってもアニメーションだと思います。

以下のようなアニメーション付きグラフが簡単に実装できてしまいます！！

ほかにもこんなんとかアニメーションがついたやつが簡単に作成することができてしまうのです。

といったように、d3.jsの魅力は

公式サイトのサンプルには他にもかっこいいのがたくさんあります。

f:id:pgpg-sou:20140103231534p:plain

アニメーションのソースコードはgithubに公開しております。