7rpn’s blog: うわああああな日常

好きなことをつらつらと。AIとかで面白いことをしたい。

Processing vs D3.js

...ビジュアライジングしたい。

と思ったわけです。現代では直に感覚に訴えかけるようなビジュアライジングが溢れており,自分もやりたいなーと思ってしまうわけです。
そこで誰もが突き当たるのが,どうやってビジュアライズするか 問題。

ビジュアライジングっていわゆる可視化手法で,理解しづらいデータを視覚的に理解しやすい形に再構成することらしいです。
グラフ書くだけならExcelで何も問題ないのですが,やっぱり対話的に作りたいなーと思いますよね。マウスかざしたら詳細が表示されるとか。

てなるとやっぱりプログラム組まないといけないわけです。そしてプログラミングの手法に何を選ぶかってその後の効率にかなり響いてくるのでけっこう大事。

というわけで,代表的な可視化手法であるProcessingとD3.jsのどちらを選ぶか悩んでみました。とりあえずオライリー本は両方あります。比較するしかない。 f:id:s7rpn:20160110163107j:plain

Processingとは?

ご存知かなり古くからある可視化手法。MITで2001年に生まれたんだっけ?
Javaで記述します。PythonやJSもサポート。

一応processing-rubyってのがあるらしい。Rubyで書いたらprocessing用のJava吐いてくれるやつ。Rubyで書けるって聞くと飛びつきたくなります。笑

Processingのオライリー本が2008年初版なのでさすがに古さを感じます。そして書いてある内容がすごいお堅い。ていうかJavaで説明されるのがつらいなーって感じ。どうせJSかRubyでしか書かないと思うのに。

D3.jsとは?

データ・ドリブン・ドキュメントとかいうのの略語らしい。2011年ぐらいに作られたものだと思います。日本ではそれほど流行ってる印象がないですね。

記述方法はJavaScript一択。D3.js単体では図形を描写する能力すらなくて,HTMLの仕様に組み込まれた他の物(ていうかほぼSVG)を操作して図形を描写します。

D3.jsのオライリー本をProcessingのコントリビュータさんが書いているらしい。ちなみに2014年初版。書いてある内容はめちゃくちゃ面白いです。くだらないギャグが7割り増しらしい。動的型付けの欄はめちゃくちゃ笑いました。
このD3.js入門サイトの内容を大幅に改訂したもの。分量は桁違いに多いです。そして学びやすい。

両者の比較

比較ならとりあえずグーグルトレンドを参照するよね。笑 f:id:s7rpn:20160110163207p:plain グラフを見る2013年くらいからD3.jsがProcessingを上回っている感じです。 やっぱり後発のD3.jsのほうが道具としてうまく練られてれているのでしょうか。

ツールの違いとして,Processingはセット一式なんですが,D3.jsは一つのツールのみなんですよね。
例えるなら,Processingはハサミ,のり,トンカチ,定規が揃ったツールボックス
D3.jsはハサミだけ。あとはHTMLとかJavaScriptとかに丸投げ。この違いは結構大きいと思います。

とりあえずD3.jsを学んでみた

感想としては,良い。 Ruby好きだったら同じようにバリバリメソッドチェインしていけるから最高です。 Processingだったら数行数十行書かないといけないようなプログラムも繋げ続ければ一行で書けてしまう。もちろん見にくいので改行しますが。笑

とりあえずすべての建物を地図上に投影してみたり。東京。 f:id:s7rpn:20160110162807p:plain

D3.jsはツールの一つであるっていう立ち位置が非常にありがたいですね。Web系だったらある程度触った事あるので,そこにD3.jsっていうものを足すだけで十分なのは学習コストが非常に低くて良いです。それにWeb周りの学習にもなります。

実際自分は,ビジュアライズというよりネット上のベクター画像(SVG)操作用のライブラリとして使っている感が有ります。

ただし,一つできないことがあります。それは光るようなビジュアライズ。 光っているものをPCの画面上で実装する場合は加法混色で実装するのですが,SVGではまともに対応していません。二枚の画像を加法混色で重ねあわせることならできましたが,それ以上のことは自分の力不足かできませんでした。
多分こればかりはProcessingを使わないとできなさそうです。

つっても光らしたり3D描写したりっていうミーハーなことやりたいんだったらThree.jsとか学んだ方が近道かもしれませんが。

結局両方必要になるのでは?

まとめとして,まぁどちらの手法にも一長一短あるんだと思います。両方をある程度学んだ上で,こういうことやるならこっち,っていう選び方が出来るようになりたいなーと。

だから始めるのも自分に合った手法,自分がすんなり受け入れられそうな手法で始めるのが良いと思います。 例えば,Web周り触った事あるんだったら最初に手を出すのはD3.js一択だと思いますね。PHPRubyでデータベース扱って,それをJSに渡して,ビジュアライジングするっていうのがシームレスにできます。
JavaPythonの経験があるのならProcessingからってのも良いと思います。細かいところから作り込める伝統ある可視化手法ですし。

自分に合ったやり方から始めるのがやっぱり一番良いですよね。みたいな感じでした。


関連:
名大で一番リア充が入る学部はどこだ?Project Oxfordのemotional APIを試す