データ・ビジュアライゼーション の現況と実際

第47回HTML5とか勉強会（データビジュアライゼーション） 2014/04/18 (金) 19:30 - 21:30

http://html5j.doorkeeper.jp/events/10518

データ・ビジュアライゼーション?

インフォメーション・グラフィックと データ・ビジュアライゼーション

• 人が手作業かグラフィックアプリケーションで描いている。

• 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選ばれる。

• そのため、別のデータを使用して再作成するのが容易ではない。

• 表示についてのルールとその例外ルールについて、作者以外の外部から、すべてを推測することが難しい。

• 参照したデータとの関連性の証明が難しい。

• インタラクションがないものが多い。

インフォメーション・グラフィック

http://elections.nytimes.com/2012/results/president

データ・ビジュアライゼーション• あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによって描画されること。

• その描画によってデータセットを眺めているだけではわからない傾向や特徴が明らかになっていること。

• アルゴリズムはコーディングによって定義され、チャートやグラフとして発達してきた表示形式を用い、形式知化／可視化されていること。

• ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果がすぐ得られること。

• 利用しているデータセットが可視化されていること。

http://visualizing.jp/infograph_vs_dataviz/

今起こっていること

1. Open Data 2. Creative Coding 3. Visualization Practitioner

オープン・データ

クリエイティブ・コーディング

ビジュアライズの実務者

1. Open Data オープン・データ

経緯と流れ

2004年～ UK 2009年～ USA 2012年～ 日本

オープン・ガバメント

オープンガバメント シンポジウムWiredカンファレンス 2013東京大学公共政策大学院

http://wired.jp/conference2013/ http://www.pp.u-tokyo.ac.jp/events/2013-11-19/

オープンデータとは

利用できる、そしてアクセスできる データ全体を丸ごと使えないといけないし、再作成に必要以上のコストがかかってはいけない。望ましいのは、インターネット経由でダウンロードできるようにすることだ。また、データは使いやすく変更可能な形式で存在しなければならない。 !

再利用と再配布ができる データを提供するにあたって、再利用や再配布を許可しなければならない。また、他のデータセットと組み合わせて使うことも許可しなければならない。 !

誰でも使える 誰もが利用、再利用、再配布をできなければならない。データの使い道、人種、所属団体などによる差別をしてはいけない。たとえば「非営利目的での利用に限る」などという制限をすると商用での利用を制限してしまうし「教育目的での利用に限る」などの制限も許されない。

http://opendatahandbook.org/ja/what-is-open-data/index.html

http://opendefinition.org/od/japanese/

「オープンデータが使えることで恩恵を受けることができる団体や組織も多い。もちろん政府自身だってそのひとつだ。しかしその一方、その恩恵を将来どこでどんなふうに得られるかを正確に予測するのは不可能だ。イノベーションというものは、たいてい予期せぬところから生まれるものなのだから。」

社会をよくするために

「各種データの新たな組み合わせは新しい知識や知見をもたらす可能性があ」る 「手つかずの可能性を解き放てるだろう。」

http://opendatahandbook.org/ja/why-open-data/index.html

メディアやNPOによるオープンデータの活用

データ・ジャーナリズム／社会学的アプローチ

2. Creative Coding クリエイティブ・コーディング

MIT Media Lab / Ben Fry & Casey Reas

Processing (Java)

Parsons The New School for Design / Zach Lieberman, Theo Watson & Arturo Castro

