データビジュアライゼーションをはじめるためのフリーのツール・情報源20選

お知らせ (2015年9月30日)
日経ビッグデータ発行の『データプレゼンテーションの教科書』(2014年12月発売)の記事「データビジュアライゼーションのためのフリーツール厳選20」(P.102~105)において、本記事の翻訳文が盗用され、改変の過程で誤訳が生じていました。詳しくは下記リンクをご参照ください。
 『データプレゼンテーションの教科書』(日経BPムック)についてお詫びと訂正(日経BP社サイト)

この記事はThe top 20 data visualisation toolsの原著者許諾済みの日本語訳です。

Brian Sudaが、データをクリーンアップし、すてきなビジュアライゼーションを作成する20のツールと学習情報を紹介します。

Original Article by Brian Suda.
Translated by Tatsuo Sugimoto.

この記事では、フリーで入手しやすいチップスとツールに焦点をあてています。この分野では多くのすばらしい有料のツールが知られていて、私もそれらのツールを利用しています。しかしこの分野の入門者が、何をはじめるのかよくわからないまま、高価なソフトウェアを購入するのは現実的ではありません。ここでは、Webや印刷物向けに美しいデータビジュアライゼーションを作成するのに役立つツールと情報源をくわしく紹介していきます。

データセットを洗い出して組み合わせるデータジャーナリズムから、装飾的にデザインされたインフォグラフィック・スタイルのポスターまで、どのジャンルでもうまく成果を上げるにはツールとオーディエンスの理解が不可欠です。この記事では、新しい情報に目を向け、さらにスキルを磨くための適切な指針を示します。

もくじ

クリーンアップ

データセットを扱っている人はみな口を揃えて、データセットを使えるフォーマットにするためのクリーニング作業に多大の時間を費やしていると言うでしょう! 典型的なクリーンアップ作業は、乱雑なエクセルファイルの数値を再整形したり、略語を広げたり縮めたりして、きちんと整理された列群へと変換するといったことです。たとえば、「UK」、「U.K.」、「United Kingdom」は、どれも同じ値を異なるやり方で表記したものです。そこでデータを「クリーニング」することで、これから紹介するツールを利用したワークフローで一貫性をもって使える情報にするのです。

この大変な作業を軽減するツール群がこれまでに多く作られています。もしこの分野へ進んでいくのなら、データをクリーンアップするのに役立つツールを知っておくことが、あなたの平静を保てる唯一の方法です。PDFからデーターベースにコピーペーストするのに時間を費やすことほど最悪なことはありませんからね。これから紹介するいくつかのツールは、あなたの仕事を大変にすることなくスマートにしてくれます。

Data Wrangler

Data Wranglerは、乱雑なデータセットを貼り付けると、データをクリーンにするための数ステップを経て動作し、お気に入りのツールで動かすのにより適切なフォーマットでダウンロードできるWebベースのツールです。開発したスタンフォード大学のデータビジュアライゼーションチームは、データ抽出の新技術においてたいへん優秀なチームです。

[訳注]
現在Data Wranglerは、研究プロジェクト期間を完了し積極的なサポートが打ち切られています。開発チームメンバーは、Trifactaというベンチャー企業に移籍しています。また、スタンフォード大学のデータビジュアライゼーションチームは、ワシントン大学のインタラクティブデータラボへ移動しました。

Data Wrangler

Open Refine

Open Refineは、Google Refineのリブランドです。Data Wranglerと同じく、Open Refineもデータを使えるフォーマットにクリーニングしますが、Open RefineはオンラインではなくローカルのPCで動作するという違いがあります。データの機密を保持したい場合、Open Refineを使えば解決できます。

この2つのツールは、扱いにくいデータをクリーンアップするだけでなく、不正なデータポイントを検出して知らせてくれます。コンマやピリオド、数値から3桁分のゼロを追加したり削除したりする単位記号の欠落などです。たとえば、100,000 と 100K は同じ値ですが表記が異なります。こうした異常値には、より詳しく調査できるようにフラグがつけられます。

また、これらのツールは、NASA と N.A.S.A. のようによく知られた略語を統一しようとします。こうした機能は、結果を分析するさいに時間を大幅に節約してくれます。

Open Refine

Tabula

Tabulaは、扱いにくいPDFファイルからCSVデータを抽出してくれる新しいプロジェクトです。Tabulaは、データを抽出したいエリアを選択するだけで、抽出した結果をプレビューできCSVファイルとして返すシンプルなインタフェースをもっています。とても簡単です! リンク先に、できることを示したすばらしいデモがありますが、自分の書類を処理するには自前のサーバが必要になります。

[訳注]
Tabulaは、公式サイトからWindows/Mac/Linux版をダウンロードできます。

政府機関はますますデータを公開するよう迫られていて、しぶしぶPDFファイルで公開しています。PDFファイルはマシンにとってアクセスしやすい書類ではないため、PDFファイルからデータを抽出する多くのよくできたツールが同時に発展しています。ここには、データクリーニング技術の専門家になる巨大なチャンスがあります。この技術は、数年前には存在さえしていなかった数多くの領域のひとつであり、現在とても求められているスキルなのです。

Tabula

D3

前回の記事では、チャート作成ツールとしてD3を紹介しました。D3は、シンプルなチャートやグラフをつくるにはやや複雑なところがありますが、より簡単につくることができるD3用の追加ライブラリをいくつか紹介します。

