siteこのサイトは杉本達應研究室の研究・教育に関する情報を掲載しています。toolsの原著者許諾済みの日本語訳です。Sugimoto2014年4月28日更新:オリジナル記事が以前のサイトから移転したため発生していた画像の非表示に対応しました。わたしがもっともよくきかれる質問のひとつが、データビジュアライゼーションを始める方法についてです。このブログの先へ進むには、練習し、さらに実践し、利用できるツールを理解する必要があります。この記事では、シンプルなチャートから複雑なグラフ、地図、インフォグラフィックスまで、ビジュアライゼーションを作成するための20種類のツールを紹介しようとおもいます。ほとんどのツールは無料で利用でき、そのうちいくつかはすでにインストール済みかもしれません。Gephi参考サイト日本語ブックガイドエントリーレベルのツールエントリーレベルでは、使いなれたツールを転用してみましょう。Excelはビジュアライゼーションソフトだとはおもわれていませんが、驚くほど複雑な結果を得られます。始めたばかりなら、これらのツールを理解すべきです。毎日ビジュアライゼーションを扱うのなら、すぐにこの先へと進めていけますが、ほかの皆がそうできるわけではありませんので、いつもあまり扱いたくない出所[訳注:つまりエントリーレベルのツール]からのデータを扱うことになります。ExcelExcelは、グラフィカルな柔軟さはありませんが、たとえばこのような「ヒートマップ」を作成するためのデータ探索に向いています。セルの「ヒートマップ」から散布図まで、Excelではかなり複雑なことができます。エントリーレベルのツールとして、ちょっとしたデータ探索や組織内使用のためのビジュアライゼーション作成には向いていますが、デフォルトの色、線、スタイルのセットが限られているので、本格的な出版物やWebサイトで利用できるグラフィックを作成することは困難です。それでもExcelは、すばやくアイデアを伝えるための手段として、用意しておくべきツールです。Officeの一部として提供されていますので、購入していない場合は、Googleドライブの一部であるGoogleスプレッドシートでほぼ同じことができます。APIと同じチャートを生成できます。今後ツールを卒業し自分のプロジェクトでAPIを直接使用するときにそなえて、あらかじめできることを把握しておくことができます。Notation)は、ビジュアライゼーションツールではありませんが、一般的なデータフォーマットです。これらの構造と入出力の方法を理解しておきましょう。このあと紹介するすべてのツールは、入力源としていずれかまたは両方のフォーマットに対応しています。Toolsサイトは動的なチャートのためのツールだけを提供しています。これらは堅牢で、SVG、Canvas、VMLをサポートするすべてのブラウザ上で動作しますが、クライアントサイドで生成するという唯一の大問題があり、JavaScriptのないデバイスやオフライン利用、さまざまなフォーマットに保存するときに問題が生じます。静的画像にはこうした問題はなかったので、なくなってしまったのが残念です。いえこのAPIは、棒グラフ、折れ線グラフから地図やQRコードにいたるまで、ありとあらゆることができます。Googleっぽい外観でかまわなければ、極端なカスタマイズを必要とせずに、よいビジュアライゼーションになるでしょう。APIは使い方を知るのに最適なツールです。APIは動的なビジュアライゼーションを作成するためのよい方法です。FlotFlotは、折れ線グラフと棒グラフ用のすばらしいライブラリです。FlotはCanvasをサポートするすべてのブラウザで動作します。ほとんどの一般的なブラウザ、および古いブラウザではCanvasをVMLとして扱う外部ライブラリを使えば動作します。FlotはjQueryライブラリなので、すでにjQueryになれていれば、グラフィックのスタイルや振る舞いをコールバックで簡単に扱えます。Flotの素晴らしい点は、多くのコールバック関数にアクセスできるので、ユーザーのホバー、クリック、マウスアウトなどの一般的なイベント発生時に、独自のコードとスタイルを実行できることです。Flotは、ほかのグラフ作成パッケージよりもはるかに柔軟性がありますが、やや習得しづらいです。Flotは、折れ線グラフと棒グラフに限定されています。Flotはほかのライブラリほど多機能ではありませんが、一般的な仕事をしっかりこなします。Flotは折れ線グラフと棒グラフに特化したものですが、jQueryを知っていれば強力な選択肢です。RaphaëlRaphaëlもグラフ作成のすばらしいJavaScriptライブラリです。ほかのライブラリとの大きな違いは、RaphaëlがSVGとVMLの出力にしぼっていることです。これには一長一短があります。SVGはベクターフォーマットなので、どんな解像度でも美しく見えます。各要素のDOMノードが作成されるため、Canvasにラスタライズされたイメージよりも遅くなります。一方で、HTMLのように各DOM要素とインタラクトできるという利点があります。Webサイトには、Raphaëlが一般的なグラフを簡単につくれることを見せるたくさんのデモがありますが、任意のSVGにもレンダリングできるため、IllustratorやInkspaceなどのベクターツールに頼らなければできないほど、とても複雑なビジュアライゼーションを作成できます。Raphaëlはベクターベースのグラフを作るよい手段です。ラスターベースのツールよりも遅いものの複雑な結果を得られます。Documents)は、SVGレンダリングをサポートするJavaScriptライブラリです。この例はシンプルな棒グラフと折れ線グラフを超えた、かなり複雑なボロノイ図、ツリーマップ、円形クラスター、ワードクラウドです。道具箱に用意すべきすばらしいツールですが、図書館に行くようにいつでもD3をおすすめしようとはおもいません。D3は、とても複雑なインタラクションを作るにはすばらしいです。できるからといって、やったほうがよいというわけではありません。シンプルでいることを心得ていることが、最適なビジュアライゼーションツールを選択する大切なポイントです。D3はとても複雑なアウトプットを作成できますが、普段使いではなく特別な機会にとっておくのに最適です。Visual.lyデータビジュアライゼーションよりもインフォグラフィックを必要としている場合、それを支援する新しいツール群が登場しています。Visual.lyはそのなかでおそらく最も人気があります。そもそもインフォグラフィックデザイナーのためのオンライン市場でしたが、テンプレートを選びFacebookやTwitterアカウントに接続すると、すてきなイラストが返ってくる作成機能があります。結果は現在のところ限られていますが、良くも悪くも、有用なインスピレーションの源泉です。このサイトは、今後より多くのフォーマットに対応し、さらにおもしろいグラフィックを作成できるように発展しそうです。Visual.lyはオンライン市場とインフォグラフィックのシンプルな作成ツールをもちあわせています。オンラインのビジュアライゼーションが進化したように、ボタン、ドロップダウン、スライダーは、入力パラメータとデータを同時に変化する範囲制御の小さなハンドルのような、より複雑なインタフェース要素へと変化しています。コントロールとコンテンツは融合していくのです。これから紹介するツールは、この提案への可能性を探るのに役立つでしょう。Crossfilterクライアントがデータの中をかき分けていけるようにより複雑なツールを構築するとき、わたしたちはインタラクティブなGUIウィジェットの役割も兼ねたグラフやチャートを作りはじめています。JavaScriptライブラリのCrossfilterはこれら両方ができます。データを表示すると同時に、データの範囲を制限してリンクされたグラフの反応を見ることができます。実行中のCrossfilter:任意のグラフの入力範囲を制限することで、全てのデータに影響が及びます。Crossfilterは、背後に大量のデータをかかえているダッシュボードやインタラクティブなツールに最適なツールです。TangleTangleでは、コンテンツとコントロールの境界がさらにあいまいになります。複雑なインタラクションや方程式を説明しようとするとき、ユーザ自身に操作感覚とデータ探索の強力な方法の両方を提供するために、入力値を微調整させ出力を見せます。JavaScriptライブラリのTangleは、まさにこれをおこなうツールセットです。変数上でドラッグすると、その数値を増減させ、関連するグラフが自動的に更新されるのを見ることができます。この結果はほとんど神秘の一歩手前です。Tangleは、複雑なインタラクティブなグラフィックを作成します。任意のでっぱりを引っぱると、すべてのリンクしたグラフを通じてデータに影響をおよぼします。Tangleは、リアルタイムのフィードバックループを作りだし、より直感的な方法で複雑な方程式を理解できます。マッピングマッピングは、以前はウェブ上のとてもやっかいな作業でした。そこにGoogleマップが、オンライン地図の動作方法についての先入観をすっかり吹き飛ばして登場しました。APIをリリースしました。それ以来、この市場は大いに成熟しました。自分のデータビジュアライゼーションのプロジェクトでカスタムマッピングソリューションを埋め込みたい場合、現在ではいくつかの選択肢があり、他と比べてどれを選択するべきかを知っていることが、ビジネス上の重要な判断になったのです。これらのマップのいずれかに必要なものをすべて押し込むことはできますが、ハンマーを持ってあらゆる問題を「くぎ」として見ることのないようにおすすめします。Mapsは小さなマッピング・ライブラリです。10kBしかなく、ここであげているなかで最軽量の選択肢です。Mapsは基本的な形式のみしか作れませんが、だまされていはいけません。Waxなどいくつかの拡張でこのライブラリに命を吹き込むことができます。Mapsは、Stamen、Bloom、MapBoxによる制作物ですから、興味深い経歴をもっていることがわかります。Mapsは強力なツールになります。LeafletCloudMadeチームが提供するLeafletも、小さくモバイルページを作成するのに十分軽量になるように設計された小型のマッピングフレームワークです。Mapsも、自分のサイトで使用するのに理想的なオープンソースのプロジェクトです。強力なコミュニティがバックアップしているので、すぐに消えてしまうことはありません。Leafletは、モバイルプロジェクトに理想的な小さく軽量なJavaScriptライブラリです。PolymapsPolymapsもマッピングライブラリですが、真正面からデータビジュアライゼーションのユーザをねらっています。CSSセレクタに似た、作成したマップをスタイリングするユニークなアプローチを提供しているので、知っておくとすばらしいリソースです。データビジュアライザーの専門家向けのPolymapsライブラリは、SVGを使って画像とベクターでタイル張りされたマップを作成します。OpenLayersOpenLayersは、これらのマッピングライブラリの中でおそらく最も堅牢です。ドキュメントはあまりよくなく、習得はむずかしいですが、ほかではできないことに使えます。他のライブラリが提供していない特定のツールを必要としているとき、OpenLayerがたよりになります。OpenLayersをマスターするのは簡単ではありませんが、ここでとりあげているなかで間違いなく最も完全で堅牢なマッピングソリューションです。KartographKartographのキャッチフレーズは「マッピングの再考」で、この開発者がやっていることそのものです。私たちはいつもメルカトル図法を使っていますが、Kartographははるかに多くの選択肢をもたらします。世界規模のデータの作業ではなく、明確なボックスのなかにマップを配置できるなら、Kartographは他よりひときわ目立つために必要な選択肢を持っています。Kartographの投影図は、標準のとらえにくいマップに新たな命を吹きこみます。CartoDB最後に、CartoDBは知っておくべきサイトです。表形式のデータをマップと組み合わせられる容易さは群を抜いています。住所の文字列のCSVファイルを入力できて、それらは緯度経度に変換され、地図上にプロットされますが、他にも多くのユーザーがいます。5つの表までは無料で利用できます。その後は月額料金プランがあります。CartoDBは、ビジュアライゼーションを作成するためにマップと表形式のデータを結合する素晴らしい方法を提供します。グラフ用のフォント最近のWeb開発のトレンドのひとつに、美しいベクターアイコンを作成するため、埋め込みフォントにシンボルフォントを合成することがあります。これらのアイコンは、拡大や印刷に完全に対応していて、あたらしいRetinaデバイスにもぴったりです。ChartwellやChartjunk等のいくつかのフォントは、グラフを表示するために特別に作られています。したフォントは、すべてのブラウザでは完全にサポートされていないOpenTypeの日常的問題をかかえていますが、近い将来は検討に値するでしょう。本格的に取り組むデータビジュアライゼーションに本格的に取り組むなら、シンプルなWebベースのウィジェットから、さらに強力なものに移行する必要があります。デスクトップアプリケーションやプログラミング環境のことです。ProcessingProcessingはインタラクティブ・ビジュアライゼーションのシンボル的存在になりました。Processingでは、Javaにコンパイルされる、より簡単なコードを書くことができます。Javaアプレットなしでより簡単にProcessingを使うWebサイトを作れたり、Objective-CへのポーティングでiOS上で使えるProcessing.jsプロジェクトもあります。Processingはデスクトップアプリケーションですが、すべてのプラットフォームで動作し、現在数年の歳を重ねていて、コミュニティによる十分なサンプルとコードがそろっています。Processingは、画像、アニメーション、インタラクションを作成するためのクロスプラットフォーム環境を提供しています。Xアプリケーションです。Pythonコードを知っていて理解する必要がありますが、その先にあるNodeBoxは、変数を微調整し、瞬時に結果を確認するための迅速かつ簡単な方法です。NodeBoxはProcessingに似ていますが、インタラクティビティはありません。NodeBoxは、Python使いの開発者にとって、2Dビジュアライゼーションを作成する素早く簡単な方法です。プロ・ツールExcelからはじまるスペクトルの対極に位置するのが専門的なデータ分析ツールです。データ・ビジュアライゼーションに本格的に取り組んでいるなら、このうちのいくつかに熟達していないとしても意識はしておく必要があります。SPSSやSASといった業界標準のツールは高額な利用料が必要なので、大規模な組織や学術機関だけが利用できます。いくつかの無料の代替ソフトウェアが、強力なコミュニティとともにあります。オープンソースソフトウェアも商用ソフトに劣らぬ品質で、プラグインやサポートもすぐれています。統計パッケージは大規模なデータセットを解析するために使用されます。Rは非常に複雑なツールで、理解するのに時間がかかりますが、強力なコミュニティと、つぎつぎに制作されているパッケージライブラリをもっています。学習曲線は、ここでとりあげるツールのどれよりも険しい[訳注:むずかしい]もののひとつですが、このレベルに到達したいなら、使い慣れておかなくてはなりません。Rは統計処理とグラフィックのための強力なフリーソフトウェア環境で、ここにあげたツールのなかで最も複雑です。Wekaデータサイエンティストの世界に深く入るには、自らの能力をビジュアライゼーションの作成だけからデータマイニングに拡張する必要があります。Wekaは、さまざまな属性に基づき(データ探索の強力な方法である)データの分類とクラスタリングをおこなうのに適したツールです。簡単なプロットを生成することもできます。Wekaはデータマイニング作業のための機械学習アルゴリズムを集積した、データ探索の強力な方法です。Gephi人びとが関連性、ソーシャルグラフ、相関関係について話しているとき、実際には、ネットワーク内の他のノードに対して、2つのノードが相対的にどう互いに関連しているかについて語っています。問題となるノードは、会社の人々や文書内の単語、サッカーの試合のパスにもなりえますが、数学も同じことです。グラフベースのビジュアライザーでありデータ管理ソフトであるGephiは、大量のデータセットを処理し美しいビジュアライゼーションを作成できるだけでなく、データをクリーンにしソートすることもできます。使用事例が限られている複雑なソフトウェアですが、この珠玉のソフトを知らない人よりも一歩前に進むことができます。着色された領域は、システムが類似していると推測したデータのクラスタを表しています。参考サイトビジュアライゼーションのサンプルとインスピレーションのすばらしいTumblrブログ。Feltonのアニュアルリポートは現在たいへん有名ですが、彼は自分が見つけた素晴らしい作品群のTumblrブログももっています。Processingを世に送りだした人物から。Designはいつも興味深いプロジェクトを生み出しています。Festivalは、データビジュアライゼーションの偉大な人物たちを集めていて、オンラインでビデオを見ることができます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress%d人のブロガーが「いいね」をつけました。