UPDATE: この 2012 年の記事で紹介した多くのツールは今でも有効で、さらに便利になるように開発されていますが、インタラクティブ データ視覚化ツールに関する最近のシリーズに興味があるかもしれません。
Complex Data Visualization Tools
Welcome back for my series on interactive data visualization (dataviz) tools の第2部。 パート 1 では、Web ページ上でチャートやグラフ、その他多くのデータ タイプを視覚化するためのクールなツールを 3 つ取り上げました。 パート2では、もう少し複雑ですが、信じられないようなデータ可視化機能を持つ、さらに3つのツールを紹介します。
- jQuery Visualize (Part 1)
- Google Charts (Part 1)
- Highcharts (Part 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.D3.D3 (Part 3)
- Google Charts
- Highcharts
Simile Exhibit
Simile Exhibit
Exhibit は、非常に堅牢でカスタマイズ可能な製品です。 その主な強みの1つは、データをレンダリングするためのユニークなアプローチです。 使いやすいフィルタリング、ソート、および検索ツールに加えて、HTML テンプレート (Exhibit では「レンズ」と呼ばれます) を使用して、ページ上のすべてを思い通りに表示するように構築することが可能です。 レンズの中で直接属性値を通してデータにアクセスできる、datavizのミニCMSのようなものです。 ルック アンド フィールに高度な感度を必要とするプロジェクトでは、データ ビジュアリゼーションを構築するためのこの極端なレベルの柔軟性は素晴らしいものです。 折れ線グラフ、マップ、散布図、マルチフィルター可能なリスト、タイムライン、タイムプロットなど…ウィジェットもあります！
PROS
Flexible & Powerful Approach to Design
Exhibit のアプローチは、データが「レンズ」（要素が配置された HTML テンプレート シェル）を通して提示されるところが非常に気に入っています。 これにより、システムは完全にカスタマイズ可能で、CSS スタイルにも対応しているため、デザイナーはこのシステムを気に入り、クライアントのブランドの一貫性を簡単に作り上げることができます。 フィルタリングは Exhibit に組み込まれており、簡単に実装することができます。 サーバーサイドのフィルタリングは面倒なものです（言うまでもなく高価です）ので、ユーザーのフィルタリングを信じられないほど迅速かつ簡単にする点で、Exhibitは本当に傑出しています。 ソートと検索も同様です。 Exhibit は、サイトユーザーが望むデータのビューを正確に得るためのコントロールを非常に簡単に提供し、その結果、なぜそれが重要なのかについてより価値のある理解を得ることができます。 Exhibit は、彼らのウェブサイト上の素晴らしいドキュメントと、いくつかの素晴らしい初心者向けチュートリアルによって、そのプロセスを本当にスピードアップしてくれます。 ウィジェットで機能を追加することができます。 書誌と引用のコレクション、CoverFlow スタイルの画像ビューアー、タイムライン、およびタイムプロットなど、いくつかのウィジェットが利用可能です。 このような製品拡張により、Exhibit は、データ視覚化のための最も堅牢で柔軟なオプションの 1 つとなっています。
CONS
急な学習曲線 他のより複雑なライブラリと同様、Exhibit には他のオプションよりもコーディングが必要で、以前の Javascript 経験があれば非常に便利です。 しかし、チュートリアルは本当によくできていて、楽しいので、一度始めると本当に簡単に軌道に乗ることができます。 サポートされているチャートタイプの素晴らしいリストを特徴とし、いくつかのアニメーション機能をミックスに導入しています (たとえば、棒グラフの棒は、チャートを読み込むとそのサイズに拡大します – このようなことです)。 アニメーションは素晴らしく、間違いなくあなたのサイトにさらなる洗練を加えることができます。 また、グラフをクリックして「フィルター」を適用するような、クールなインタラクティブ機能もあります。 グラフをクリックすると、フィルタを解除するまで、クリックした系列だけが表示されます。 デモをチェックして、このツールキットの能力をもっと確認しましょう。
- サポートされている視覚化タイプ。 エリアチャート、バーチャート、パイチャート、ツリーマップ、フォースダイレクト、ラジアルグラフ、サンバースト、アイシクル、スペースツリー、ハイパーツリー
- データ入力。 JSON
- 出力。 Canvas
- スタイリング。 Javascriptのパラメータ
- タイプ。 Javascript ライブラリ
PROS
Unique Chart Types
InfoVis Toolkit で利用できるさまざまな標準外の視覚化タイプが本当に好きです。 このツールは、円グラフを時々表示するには過剰かもしれませんが、より複雑なデータの表示オプションにアプローチしなければならないときには、本当に輝くかもしれません。 これらのチャートには、Flash のような素晴らしい品質があり、本当に素晴らしいです。 また、これらのグラフと対話する機能、つまり、ものをドラッグしてグラフを操作する機能 (このグラフのように) は非常にクールで、本当に便利です。
CONS
Learning Curve
これらの素晴らしい機能には複雑さが伴い、Web サイト上のドキュメントは良いように見えますが、このツールを最大限に活用するには、ある程度の優れた Javascript の経験が必要とされます。 D3 の Web サイトを数時間見回って迷子になりましたが、可能性は無限大のようです。 このツールは、Javascript と JSON に関するかなり高度な専門知識を必要としますが、いくつかの豪華で洗練されたグラフを生成します。 サンプルを見てみましょう。
D3 は他のものとは違います。 これは「すぐに使える」チャート作成ツールではなく、データ ベースの要素を描くためのフレームワークです。 D3 の Web サイトはそれを最もよく表しています。 「誰もが必要とするすべての機能を備えたモノリシックなシステムを提供するのではなく、D3 は問題の核心である、データに基づくドキュメントの効率的な操作のみを解決します」
そして、SVG グラフィックスを作成できるので、印刷アプリケーションなど、どこでもこの出力を使用できます。 D3 は、グラフの多いプロジェクトで、洗練された Web/印刷出版ワークフローの中心になる可能性があります。 すべてですか？ 無制限。
PRO
Unlimited Flexibility
D3.js を使用して、データに基づいて望むものを何でも描くことができます。 これは、新しいデータ ビジュアリゼーションや非常に大きなデータ セットに基づいたビジュアリゼーションを作成する人にとって、素晴らしいツールです。
出力
D3 に指示して SVG だけでなく HTML アイテムも作成できるのは非常にクールです。 理想的な CSS でのスタイリングへの扉を確実に開いてくれます。
CONS
Learning Curve
D3 に輪をかけさせるには、熟練した Javascript、JSON、および数学者でなければならないでしょう。 また、いくつかの例では頭を悩ませてしまいますが、チュートリアルを実行してみてください。 jQueryやPrototypeに慣れている人なら、このチュートリアルの多くは見覚えがあるはずです。
Conclusion
These six products are just the tip of the iceberg for dataviz. 他にもたくさんの素晴らしい製品があります。 しかし、これらによって、何が起こっているのか、そして、インタラクティブな Dataviz の世界の機能の範囲と複雑さを知ることができます。