NVD3

NVD3は、再利用のためのライブラリです。このプロジェクトは、D3のもっているパワーを利用して、一般的なチャートタイプを出力します。NVD3は、異なるデザインがはびこることを防いで制約をあたえると同時に、データビジュアライゼーションを始めたばかりの人にとって、はるかに簡単で親しみやすいコードを作成するため、私はこのアイデアをとても気に入っています。

NVD3

D3 Maps

地図製作に取り組むには、D3用の美しい地図生成ツールD3 Mapsがあります。たとえば、みなさんが「ヴィーフェル図法」の地図を作成しなければならなくなるかどうかはわかりませんが、もしそんな機会があるとすれば、このツールが最適です! D3 Mapsを使えば、非標準的な地図ライブラリ利用にメリットのあるプロジェクトで、とても簡単に地図を作成することができます。

D3 Maps

ツール

ここでは、よりオープンで柔軟な一般的なチャート作成ツールを紹介します。どれも、みなさんのワークフローやデザインで使えるツールであるとともに、生データに価値を提供しインスピレーションの源泉にもなるでしょう。

Wolfram Alpha

Wolfram Alphaは、サーチエンジンではなく知識エンジンです。Wolfram Alphaはあらゆるデータをプロットできます。「次の満月は」といった質問を訊ねると、基本的なビジュアライゼーションを返してきます。自分のFacbookアカウントについて訊ねると、Wolfram Alphaは数多くの興味深いチャートやグラフ、あなたのつながりや関心についてのデータを返します。Wolfram Alphaは汎用ツールではありませんが、大量のデータセットを扱って様々な方法で表現するすばらしい事例です。Wolfram Alphaブログに詳しい紹介があります。

Wolfram Alpha

Chart.js

Chart.jsは、デザイナーや開発者向けの美しいオープンソースのチャートライブラリです。数行のJavaScriptコードでcanvas要素内にチャートを描くことができます。ただしIEはcanvas要素をまるで扱えないので、IE8以下ではちょっとした対応を要するでしょう。Chart.jsは、基本的なチャートのタイプをほとんどカバーしていて、動作にはわずか20KBしかページ容量を増やしません。

現在のチャートやグラフの代わりになるものを探しているなら、これが答えになるかもしれません。

Chart.js

Processing.js

Processingのことを聞いたことがあるなら、それが一風変わった偉大なアニメーションとインタラクティブなパワーを持っていることをきっとご存じですよね! ProcessingがWeb用にJavaアプレットを出力することもご存じでしょう。いまでは、そのProcessingのすばらしさをJavaScriptでも使えます。

Processingは、驚くべきインタラクティブなデータビジュアライゼーションへの扉を開いてくれます。圧縮バージョンの容量は200KB以上ありますが、完全に機能するアニメーションツールと物理エンジンを提供しているのですから、まったく問題ありません!

Processing.js

Paper.js

長い間、Adobeのクリエイティブ・ソフトウェアをスクリプト制御する最良のやり方は、Scriptographerでした。現在それは、Paper.jsとしてWebに移行しました。Processing.js が数年の歴史を持っているのに対して Paper.js は新入りです。それでもこのライブラリには注目する価値があります。新しいといっても、このライブラリの起源は折り紙つきなのですから。作例をながめているだけで、きっとこのライブラリを活用したプロジェクトをいくつか着想できるはずです。

Paper.js

JpGraph

Google Static Charts の停止が迫ったとき、静的グラフ生成の需要を満たすものが存在しませんでした。手の込んだインタラクティブなチャートはすばらしいのですが、ベクター形式のSVGグラフだと、そのチャートをプレゼンソフトにコピーペーストすることがほぼ不可能です。ただ幸運なことにcanvas要素は、画像として書き出せてスクリーンキャプチャもできます。しかし静的画像が適している場合は、画像で始めませんか。JpGraphは、Google Static Charts の代わりとなるすばらしいツールです。PHPで書かれたサーバに設置するプログラムで、自由なライセンスをもつ JpGraph は、データビジュアライゼーション作成のツールボックスに加えておくとよいでしょう。

JpGraph

Circos

環状のダイヤグラムがお好み? ゲノム情報を扱っている? もしそうなら Circos がぴったりです! バイオデータのビジュアライゼーションという特殊な領域をこえて成熟した Circos は、いまでは大量のデータをコンパクトで円形のビジュアライゼーションへとしっかり詰めこむツールになりました。二つ以上の要素間のつながりを見せる、このような環状のビジュアライゼーションは、さっと眺めてパターンを見るには最適な手法です。

Circos

マッピング

前回の記事では、ビジュアライゼーションツールとして地図を使用するいろいろなツールを紹介しました。それらの多くは位置情報としての地図に焦点をあてていましたが、データの表現に使える地図の手法は他にもあります。これから紹介するツールは地図を使用しているものの、地図中の位置を直接あつかっているものではありません。

Open Heat Map

ヒートマップは、あるエリアである出来事がどの程度の頻度で発生しているのかを見せる地図を見事に描いてくれます。これは、気温や価格、事件の密度などの指標にも使えます。こうしたヒートマップを見せるには、十分な数学的知識と、既存の地図に独自の格子状のマップをレンダリングして追加する能力が必要です。Open Heat Map は、スプレッドシート書類を数学的に処理し、ヒートマップの格子をレンダリングするため、こうした課題をすべて取り除いてくれます。これは、最小の努力で、あなたのデータビジュアライゼーションのスキルを披露する格好の方法です。

