データビジュアライゼーションのためのJavaScriptライブラリ『D3.js』

f:id:eiji_sm:20121202193435j:plain

ビジュアライゼーションについて

大量のデータの中から価値のある情報を抽出する技術をデータマイニングと呼びますが、目で見ても理解し難いデータをぱっと見分かりやすい形に変える技術のことを可視化、あるいはデータビジュアライゼーションと呼びます。

ソーシャルメディアの影響で膨大な情報がネット上に溢れるようになり、ビジュアライゼーションに対する需要が世界的に高まっているのを肌で感じます。

D3.jsとは

D3.jsはデータビジュアライゼーション用の人気の高いJavaScriptライブラリの一つ。
D3.js
D3はData-Driven Documentsの略で、データに基づくドキュメント（HTML, CSS, SVGなど）の操作を行うためのライブラリ。

D3.jsでできること

データの可視化ができる。といってしまうと漠然的すぎるが、データを可視化するあらゆるグラフを作成可能。D3.jsがデフォルトでサポートしている図の形式もあるし、無いものでもD3を巧みに操れば、多種多様なビジュアラーゼーションが実現できる。
サンプルについては公式が充実しているのと、
Tributary
上記のような、ブラウザ上で作成、実行出来るサイトがあったりします。
そこでもサンプルが幾つかある。

サンプルコード

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("g").selectAll("path")
    .data(chord.groups)
  .enter().append("path")
    .style("fill", function(d) { return fill(d.index); })
    .style("stroke", function(d) { return fill(d.index); })
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1));

細かなメソッドについては公式APIを参照してください。
API Reference
基本として、d3.select(*)、あるいはd3.selectAll(*)でDOMの指定を行います。
CSS セレクタを使用でき、以降のメソッドはd3のオブジェクトを返すため、メソッドチェーンで書いていくことができます。
このあたりの使用感はjQueryに近いので馴染みやすい人も多いはず。
DOMを指定したあと、data()メソッドでDOMにデータを紐付けます。（逆もできたりする）
そしてそのオブジェクトに対してattr()、style()といったメソッドでviewの部分を操作したり、on()メソッドでイベントハンドラの登録をしたりします。（このあたりはまた別記事書こうと思う）
d3.jsの性質上、dataとviewを紐付けて操作を行うのと、メソッドチェーンで細かい動作の指定ができるため、どうしてもコードが縦長になりがち。

コードの見通しを良くするために

・メソッドの中身を分割する
attr(), style()など、引数にオブジェクトでまとめて指定できるので、できるだけオブジェクトにまとめて、メソッドの外で設定をする。
・MVCを使う
Backbone.jsなどのMVC フレームワークを使い、できるだけModel（データ）と、View（DOM、attr、イベントハンドラ）を分離する。
・CoffeeScriptを使う
jQueryのようにコールバックを多用するライブラリのため、CoffeeScriptに限る必要はないですが、中間言語はコールバックを簡潔に書けるものが多いため、それを利用することもオススメ。

これらを用いてできるだけスマートなコードにしたい。
個々のTIPSはまた別記事で書いていく予定。

まとめ

Webアプリケーション制作の機会が増え、サーバとクライアントサイド間で扱うデータ操作の頻度がが増加し、そしてデータビジュアライゼーションを行う必要性が増しています。今後も増えていくでしょう。
以上、データの可視化を行う際の選択肢として、d3.jsの紹介記事でした。

ToDoDoDo

WEBとクリエイティブな何かについて