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 […]

  関連記事

余命地図
あなたの余命はあと何年? 余命地図を作ってみた。

厚生労働省の「平成22年市区町村別生命表」のデータを用いて「余命地図」なるものを …

css 3d line chart
【D3.js】3D風のラインチャートを作る

example D3.jsを使って3D風の線グラフをつくってみました。 手前から …

hummer & d3
D3.jsとHummer.jsを組み合わせてスマートフォン対応を行う

もともと、D3ではdragビヘイビア/zoomビヘイビアがスマートフォンの操作に …

D3.js Openlayers
【D3.js】OpenLayers上にD3.jsで作成したSVGをオーバーレイ

出来た……けど、理解できてない orz OpenLayersライブラリを使ってO …

test000000
CodeIQでD3.jsの問題を作成しました。

d3.js Advent Calendar 2013 10日目の参加記事です ぶ …

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

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

夏バテ
D3.jsを用いて作成されたデータビジュアライゼーション事例まとめ。

絶賛、夏バテ中です。 ここ数日間は、ホント「仕事して寝る」の繰り返しでブログに書 …

2014年12月14日時点での衆院議員の資産データ
衆院議員の資産データをツリーマップにしてみた。

自民党デカっ! example 衆院議員の資産データをツリーマップで表示してみま …

Data visualization
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ

「データビジュアライゼーション(D3.js)を学ぶための教材まとめ」も大分量が増 …

reprojection
【D3.js】世界地図画像をクライアントサイドで再投影処理する

example 正距円筒図法で作成された世界地図画像をクライアント側で他の投影法 …