Open Heat Map

Color Brewer

地図を使ったデータビジュアライゼーションを作成すると、最終的に配色選びの穴にはまってしまいます。最適なカラーパレットを選ぶことが難しいのには、いくつかの理由があります。みなさんは、閲覧者がどのようにデータを受容するのかをつねに想定しておく必要があります。しかし、印刷でも、白黒のデバイスでも、液晶スクリーンでも機能し、弱視や色覚異常の人でもわかる、あるいは誰もが違いを見分けられる十分なコントラストをもつ配色を正しく選ぶのは至難のわざです! Color Brewer では、あなたのプロジェクト特有のパラメータをいくつか選択することで、あらかじめ用意された基準をみたしているカラーパレットを提示してくれます。

Color Brewer

タイムライン

イベントデータをビジュアライズする最適な手法は、タイムライン上に表示することです。タイムラインを使うと、どのイベントが、いつ、どんな長さで発生したのかを特定しやすくなります。スケジュール管理から調査報道まで、イベントの記録をタイムライン上でビジュアルに見られると役立ちます。ここでは、手軽にスクロールやズームができるタイムラインを作成するツールをいくつか紹介します。

Timeline

Timeline は、MIT SIMILE プロジェクトの成果です。しばらく前から存在していて、たいへん堅牢です。JSON と XML の入力に対応していて、あらゆるタイムフォーマットから全てのイベントを書き出します。Timeline は、恐竜の歴史からスケジュール帳まで、あらゆる尺度を作成して実行できる簡単なビジュアライゼーションです。それぞれ連動していて個別にスワイプしてスクロールできる、おもしろい3段積み上げのタイムラインを作成でき、完全にカスタマイズ可能です。

Timeline

Here is Today

タイムラインは、時間上の多種多様な尺度や違いを見せるために使うこともできます。Here is Today は、つねに今日を起点とした相対的な時間をズームアウトしつづけるインタラクティブなタイムラインの好例です。シンプルに見えますが、データビジュアライゼーションデザインの良い側面をいくつか示しています。これは、閲覧者自身のペースで次に進めていけるインタラクティブなものですが、それぞれのステップでは相対的な情報だけを見せています。今日という日を、1ヶ月間のなかで位置づけ、次は1年間で、その次は1世紀間で、というように。閲覧者に全ての情報を一度に見せて圧倒させるのではなく、見る者にひとつの解釈だけを選びとらせようとしているのです。

Here is Today

Timeflow

Timeflow は、タイムベースのダイヤグラムをすばやく簡単に作ってくれます。ジャーナリストのために設計された Timeflow は、データを異なる方法でビジュアライズし隠された潮流をつかめるようにしてくれます。このプロジェクトはこの数年間更新されていませんが、試してみたい人に現在も提供されています。

Timeflow

もっと学習する

こうしたツールの先へ進むには、データビジュアライゼーションの世界の動向をつねに注目しておくことがポイントです。わたしが発見したそのための最良の方法は、未来と過去の両方を見ることです。デザインには、過去何百年ものあいだ幾度も洗練され選り抜かれてきた歴史があります。Webやさまざまなサイズの新しい機器といった新たなメディアを扱うときも、多くのデザインの基本原則はそのまま生き残ります。とはいえ、新しい研究や発見や、インターネットで失敗に終わっていることについても通じておく必要があります。ここでは、データビジュアライゼーションとデータを使ったデザインについて引き続き学習するためのすばらしい情報源をいくつか紹介します。

Data Stories

Data Stories は、インストールして毎日使うようなツールではありません。Data Stories は、この分野のすぐれた専門家が、彼らのワークフローやツール、プロジェクトについて議論するポッドキャストです。データビジュアライゼーションに本気で取り組んでいるなら、この業界の動向についていく必要があります。そのためには専門家から直接学ぶことにかなう方法はありません。

Data Stories

Data Journalism

スタンフォード大学は、データジャーナリズムの中核のひとつになりました。vis.stanfor.edu には、彼らが開発した Data Wrangler など多くのすばらしいツールがあります。さらにスタンフォード大学では、データジャーナリズムについての授業やビデオもあります。datajournalism.stanford.eduでは、オンラインでビデオを視聴でき、多くのツールや使用事例、ワークフローがどのように実世界の状況に実装されたのかを見ることができます。

[訳注]
スタンフォード大学のデータビジュアライゼーションチームは、ワシントン大学のインタラクティブデータラボへ移動しました。

Data Journalism

Teaching to See

インゲ・ドラックレイは、たいへん評価の高いデザイナーのひとりです。40年以上にわたって、彼女は今日の偉大なデザイナーたちにグラフィックデザインを教えてきました。最近、彼女は『Teaching to See』というショートフィルムを作りました。本気でデータを使ったデザインをやるのなら、座ってじっくり学んでおきましょう。

Teaching to See

習うより慣れろ

