d3.jsとは - hsuetsugu’s diary

史上最強とも言われている、「d3.js」というJavaScriptのライブラリ（描画エンジン）を利用した、データ可視化について記載します。

D3.jsを知ったきっかけ

確か下記のNewYork Timesの記事を読んだのがきっかけだったような気がします。

http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0

わたしは仕事の一環で、どうデータをわかりやすく見せられるか、ということに常に悩んでいたのですが、このサイトでD3.jsというのを知り、そして調べてみると、D3.jsを作った人のうちの１人が在籍していた（前後関係は知りません）ために、D3を使ったページが数多くNewYorkTimesに存在するようでした。

D3というのはもともとStanfordのデータビジュアライゼーショングループが作成した"protovis"というライブラリが前身ですが、
D3を見つけた当時、もうひとつ面白そうなライブラリがありました。

SIMILE Widgets

それが下記のSIMILE Widgetsというもので、こちらはMITの方が作ったもののようです。
SIMILE Widgets | Timeline

これは用途は特定されるのですが、テキストデータを時系列の定量データと組み合わせて柔軟に表示することが可能で、Timeline及び、Timeplotという２つの見せ方である程度テンプレート化された描画機能が提供されていました。

結局、これらがやっていることをD3.jsを活用して実装したので、あまりこちらを活用することはなかったですが、見せ方としては大きなヒントをもらいました。

SIMILE Widgetsについては、ほとんど日本語のサイトがなくていろいろ大変でしたが、下記のサイトを参考にして使ってみました。
SIMILE Timeplotで時間軸のグラフを作成する11つのステップ - みちしるべ
 SIMILE timeline を使ってみる : 女プログラマってどうよ？

D3.jsでどう作るか

当時は今ほど書籍もなく、ネットでひたすらサンプルを探っていましたが、そのときの流れは下記のような感じです。

まずは考え方を知る

私はjavascript自体が未経験だったのですが、このライブラリの考え方を習得するのは、下記のサイトが最もわかりやすかったです。
d3.js - 三つの小円

あとは真似る。

あとは、ひたすら公式サイトのサンプルをみたりしていろんなチャートタイプを真似ていきましたが、自分がやろうとする可視化は、WEB上で条件を指定して、DBに検索パラメータを渡してデータをもってきて表示する、という形が多く、データのリフレッシュでうまくいかないことが最初は多かったです。そのときには下記のサイトが参考になりました。
javascript - d3js graph retaining old axis data on refreshing with new data - Stack Overflow

モーションチャートといえばこれ

データビジュアライゼーションでは、下記のTEDでのHnasRoslingの講演が非常に有名です。
Hans Rosling: The best stats you've ever seen | Talk Video | TED.com
ここではGapminderというツールが使われており、これ自体はGoogleに買収され、GoogleのVisualizationAPIに組み込まれています。かつ、これがR言語でも"googleVis"というライブラリを使って、簡単に呼び出すことができる、ということは、いずれ記載したいことではありますが、これをD3.jsで表現したサイトがあります。
D3.jsでモーションチャートを作る上ではこちらを参考にしました。
The Wealth & Health of Nations

地図系の描画といえばこれ

D3.jsを使った地図系描画で日本語のサイトで参考になるのは、間違いなく下記だと思います。
http://shimz.me/blog/
当時から、既にいろいろと実装されていて、すごく参考にさせてもらってました。

ちなみに、D3.jsを使って地図上に描画するうえでは、その場でズームイン/アウトとかをするのであれば、Openlayorsを用いるのがいいと思います（性能の問題はありますが・・・）。

感銘を受けたサイト

最近出回ったものも多いですが、下記のサイトはどれもすごいです・・。
こんなのがすぐに作れるようになるといろいろ便利なんだけど・・。
http://www.nytimes.com/interactive/2012/08/24/us/drought-crops.html?_r=0
World Bank Global Development Sprint
Norse - IPViking Live

書籍

D3.jsを使い始めたころは、日本語の書籍はまだまったくなかったですが、ここ1年でだいぶ充実してきました。
まず英語版しかなかった下記の日本語版がでてきたのが最初でした。
Amazon.co.jp：インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化: Scott Murray, 長尾高弘: 本

それから、下記の本はすごくお勧めです。CoffeeScriptで書かれていて私の技術力では到底及ばないですし、何をどう可視化するべきかという話もあるうえ、さらに、EDA(Exploratory Data Analysis)についても言及されています。
Amazon.co.jp：エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus): 森藤大地, あんちべ: 本