Viz Log

2012-05-07

Complex Data Visualization with JavaScript: Part 3

いくつか取りこぼしがあったので更に追加。 Part1 Part2

jsPlumb

大規模なグラフを描画するというよりは、奇麗なネットワーク図、あるいは生物学的パスウェイ等、比較的複雑なものを描く用途に向いているライブラリ。ノードやエッジに複雑な処理を施す事が可能。

Flotr2

HTML5 Canvasを利用した一般的なチャート（円グラフ、折れ線グラフ等）描画用のライブラリだが、仕上がりが奇麗。HTML5なので、もちろんダイナミックなアニメーションも可能。

Google Chart Tools

定番。描画のカスタマイズ自由度が飛び抜けているわけではないが、Googleの他のサービスと連携させる事が容易なのが強み。

私が仕事でやっている事がグラフ（ネットワーク）に関わるものが多いのでやや偏り気味ですが、ネットワーク描画関連で活発に開発されているものは、これでほぼ網羅できていると思います。

→

Complex Data Visualization with JavaScript: Part 2

前回の続きです。取りこぼしていたものをいくつか追加します。

sigma.js

グラフ描画ライブラリ。グラフデータの入出力部分まで含んでおり、GEXF形式のファイルを簡単に可視化出来る。プラグインの考え方を取り入れており、新たに特定のファイルフォーマットのパーザ等を追加するのは容易。

arbor.js

グラフの描画に特化したライブラリ。APIもグラフに特化したシンプルなもので分かりやすい。パフォーマンス重視と書いてあるので、一度簡単なベンチマークをしてみたいところ。

paper.js

HTML5 Canvasベースのライブラリ。思想的にはProcessing.jsに近い。プリセットを使ってチャートを簡単に描いたりするというより、独自の描画アイデアをCanvasで行いたい時に使うタイプのフレームワーク。

vvvv.js

メディアアート等に用いられるvvvvのJavaScript版。思想的にはMAX/MSPの影響下にあります。基本的にはヴィジュアルプログラミング環境で、演算を行うノードをパッチングする事によって可視化等を行う事が出来ます。まだプロジェクトとしては非常に初期の段階で、出来る事は限定されていますが、これからが楽しみ。

Data.js / Dance.js

可視化に使うデータをモデリングするためのライブラリ(Data.js)とそれをバックに可視化を行うライブラリ(Dance.js)の組み合わせ。Data.jsの方は、汎用的なグラフとコレクションを基本に作られており、ここでモデルしたデータを他のライブラリで使う事も可能。

Polymaps

多くの分野の可視化で欠かせない「地図」に注力したライブラリ。地図に様々なデータを重ねたりする事が可能。

現時点では、これを使えば全て出来る、と言うようなフレームワークはまだありませんが、進歩の激しい分野なので定期的にまとめたいと思います。

→

Complex Data Visualization with JavaScript: Part 1

時代はますます何でもWeb上、と言うかブラウザ上へ移行してます。データ可視化と言う分野も例外ではないです。以前はヒストグラムを描くとか円グラフを表示するとかのシンプルなものはともかく、それ以上に複雑なデータの可視化を行う場合は、Flashで作り込むとか、Javaでアプレットを作るとか、そう言った作業が必要でした。そのためのツールキットの代表例としてはPrefuse等があります。

TreeView Demo by Jeffrey Heer:

しかし、近年の第二次ブラウザ戦争(HTML5への対応やJavaScriptの実行速度競争など。第一次はIE vs Netscape)のおかげで、クライアント側のテクノロジが飛躍的に進化し、JavaScript実行のパフォーマンスが向上したり、GPUの恩恵を描画で受けられたりと、特にマルチプラットフォームのサポートを求められる事の多いデータ可視化系プロジェクトでは、ブラウザ上でのデータ可視化アプリケーションの実装は魅力的な選択肢になりつつあります。以下はそう言った用途に使えるライブラリのまとめです。

1. D3.js (Data-Driven Documents)

比較的良く使われる手法が手広く実装されているツールキット。円グラフや折れ線グラフほど一般的ではないが、可視化の世界では標準的な手法として使われている以下のようなものが予め実装されているので、少ないコード量で様々な描画ができる。

Force-Directed Graph
Treemap
Chord Diagram
Tree

2. JavaScript InfoVis Toolkit

D3.jsに似ているが、グラフ（ネットワーク）の描画と、インタラクティブ性に力を入れている。例の中に様々なグラフの表示例があるので、小規模なネットワーク図を描いたりするのは簡単にできる。

3. PhiloGL

上のツールキットと同じ作者によるWebGLを利用したライブラリ。どちらかと言うと、上記二つよりも実験的性質が強く、即実用的な図を描くためのものと言うより、WebGLを使って何か可視化アプリケーションを作りたいときに使うbuilding blockと言った趣き。

4. Raphaël

SVGベースのシンプルな描画ライブラリ。インタラクティブなチャートを描いたりするのに向いている。

5. Processing.js

Javaのバージョンが有名なメディアアート向けプログラミング環境のJavaScript版。これは可視化ライブラリと言うより簡単な描画のためのライブラリと言う色合いが強いので、複雑な可視化機能を自分で実装したいと言うような場合に向いている。Sketchpadと言うブラウザ上でダイナミックにProcessing.jsのコードを実行できる環境があり、そこに様々な人々が作ったサンプルが大量にあるので、その辺りを参考にするのが思い通りのものを作る近道。

Transversal Lines (2011) by Joao Martinho Moura:

6. Three.js

上記のProcessing.jsの考えをさらに押し進めたような最近活発に開発されているフレームワーク。HTML5のcanvas、WebGL、SVG使ったレンダリングが可能で、三次元空間の活用も積極的に推奨されている。元々可視化のために作られたものではないので、ゲームなど、広く応用ができる反面、実用的なものを作るにはそれなりに経験が必要。今後の注目株。

以上、簡単なまとめ。各サイトのサンプルを試していただくと分かるように、巨大なデータを一気に大画面で表示してグリグリ動かす、とか言う用途以外はかなりブラウザで行けてしまう時代になりつつあります。従って、JavaScriptが奇麗に書けるスキルがこの分野では必須になりそうな雰囲気です。

番外編: Cytoscape Web 2