大規模データセットに入り込んでいけばいくほど、たんなるビジュアルな表示以上のものを理解しなければならなくなるでしょう。データをクリーンアップし、小さな部分へと刈り込むのに役立つツールを理解し、閲覧者が知るべきことを理解する必要があります。まずは、ここで紹介したデータのビジュアルな表現を作成するさまざまなツールを使いはじめることができます。それは、円や地図、そのほかのチャートやグラフになるでしょう。そのためには練習が必要になるので、ツールだけでなく学習の情報源についてもしっかりと紹介することにしたのです。データビジュアライゼーションに本気で取り組むなら、業界で何が起こっているのかを常に追いつづけて、カンファレンスのビデオをみて、関連するポッドキャストやインタビューを聴いて、すぐれた実践家によるデータビジュアライゼーションに関する読み物をすべて読みつづける必要があります。Eyeo Festivalのビデオは、この分野で活躍する人を視聴して学習をはじめるのに最高の場所です。

これらの多くのツールを自分自身のプロジェクトに実装するとともに、あなたの知識を共有することが重要です。データビジュアライゼーションは成長している分野なので、そのなかのどこかの部分では専門家になれるチャンスがあります。機会をみつけては、どのように結果を成し遂げて、失敗から学んだのかを他の人に解説するようにしましょう。


Brianは、ソフトウェア開発者。著書に『A Practical Guide to Designing with Data』(Five Simple Steps)。

Information is Beautiful Awards受賞作にみるデータビジュアライゼーションの秀作

ロンドンのライターでありデザイナーでもあるDavid McCandlessは、さまざまなデータビジュアライゼーションの作品集Information is Beautiful(リンク先はサイト)を出しています。

Information is Beautiful
Information is Beautiful

posted with amazlet at 13.09.02
Collins (2013-02-14)
The Visual Miscellaneum: A Colorful Guide to the World's Most Consequential Trivia
David McCandless
Harper Design
売り上げランキング: 14,129
タイトルが違うのでまぎらわしいのですが、『Visual Miscellaneum』『Information is Beautiful』(イギリス)の米国版です。内容はまったく同じなのでご注意! 日本語版は出ていません。

彼は、市場調査会社カンター(Kantar)とともに、データビジュアライゼーションのコンテストInformation is Beautiful Awardsを主催しています。

このコンテストの2012年度の受賞作にデータビジュアライゼーションの秀作がそろっていますので紹介します。

CNN Home & Away

最優秀賞(Most Beautiful)・データジャーナリズム部門金賞
制作:Stamen

cnn home and away

Home & Awayは、アフガニスタンとイラクで戦死した米国人の死亡場所と出生地をマッピングしたCNNのスペシャルコンテンツです。アフガニスタンでの死者約3600人、イラクでの死者約4800人がマッピングされています。ふたつの戦争にアメリカが払った大きな代償が見えてきます。モノクロームの地図の上に戦死者の顔写真がカラーで浮かび上がります。一人ひとりの名前をクリックすると、出生地や死亡場所、死亡の状況が記載されていて、追悼メッセージを書き込めるようになっています。

Notabilia

インタラクティブビジュアライゼーション部門金賞
制作:Moritz Stefaner, Dario Taraborelli, Giovanni Luca Ciampaglia

Notabiliaは、Wikipediaで削除依頼されたページごとの議論の過程を樹状に可視化したインタラクティブなビジュアライゼーションです。対象のページは、削除するか存続するかの議論が長く続いた100ページ分の議論の流れです。1本の枝が1ページをあらわしていて、枝の長さが議論の長さです。削除か存続かの意見表明によって、枝の色とカーブの向きが変わります。枝のかたちは、賛否が拮抗していると直線状、連続した賛否が交互にあらわれるとS字状、全員一致の場合はらせん状になります。

the deleted
こちらは、削除が決まった100ページ。

the kept
こちらは、削除されずに存続・統合・リダイレクトが決まった100ページ。

制作ツールは、FlashFlareFDT。サイトに掲載されている静的グラフは、Tableauで制作されています。 ビジュアライゼーションの入力元のデータセットは、Google Docsで公開されていて自由に使用することができます。

Information graphics in context

データビジュアライゼーション部門金賞
制作:Peter Ørntoft

Information graphics in context:難民と移民は、宗教的シンボルを身につけていることの是非に焦点をあてたグラフィックです。データはデンマーク人を対象とした調査結果です。テーマとなっている宗教的シンボルの写真と色分けしたデータを組み合わせて見せています。


イスラムのスカーフ


十字架


ヤムルカ(キッパ・ユダヤ帽)

Cover mania

インフォグラフィック/インフォデザイン部門金賞
制作:Michele Mauri

Cover maniaは、年別にカバーされた楽曲のオリジナル・バンドを示した時系列のビジュアルです。リボンの色がオリジナル・バンドをあらわし、幅がその年に発表されたカバー曲の数です。各年のリボンは曲数の多い順に上から並んでいます。全体を通じてもっともカバーされていた緑色のリボンはビートルズ。2位以下は、ボブ・ディラン、クイーン、スティーヴィー・ワンダー、ローリング・ストーンズと続いています。データソースは、サンプリング・カバー曲のデーターベースサイトのWhoSampled

Afghanistan – What is the true cost of war?

モーション・インフォグラフィック部門金賞
制作:Peter Jeffs, Tom Stevenson

Afghanistan – What is the true cost of war?は、イギリスがアフガニスタン戦争に費やしている多額の予算を見せた動画です。モノクロームの色調を背景に、アフガニスタン国旗の赤・黒・緑の3色で構成しています。元政治家で反戦団体Stop the War代表のトニー・ベンの力強いナレーションの後ろに流れている緊張感あふれる音楽は、ブライアン・イーノ。

