「D3.js」を使ったデータビジュアライゼーション

近未来の技術トレンドを先取り！ 「Tech-Sketch」出張所 第8回

　本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは！」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回は「D3.js」というJavaScriptのライブラリを利用した、データ可視化についてご紹介します。

　Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。

D3.jsとは

　D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSDです。

　D3.jsについて知るには、まずD3.jsで作られた作品を見るのが一番かと思います。Github上のGalleryや、作者の作品ページなどで豊富な作品が紹介されています。

　また、公式ページでAPIリファレンスなどのドキュメントが提供されています。英語が苦手な方は一部日本語翻訳されたページがありますので、そちらを参照すると良いでしょう。

D3.jsの特徴

jQueryのようなセレクタ

　D3.jsはjQueryのようなセレクタを提供します。これにより宣言的にノードセットを操作することが可能になるため、繰り返しや分岐処理が減り、記述が簡潔になります。この操作対象のノードセットのことをセレクションと呼びます。

　以下に利用例を挙げます。

　すべてのp要素の文字色を白に変更する場合、手続き的に記述すると繰り返しをfor文で処理しますが、

var paragraphs = document.getElementsByTagName("p");
 
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i;)
  paragraph.style.setProperty("color", "white", null);
}

D3.jsのセレクタを用いて宣言的に記述すると、以下のように簡潔に記述することができます。

d3.selectAll("p").style("color", "white");

　コードも、d3.selectAll("p")ですべてのp要素を取得、style("color", "white")で文字色を白に設定、と直観的で分かりやすくなったのではないでしょうか。

SVGでの描画

　D3.jsはSVGでグラフやチャートなどを描画します。SVGとはScalable Vector Graphicsの略で、XMLをベースとした2次元ベクターイメージ用の画像形式です。最新のブラウザであればほとんどSVGに対応していますが、Internet Explorer 8を含む古いInternet ExplorerはSVGに対応していないため、表示されない可能性があります。

高い柔軟性

　D3.jsは他のグラフ描画ライブラリと比べ、柔軟性がとても高いライブラリです。他のライブラリは簡単に綺麗なグラフを描画できるように作られていることが多いですが、D3.jsはそうではありません。公式ページにも書かれていますが、表現方法ではなく変換方法であり、描画処理に関しては自身でコードを記述する必要があります。自身で描画処理を記述しなければならない分難しく感じるかもしれませんが、製作者に描画処理に対する裁量を与えることで複雑なデータビジュアライゼーションを可能にします。また、Web標準であるHTML、CSS、SVGを使っているため、デバッグがしやすい点も特徴の一つです。

基本的な使い方

　D3.jsの基本である、セレクション、データバインディング、SVGの描画、アニメーションの設定についてサンプルコードと共に説明していきます。

　D3.jsを利用するには、D3.jsのサイトかGithubからファイルを取得するか、以下のscriptタグをHTMLに記述します。

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

セレクション

　D3.jsの特徴として紹介しましたが、D3.jsにはセレクタが用意されています。セレクタを利用することでノードの選択、操作が行えます。以下の例では、idがtextの要素を選択し、文字色を赤に変更しています。

d3.select('#text').style('color', 'red');