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の操作は主に以下の手順で行います。
- SVGを作成
- 要素を選択
- その要素に対して、アニメーションをつけたりイベントをつけたりなどの操作をおこなう。
SVGとは
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
ソースは以下のような感じになります。ソースコードもそこまでむずかしくなく、簡単に上のような散布図を描くことができます。
アニメーションを導入してみる。
さきほど紹介したようなグラフは他のライブラリでも似たような文法なのですが、d3.jsがすごいところはなんといってもアニメーションだと思います。
以下のようなアニメーション付きグラフが簡単に実装できてしまいます!!
ほかにもこんなんとかアニメーションがついたやつが簡単に作成することができてしまうのです。
といったように、d3.jsの魅力は
ちょっといけてるようなアニメーションが簡単にかけるところです。
公式サイトのサンプルには 他にもかっこいいのがたくさんあります。
アニメーションのソースコードはgithubに公開しております。
一つ目の動画のプログラム↓
https://github.com/pgpg-sou/testSource/blob/master/sample_d3_graph.html
2つ目の動画のプログラム↓
https://github.com/pgpg-sou/testSource/blob/master/d3js.html