The Antimap

ツールおよびWebサイト部門金賞
制作:Trent Brooks

Antimapは、データビジュアライゼーションのためのオープンソースのツールです。データを記録するスマートフォンアプリAntimap Logと、データ分析とビジュアライゼーションをおこなう2種のアプリ:WebアプリAntiMap SimpleとデスクトップアプリAntiMap Videoで構成されています。スノーボード、スキー、自転車、ドライブ、ジョギングなどの活動中に位置や方角、スピードなどのログをスマートフォンアプリで記録し、保存されたCSVデータを分析できます。

Antimap SimpleはHTML5/ProcessingJS、AntiMap VideoはopenFrameworksで開発されています。

参考情報

ここで紹介したのは、最優秀賞と各部門の金賞です。すべての受賞作はこちらをご覧ください。なお現在、2013年度のコンテストが作品募集中です。締切は2013年9月13日。なお応募には、エントリーフィーがかかります。

ちなみに、2012年は市場調査会社ニールセン(Nielsen)も、同社提供のデータを素材としたビジュアライゼーションのコンテストを開催していました。

データビジュアライゼーション・ツール20選

この記事はThe top 20 data visualisation toolsの原著者許諾済みの日本語訳です。
By Brian Suda on September 17, 2012
Translated by Tatsuo Sugimoto

2014年4月28日更新:オリジナル記事が以前のサイトから移転したため発生していた画像の非表示に対応しました。

わたしがもっともよくきかれる質問のひとつが、データビジュアライゼーションを始める方法についてです。このブログの先へ進むには、練習し、さらに実践し、利用できるツールを理解する必要があります。この記事では、シンプルなチャートから複雑なグラフ、地図、インフォグラフィックスまで、ビジュアライゼーションを作成するための20種類のツールを紹介しようとおもいます。ほとんどのツールは無料で利用でき、そのうちいくつかはすでにインストール済みかもしれません。

もくじ

エントリーレベルのツール

エントリーレベルでは、使いなれたツールを転用してみましょう。たとえば、Excelはビジュアライゼーションソフトだとはおもわれていませんが、驚くほど複雑な結果を得られます。もし始めたばかりなら、これらのツールを理解すべきです。もし毎日ビジュアライゼーションを扱うのなら、すぐにこの先へと進めていけますが、ほかの皆がそうできるわけではありませんので、いつもあまり扱いたくない出所[訳注:つまりエントリーレベルのツール]からのデータを扱うことになります。

1. Excel

 for example, by creating 'heat maps' like this one
Excelは、グラフィカルな柔軟さはありませんが、たとえばこのような「ヒートマップ」を作成するためのデータ探索に向いています。

セルの「ヒートマップ」から散布図まで、Excelではかなり複雑なことができます。エントリーレベルのツールとして、ちょっとしたデータ探索や組織内使用のためのビジュアライゼーション作成には向いていますが、デフォルトの色、線、スタイルのセットが限られているので、本格的な出版物やWebサイトで利用できるグラフィックを作成することは困難です。それでもExcelは、すばやくアイデアを伝えるための手段として、用意しておくべきツールです。

Excelは、商用のMicrosoft Officeの一部として提供されていますので、購入していない場合は、Googleドライブの一部であるGoogleスプレッドシートでほぼ同じことができます。Googleは自社サービスを再利用しているので、スプレッドシートはGoogle Chart APIと同じチャートを生成できます。つまり今後ツールを卒業し自分のプロジェクトでAPIを直接使用するときにそなえて、あらかじめできることを把握しておくことができます。

2. CSV/JSON

CSV(コンマ区切り値)とJSON(JavaScript Object Notation)は、ビジュアライゼーションツールではありませんが、一般的なデータフォーマットです。これらの構造と入出力の方法を理解しておきましょう。このあと紹介するすべてのツールは、入力源としていずれかまたは両方のフォーマットに対応しています。

オンラインのビジュアライゼーション

3. Google Chart API

静的画像のためのツールセットの一部が廃止されたため、現在Google Chart Toolsサイトは動的なチャートのためのツールだけを提供しています。これらは堅牢で、SVG、Canvas、VMLをサポートするすべてのブラウザ上で動作しますが、クライアントサイドで生成するという唯一の大問題があり、JavaScriptのないデバイスやオフライン利用、さまざまなフォーマットに保存するときに問題が生じます。静的画像にはこうした問題はなかったので、なくなってしまったのが残念です。

とはいえこのAPIは、棒グラフ、折れ線グラフから地図やQRコードにいたるまで、ありとあらゆることができます。Googleっぽい外観でかまわなければ、極端なカスタマイズを必要とせずに、よいビジュアライゼーションになるでしょう。出発点として、Google Chart APIは使い方を知るのに最適なツールです。

The portion for static images has been deprecated, but the Google Chart API is a good way to create dynamic visualisations
静的画像の部分が廃止されましたが、Google Chart APIは動的なビジュアライゼーションを作成するためのよい方法です。

4. Flot

Flotは、折れ線グラフと棒グラフ用のすばらしいライブラリです。FlotはCanvasをサポートするすべてのブラウザで動作します。つまりほとんどの一般的なブラウザ、および古いブラウザではCanvasをVMLとして扱う外部ライブラリを使えば動作します。FlotはjQueryライブラリなので、すでにjQueryになれていれば、グラフィックのスタイルや振る舞いをコールバックで簡単に扱えます。

