GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

D3.jsはなぜ人気があるのか? そして、なぜ難しいのか?

     - d3.js ver.3

はてなブックマーク - D3.jsはなぜ人気があるのか? そして、なぜ難しいのか?
Pocket

個人的なD3愛についてはこちらに。
d3.js resource

日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。
JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか? その理由を考えてみました。

結論

なんかスッゲー長くなったので先に結論を書いておきます。

  • 他のChartライブラリより柔軟性が高い
  • コードが簡潔に書ける
  • JavaScriptの面白さを味わえる
  • 理解が進む程に惹かれる設計の妙

以上。以下、詳細。

柔軟性

データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを求めないと図として表示することができないわけです。
多くのChartライブラリはこれらデータを図(グラフィック)として表示する際のメンドクサイ計算をライブラリ内で行い、同時に実際に図として描画するところまでをサポートしてくれます。しかし、D3はデータを基に座標系に変換するなどの計算は行ってくれますが、実際に図を描画する機能はありません。
たとえばD3のツリーマップレイアウト関数は、データセットを渡すとツリーマップを表示するのに必要な計算を行いその結果(各ブロックのXY座標やブロックの幅・高さなど)をデータセットに付加して返します。しかし、実際にツリーマップを描画する処理は製作者が自身でコードに記述する必要があります。

filelisttreemap

これは一見不親切なように思えますが、Chartライブラリが提供するグラフのテンプレートデザインをカスタマイズするだけでは足りず、自ら凝ったデータビジュアライゼーションを作成したい製作者にとっては描画する方法を自由に選択できる利点となります。
上記のツリーマップレイアウトにしても、図を描画するために必要な情報(画面上の座標や各ブロックの大きさ)などはD3が計算してくれるので、あとはその情報を元にDIVタグとCSSで作成しても良いですし、インラインSVGのrect要素を使って描画することもできます。
Three.jsと連動させWebGLでグラフを描画するなんてこともできます。
この柔軟性の高さが、他ChartライブラリよりD3が抜きんでて注目されている理由の一つとなっています。
最近では他Chartライブラリとは一線を画す、よりコアな機能を提供するライブラリとしてD3を「データビジュアライゼーション・エンジン」と紹介している記事もみかけます。

簡潔

D3の名称は「Data-Driven Documents(データ駆動ドキュメント)」の頭文字をとったものなのですが、その名の通りデータとドキュメント(DOM)を結びつける独特なセレクション機能がD3の中心となっています。このセレクション機能を使うことで図形を描画する処理を簡潔に記述することができるのがD3の大きな特徴です。
たとえば、下記グラフは散布図と地図を描画しその2つを連動させるという多少複雑な処理を行っています。

plotmap

リンク先の記事に掲載したコードを見ていただくと分かるのですが、殆どが「var 変数 = d3.〜」というコードで占められています。
一部にif文を用いた条件分岐を記述していますが、データセットを扱うときに頻出しがちなループ文(for)などが一切ありません。
このように、D3のセレクション機能を使うことでデータセットに対する反復処理を記述する必要がなくなるため、複雑なデータビジュアライゼーションを作成する際でもコードのシンプルさを保つことができます。
この「Data-Driven Documents(データ駆動ドキュメント)」という設計思想や簡潔に記述できる特徴が、D3が多くのユーザーに支持され注目される最大の理由だと思います。

その他

D3はJavaScriptの関数型言語としての側面を最大限に活用して作成されているライブラリです
そのためD3のサンプルコードなどを眺めているとJavaScriptのプログラム言語としての面白や柔軟さが如実に感じられて、それもまたD3の人気に繋がっている気がします。
D3を使っていると「こんな風に複雑な処理を簡潔に記述する方法があるのかー」といろんな発見があって楽しく、D3への理解が進むほど「なんて上手く設計されているんだ! awesome!」みたなテンションになってくるのですね。この辺りはデータビジュアライゼーションに興味がない方でも、JavaScriptの勉強に役に立つと思うので是非一度使ってみて欲しいと思います。

D3の人気の秘密は他にも、地理情報の処理機能が豊富(あまり他のライブラリには無い機能)とか、強力なスポンサーが付いているとか、ライブラリの作者自ら大量のサンプルを公開しているとか、ドキュメントやリファレンス、チュートリアルが豊富(ただし、ほとんど英語)などがあります。

なぜD3は難しいのか

これまでD3が注目される理由を述べてきましたが、実はこれらの要素が同時に初めてD3を触る人に「難しい」と感じさせる要因となっています。
ちょっと手持ちのデータをグラフとして表示したいという人にとっては、テンプレートがなくグラフの描画処理を自身で実装しなければならないD3は難しく感じるでしょうし、なによりD3の独特なセレクション機能は斬新な仕組であるゆえに理解するまでに結構時間がかかります。
D3はあくまで「複雑なデータビジュアライゼーションでも簡潔に記述することができるライブラリ」であって、「グラフを簡単に表示できるライブラリ」では無いので注意が必要です。

しかし、ある程度の山を越え理解が進んでくると思いのほか自分の描きたい図を描くことができて楽しくなってくるので、興味があればぜひ一度触ってみてください。

【関連】
データビジュアライゼーション「d3.js」
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ

はてなブックマーク - D3.jsはなぜ人気があるのか? そして、なぜ難しいのか?
Pocket

 - d3.js ver.3

Comment

  1. […] D3.jsはなぜ人気があるのか? そして、なぜ難しいのか? | GUNMA GIS GEEK […]

  関連記事

過去の震災データを並べて視覚化してみた。

もうすぐ3月11日。震災から5年経ったわけですが、時が経つのは早いものですね。 …

d3.svg.brush
【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush)

下位のグラフで選択された範囲を上位のグラフで拡大表示します。 複雑なことをやって …

重み付けボロノイ図
【D3.js】重み付けボロノイ図

example 重み付けボロノイ図のサンプルを作った。 通常のボロノイ図は母点間 …

JavaScriptでヘッドトラッキング

ヘッドトラッキングで地球儀をぐるぐる回すよ! example Gunma.web …

Data-Driven Documents ?
9月6日に大宮でD3.js勉強会をやります。

Code for SAITAMAさんに声をかけていただき、D3.jsの勉強会を開 …

群馬県交通死亡事故発生マップ
群馬県の交通死亡事故発生箇所データをヒートマップにして表示してみた。

demo 群馬県が待望のオープンデータを開始してくれたので、早速公開されているデ …

高崎市 平成27年度の主要新規事業予算
高崎市 平成27年度の主要新規事業予算の一部を視覚化してみた。

example 「高崎市の予算(平成27年度)当初予算の概要及び主要事業」より、 …

ツイートワードクラウド
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。

嗜好がバレる。 自分のすべてのツイートをダウンロードできるようにしました 日本の …

【D3.js】地図上に四分木を描く

example 以前、地図上にボロノイ図を描いてみましたが、今回は四分木を描いて …

【D3.js】 地図上のルートに沿ってアニメーション

example 以前の記事で、地図上の2点を結ぶ線を引く方法を掲載しましたが、今 …