openFrameworks (C++ & C#)

the Stanford University’s Stanford Visualization Group / Mike Bostock

D3.js (JavaScript & SVG)

Visualization Toolkits

Ben Fry Mike Bostock

Visualization Toolkits Makers

Casey Reas

Zach Lieberman Theo Watson Arturo Castro

3. Visualization Practitioner ビジュアライズの実務者

d3 アンカンファレンス @ GitHub本社

d3 アンカンファレンス @ GitHub本社

可視化のための実際のコードを 書く人たちが求められている

• パーソナルコンピュータ、モバイルデバイスの劇的な価格低下と高性能化

• 第二次ブラウザ戦争の遺産としての非常に高速化されたJavaScriptエンジンとCanvasをはじめとするHTML5関連テクノロジー

• クライアント関連テクノロジーのブラウザへの集約 • 各種デバイスから生み出される凄まじい量のデータ • それらを扱うためのオープンソースツール群の発展 • そしてそれらを利用したいスタートアップや大手企業の可視化分野への関心

http://visualizing.jp/d3-unconf-2014-1/

by Keiichiro Onoさん

http://visualizing.jp/d3-unconf-2014-2/

データをビジュアライズ

1.抽象化して理解する

データそのものから特徴や性質を掴むことが困難

特徴を理解できる 他のものと組み合わせられる

2.「なるほど！」と思って共感する

なるほど！

理解から共感へ

料理にも似ている

食材の 下ごしらえ 調 理

食材としてのデータ、料理方法としてのビジュアライズ

Data

データはどこにある？

• 各国のデータカタログサイト • 国際機関（国連、世銀）のデータサイト • Wikipedia • SNS • 各種ウェブサイト • 専門家に聞く • 書籍 etc…

「データは街に溢れている」http://portal.nifty.com/2007/08/01/a/

自分のアクティビティ・データは実は意外とオープンデータではない

Quantified Self

アクティビティ・データ・サービスにおけるTwitter

人間ドッグのデータ・XMLファイルで提供してくれる病院がある。

データのクレンジング

データのクレンジング

•コラムごとのデータ形式の変換

•データ形式が間違っているものを検出（数値のコラムに文字列など

•データの重複を探し出す

•表記揺れの解消

•エラー値の検出と処理

•空白の検出と処理

http://openrefine.org/

Visualize

ヴィジュアライズ＝ものの見方

ギリシャ…熊 日本…柄杓中国…雲の上に座っている王朝

北斗七星

視点のある場所によって、 見える景色が変わる 杉浦康平 - 時間軸変形地図

Objective vs Subjective

• データヴィジュアライゼーションは可視化されたデータに基づくものなのだが、それでも主観的な考えは入ってくる。

• 主観的な考えを完璧に排除することは難しいが、多面的な視座を提供することで、解釈する余地や幅を持たせてあげることが肝要。

Workflow

「ビジュアライジング・データ」によるワークフロー

• 手軽で強力なプログラミング環境「Processing」を用いた情報視覚化技術についての解説書。

• 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列データなど、さまざまなデータの収集・解析手法から対話的な視覚化手法・プログラミングテクニックまでを豊富な実例を用いて詳しく解説している。（出版元サイトより）

http://www.oreilly.co.jp/books/9784873113784/

「Data Journalism Handbook」によるワークフロー

• ロンドンで開かれた MozFest 2011での48時間ワークショップの集大成

• BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、ニューヨークタイムズ、ワシントンポスト、テキサストリビューンなどが参加。

• データ・ジャーナリズムの知識共有や実例集。

http://datajournalismhandbook.org/

ワークフロー

正規化

正規化

• １回正規化されたデータは、様々な表示スタイルに利用可能。 • 異なるデータを同様に扱うことができる。 • プログラムが生成する値との親和性 • 正規化と補間は、正比例で入出力がなされるべきとは限らない。

正規化する理由

Transitions

• ユーザーに変化を見失わせない。 • 五感に訴えかける。

ポイント

ある属性の値を一定の時間で変化させること。

　属性＝座標値、大きさ、色、透明度…

http://easings.net/ja iOS6でのspotlightへのスワイプがわかりやすい例

ビジュアル・アプリケーション

問題の定義 データ型 次元 データ構造 インタラクションの型

伝達 探索 確認

定量的 順序 カテゴリー

一変量 二変量 三変量 多変量

線形 時間的 空間的 階層 ネットワーク

静的 転換可能 操作

「情報を見える形にする技術」Riccardo Mazza著

データ構造によるチャート分類

visualizing.jp

変数の種類が多いデータセットを 2Dのディスプレイ上へどう表現すればよいか？1

2

3

4

解決法 その1

同じグラフをそのまま増やす

解決法 その2

散布図にすごくがんばってもらう(1)

GapMinder 4変量属性を表現http://www.gapminder.org/

解決法 その3

散布図にすごくがんばってもらう(2)

解決法 その4

いくつものグラフを組み合わせて ひとつのデータセットを表現する

http://nickqizhu.github.io/dc.js/vc/index.html

dc.js

解決法 その4

新しい手法を使う

- 平行座標(Parallel Coordinates) - 平行セット(Parallel Set) - レーダーチャート(Radar chart) - チャーノフの顔(Chernoff face)

平行座標(Parallel Coordinates)平行に配置した任意の数の軸で幾何学空間を定義。定量／順序／カテゴリーで使える。

https://sensortower.com/visualizing-the-ios-app-store

平行セット(Parallel Set)平行座標に近いが、カテゴリーデータに特化した表現方法

https://www.jasondavies.com/parallel-sets/

レーダーチャート(Radar chart)複数の定量的なデータを一見して比較できる。

http://nbremer.blogspot.jp/2013/09/making-d3-radar-chart-look-bit-better.html

チャーノフの顔(Chernoff face)複数の定量的なデータを顔の表情にプロットしたもの。

http://flowingdata.com/2010/08/31/how-to-visualize-data-with-cartoonish-faces/

ネットワークと階層

Visual Complexity The Book of Trees

http://cytoscape.org/

https://github.com/keiono/d3-layout-sample

技術選定

SVG or Canvas or WebGL?

Big Dataのビジュアライゼーションを ブラウザー上でリアルタイムに実現するためのフレームワーク

http://superconductor.github.io/superconductor/

http://raw.densitydesign.org/

http://raw.visualizing.jp/#/

http://www.mathworks.co.jp/products/statistics/

Wrap Up

データ・ジャーナリズム

DPC調査データ

世界価値観調査

この世にし 楽しくあらば来む世には 虫に鳥にも我れはなりなむ !

大伴旅人

http://www.tachibana-akira.com/2012/05/4292

日本人の極端な世俗性として仏教哲学者の中村元さんが指摘

地域の課題を テクノロジーを活用して解決する 市民参加型のコミュニティ運営

「パターン・ランゲージ」建築における