Flotの素晴らしい点は、多くのコールバック関数にアクセスできるので、ユーザーのホバー、クリック、マウスアウトなどの一般的なイベント発生時に、独自のコードとスタイルを実行できることです。Flotは、ほかのグラフ作成パッケージよりもはるかに柔軟性がありますが、やや習得しづらいです。Flotは、折れ線グラフと棒グラフに限定されています。Flotはほかのライブラリほど多機能ではありませんが、一般的な仕事をしっかりこなします。

It's specialised on line and bar charts, but if you know jQuery, Flot is a powerful option
Flotは折れ線グラフと棒グラフに特化したものですが、jQueryを知っていれば強力な選択肢です。

5. Raphaël

Raphaëlもグラフ作成のすばらしいJavaScriptライブラリです。ほかのライブラリとの大きな違いは、RaphaëlがSVGとVMLの出力にしぼっていることです。これには一長一短があります。SVGはベクターフォーマットなので、どんな解像度でも美しく見えます。ただし各要素のDOMノードが作成されるため、Canvasにラスタライズされたイメージよりも遅くなります。一方で、HTMLのように各DOM要素とインタラクトできるという利点があります。

Webサイトには、Raphaëlが一般的なグラフを簡単につくれることを見せるたくさんのデモがありますが、任意のSVGにもレンダリングできるため、IllustratorInkspaceなどのベクターツールに頼らなければできないほど、とても複雑なビジュアライゼーションを作成できます。

 slower than raster-based tools, but it's capable of complex results
Raphaëlはベクターベースのグラフを作るよい手段です。ラスターベースのツールよりも遅いものの複雑な結果を得られます。

6. D3

D3 (Data-Driven Documents)は、SVGレンダリングをサポートするJavaScriptライブラリです。この例はシンプルな棒グラフと折れ線グラフを超えた、かなり複雑なボロノイ図、ツリーマップ、円形クラスター、ワードクラウドです。道具箱に用意すべきすばらしいツールですが、図書館に行くようにいつでもD3をおすすめしようとはおもいません。D3は、とても複雑なインタラクションを作るにはすばらしいです。しかし、ただできるからといって、やったほうがよいというわけではありません。シンプルでいることを心得ていることが、最適なビジュアライゼーションツールを選択する大切なポイントです。

D3 is capable of creating very complex output – but it's best saved for special cases, not everyday use
D3はとても複雑なアウトプットを作成できますが、普段使いではなく特別な機会にとっておくのに最適です。

7. Visual.ly

データビジュアライゼーションよりもインフォグラフィックを必要としている場合、それを支援する新しいツール群が登場しています。Visual.lyはそのなかでおそらく最も人気があります。そもそもインフォグラフィックデザイナーのためのオンライン市場でしたが、テンプレートを選びFacebookやTwitterアカウントに接続すると、すてきなイラストが返ってくる作成機能があります。結果は現在のところ限られていますが、良くも悪くも、有用なインスピレーションの源泉です。このサイトは、今後より多くのフォーマットに対応し、さらにおもしろいグラフィックを作成できるように発展しそうです。

Visual.ly acts both as an online marketplace and simple creation tool for infographics
Visual.lyはオンライン市場とインフォグラフィックのシンプルな作成ツールをもちあわせています。

インタラクティブなGUIコントロール

データビジュアライゼーションがインタラクティブになったら、それ自体がGUIコントロールになるでしょうか? オンラインのビジュアライゼーションが進化したように、ボタン、ドロップダウン、スライダーは、入力パラメータとデータを同時に変化する範囲制御の小さなハンドルのような、より複雑なインタフェース要素へと変化しています。コントロールとコンテンツは融合していくのです。これから紹介するツールは、この提案への可能性を探るのに役立つでしょう。

8. Crossfilter

クライアントがデータの中をかき分けていけるようにより複雑なツールを構築するとき、わたしたちはインタラクティブなGUIウィジェットの役割も兼ねたグラフやチャートを作りはじめています。JavaScriptライブラリのCrossfilterはこれら両方ができます。データを表示すると同時に、データの範囲を制限してリンクされたグラフの反応を見ることができます。

 by restricting the input range on any one chart, data is affected everywhere. This is a great tool for dashboards or other interactive tools with large volumes of data behind them
実行中のCrossfilter:任意のグラフの入力範囲を制限することで、全てのデータに影響が及びます。Crossfilterは、背後に大量のデータをかかえているダッシュボードやインタラクティブなツールに最適なツールです。

9. Tangle

Tangleでは、コンテンツとコントロールの境界がさらにあいまいになります。複雑なインタラクションや方程式を説明しようとするとき、ユーザ自身に操作感覚とデータ探索の強力な方法の両方を提供するために、入力値を微調整させ出力を見せます。JavaScriptライブラリのTangleは、まさにこれをおこなうツールセットです。変数上でドラッグすると、その数値を増減させ、関連するグラフが自動的に更新されるのを見ることができます。この結果はほとんど神秘の一歩手前です。

Tangle creates complex interactive graphics. Pulling on any one of the knobs affects data throughout all of the linked charts. This creates a real-time feedback loop, enabling you to understand complex equations in a more intuitive way
Tangleは、複雑なインタラクティブなグラフィックを作成します。任意のでっぱりを引っぱると、すべてのリンクしたグラフを通じてデータに影響をおよぼします。Tangleは、リアルタイムのフィードバックループを作りだし、より直感的な方法で複雑な方程式を理解できます。

マッピング

マッピングは、以前はウェブ上のとてもやっかいな作業でした。そこにGoogleマップが、オンライン地図の動作方法についての先入観をすっかり吹き飛ばして登場しました。その後間もなくGoogleは、開発者が自分のサイト内にマップを埋め込めるGoogle Maps APIをリリースしました。

それ以来、この市場は大いに成熟しました。自分のデータビジュアライゼーションのプロジェクトでカスタムマッピングソリューションを埋め込みたい場合、現在ではいくつかの選択肢があり、他と比べてどれを選択するべきかを知っていることが、ビジネス上の重要な判断になったのです。おそらくこれらのマップのいずれかに必要なものをすべて押し込むことはできますが、ハンマーを持ってあらゆる問題を「くぎ」として見ることのないようにおすすめします。

10. Modest Maps

Modest Mapsは小さなマッピング・ライブラリです。わずか10kBしかなく、ここであげているなかで最軽量の選択肢です。Modest Mapsは基本的な形式のみしか作れませんが、だまされていはいけません。Waxなどいくつかの拡張でこのライブラリに命を吹き込むことができます。Modest Mapsは、StamenBloomMapBoxによる制作物ですから、興味深い経歴をもっていることがわかります。

Teamed with additional libraries, such as MapBox's Wax (pictured), the tiny Modest Maps becomes a powerful tool
MapBoxのWax(図)のような追加ライブラリと合わせることで、小さなModest Mapsは強力なツールになります。

11. Leaflet

CloudMadeチームが提供するLeafletも、小さくモバイルページを作成するのに十分軽量になるように設計された小型のマッピングフレームワークです。LeafletもModest Mapsも、自分のサイトで使用するのに理想的なオープンソースのプロジェクトです。強力なコミュニティがバックアップしているので、すぐに消えてしまうことはありません。

Leaflet is a small, lightweight JavaScript library ideal for mobile-friendly projects
Leafletは、モバイルプロジェクトに理想的な小さく軽量なJavaScriptライブラリです。

12. Polymaps

Polymapsもマッピングライブラリですが、真正面からデータビジュアライゼーションのユーザをねらっています。CSSセレクタに似た、作成したマップをスタイリングするユニークなアプローチを提供しているので、知っておくとすばらしいリソースです。

Aimed more at specialist data visualisers, the Polymaps library creates image and vector-tiled maps using SVG
データビジュアライザーの専門家向けのPolymapsライブラリは、SVGを使って画像とベクターでタイル張りされたマップを作成します。

13. OpenLayers

OpenLayersは、これらのマッピングライブラリの中でおそらく最も堅牢です。ドキュメントはあまりよくなく、習得はむずかしいですが、ほかではできないことに使えます。他のライブラリが提供していない特定のツールを必要としているとき、OpenLayerがたよりになります。

It isn't easy to master, but OpenLayers is arguably the most complete, robust mapping solution discussed here
OpenLayersをマスターするのは簡単ではありませんが、ここでとりあげているなかで間違いなく最も完全で堅牢なマッピングソリューションです。

14. Kartograph

Kartographのキャッチフレーズは「マッピングの再考」で、この開発者がやっていることそのものです。私たちはいつもメルカトル図法を使っていますが、Kartographははるかに多くの選択肢をもたらします。もし世界規模のデータの作業ではなく、明確なボックスのなかにマップを配置できるなら、Kartographは他よりひときわ目立つために必要な選択肢を持っています。

Kartograph's projections breathe new life into our standard slippy maps
Kartographの投影図は、標準のとらえにくいマップに新たな命を吹きこみます。

15. CartoDB

最後に、CartoDBは知っておくべきサイトです。表形式のデータをマップと組み合わせられる容易さは群を抜いています。たとえば住所の文字列のCSVファイルを入力できて、それらは緯度経度に変換され、地図上にプロットされますが、他にも多くのユーザーがいます。5つの表までは無料で利用できます。その後は月額料金プランがあります。

CartoDB provides an unparalleled way to combine maps and tabular data to create visualisations
CartoDBは、ビジュアライゼーションを作成するためにマップと表形式のデータを結合する素晴らしい方法を提供します。

グラフ用のフォント

最近のWeb開発のトレンドのひとつに、美しいベクターアイコンを作成するため、埋め込みフォントにシンボルフォントを合成することがあります。これらのアイコンは、拡大や印刷に完全に対応していて、あたらしいRetinaデバイスにもぴったりです。FF ChartwellChartjunk等のいくつかのフォントは、グラフを表示するために特別に作られています。こうしたフォントは、すべてのブラウザでは完全にサポートされていないOpenTypeの日常的問題をかかえていますが、近い将来は検討に値するでしょう。

本格的に取り組む

データビジュアライゼーションに本格的に取り組むなら、シンプルなWebベースのウィジェットから、さらに強力なものに移行する必要があります。つまりデスクトップアプリケーションやプログラミング環境のことです。

16. Processing

Processingはインタラクティブ・ビジュアライゼーションのシンボル的存在になりました。Processingでは、Javaにコンパイルされる、より簡単なコードを書くことができます。Javaアプレットなしでより簡単にProcessingを使うWebサイトを作れたり、Objective-CへのポーティングでiOS上で使えるProcessing.jsプロジェクトもあります。Processingはデスクトップアプリケーションですが、すべてのプラットフォームで動作し、現在数年の歳を重ねていて、コミュニティによる十分なサンプルとコードがそろっています。

Processing provides a cross-platform environment for creating images, animations, and interactions
Processingは、画像、アニメーション、インタラクションを作成するためのクロスプラットフォーム環境を提供しています。

17. NodeBox

NodeBoxは、2Dグラフィックとビジュアライゼーションを作成するためのOS Xアプリケーションです。Pythonコードを知っていて理解する必要がありますが、その先にあるNodeBoxは、変数を微調整し、瞬時に結果を確認するための迅速かつ簡単な方法です。NodeBoxはProcessingに似ていますが、インタラクティビティはありません。

NodeBox is a quick, easy way for Python-savvy developers to create 2D visualisations
NodeBoxは、Python使いの開発者にとって、2Dビジュアライゼーションを作成する素早く簡単な方法です。

プロ・ツール

Excelからはじまるスペクトルの対極に位置するのが専門的なデータ分析ツールです。データ・ビジュアライゼーションに本格的に取り組んでいるなら、このうちのいくつかに熟達していないとしても意識はしておく必要があります。SPSSSASといった業界標準のツールは高額な利用料が必要なので、大規模な組織や学術機関だけが利用できます。しかしいくつかの無料の代替ソフトウェアが、強力なコミュニティとともにあります。オープンソースソフトウェアも商用ソフトに劣らぬ品質で、プラグインやサポートもすぐれています。

18. R

そのソフト専用の検索エンジンをそなえたソフトウェアが他にあるでしょうか? 統計パッケージは大規模なデータセットを解析するために使用されます。Rは非常に複雑なツールで、理解するのに時間がかかりますが、強力なコミュニティと、つぎつぎに制作されているパッケージライブラリをもっています。学習曲線は、ここでとりあげるツールのどれよりも険しい[訳注:むずかしい]もののひとつですが、このレベルに到達したいなら、使い慣れておかなくてはなりません。

A powerful free software environment for statistical computing and graphics, R is the most complex of the tools listed here
Rは統計処理とグラフィックのための強力なフリーソフトウェア環境で、ここにあげたツールのなかで最も複雑です。

19. Weka

データサイエンティストの世界に深く入るには、自らの能力をビジュアライゼーションの作成だけからデータマイニングに拡張する必要があります。Wekaは、さまざまな属性に基づき(データ探索の強力な方法である)データの分類とクラスタリングをおこなうのに適したツールです。また、簡単なプロットを生成することもできます。

A collection of machine-learning algorithms for data-mining tasks, Weka is a powerful way to explore data
Wekaはデータマイニング作業のための機械学習アルゴリズムを集積した、データ探索の強力な方法です。

20. Gephi

人びとが関連性、ソーシャルグラフ、相関関係について話しているとき、実際には、ネットワーク内の他のノードに対して、2つのノードが相対的にどう互いに関連しているかについて語っています。問題となるノードは、会社の人々や文書内の単語、サッカーの試合のパスにもなりえますが、数学も同じことです。グラフベースのビジュアライザーでありデータ管理ソフトであるGephiは、大量のデータセットを処理し美しいビジュアライゼーションを作成できるだけでなく、データをクリーンにしソートすることもできます。使用事例が限られている複雑なソフトウェアですが、この珠玉のソフトを知らない人よりも一歩前に進むことができます。

Gephi in action. Coloured regions represent clusters of data that the system is guessing are similar
実行中のGephi。着色された領域は、システムが類似していると推測したデータのクラスタを表しています。

参考サイト

  • ビジュアライゼーションのサンプルとインスピレーションのすばらしいTumblrブログ。 vizualize.tumblr.com
  • Nicholas Feltonのアニュアルリポートは現在たいへん有名ですが、彼は自分が見つけた素晴らしい作品群のTumblrブログももっています。
  • Processingを世に送りだした人物から。benfry.com/writing
  • Stamen Designはいつも興味深いプロジェクトを生み出しています。stamen.com
  • Eyeo Festivalは、データビジュアライゼーションの偉大な人物たちを集めていて、オンラインでビデオを見ることができます。

日本語ブックガイド

ビューティフルビジュアライゼーション (THEORY/IN/PRACTICE)
Julie Steele Noah Iliinsky
オライリージャパン
売り上げランキング: 74,506
ビジュアル・コンプレキシティ ―情報パターンのマッピング
マニュエル・リマ Manuel Lima
ビー・エヌ・エヌ新社
売り上げランキング: 51,393
Processingをはじめよう (Make: PROJECTS)
Casey Reas Ben Fry
オライリージャパン
売り上げランキング: 37,686
ビジュアライジング・データ ―Processingによる情報視覚化手法
Ben Fry
オライリージャパン
売り上げランキング: 81,829
Rクックブック
Rクックブック

posted with amazlet at 13.08.30
Paul Teetor
オライリージャパン
売り上げランキング: 159,468
RとRubyによるデータ解析入門
Sau Sheong Chang
オライリージャパン
売り上げランキング: 11,105