6. Webと情報視覚化 2016/11/14
講義資料
オープンデータとマッシュアップで変わる世界 (2010/2)
https://www.youtube.com/watch?v=3YcZ3Zqk0a8
https://gyazo.com/e0589f4de254389c4d3e586c12642037.png
世界の統計アニメーション 2006/2
https://www.youtube.com/watch?v=hVimVzgtD6w
https://gyazo.com/a004a1decb4fa9c74f25c5ef6e3485ab.png
情報視覚化とは
大量の情報を対話的に効果的に表示
情報検索に有効
Webで最も重要な技術のひとつ
https://gyazo.com/bc02d8bff39dd36a70c9460a852b00d0.png
Visualizing Data
Processingの本だが情報視覚化の話が豊富
https://gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png
2011/10発売
幅広い話題をカバー
https://gyazo.com/027dca09083cb76869c874bcdcb01dd9.png
Interactive Data Visualization for the Web
D3.jsの使い方
2014/2発売
https://gyazo.com/563b14f7205952c36764ce137431beef.png
情報視覚化の特徴
抽象的情報を扱う
視覚化手法が自由
対話的に情報発見/検索/実感
なめらかな操作
c.f. インフォグラフィックス
情報を静的にわかりやすく表示
ワシントンDCの地下鉄
https://gyazo.com/a4cd2131656e64f8d335b21555030a77.png
ニューヨーク地下鉄のビジュアライゼーション
https://gyazo.com/3e9d348ee49815ab8d462ee2254d921d.png
ナポレオンのモスクワ侵攻
Charles Minard による
https://gyazo.com/19e5355ce8962b40eb9d7ebccc96dc46.png
軍勢の大きさ、位置、向き、温度を視覚化
色、太さ、座標、時間、向きなどを利用
http://pinterest.com/masui/visualization-ideas/ https://gyazo.com/4ca4d39016d53e3916eebbabd6a1dd67.png
情報視覚化に必要な技法
必要なもののみ表示するフィルタリング技法
全体と詳細を同時に見る方法
focus+context: 注目点と全体を同時に眺める
画面へのマッピング方法
自動レイアウト
操作しやすいインタフェース
表示技法
自動配置
3次元視覚化
ズーミング(線型/非線型)
色の濃淡/透明度
アニメーション
インタラクション技法
直接操作 (Direct Manipulation)
動的検索 (Dynamic Query)
連続的/可逆的操作
検索手法
情報視覚化の歴史
Xerox PARC、メリーランド大学、Georgia Techなどで盛んに研究
高価なワークステーション利用
様々な手法が提案
InfoVisコンファレンスなども
その後下火に?
情報視覚化の現在
全く新しい手法は見かけない
状況を知らない人達が参入して再発明したり
デザイナ系
古臭いとか言って馬鹿にしている
まだ頑張ってる奴もいる
銀行 / バイオ
金がある特定分野
汎用ツール商売はすべて失敗
最近のトレンド
ブラウザで動かす
Canvas+JavaScript
SVG+JavaScript
各種のライブラリ (D3, etc.)
ネット上のビッグデータ利用
マッシュアップ
サーバ/ブラウザ協調
気分トレンド
基本的技法はあまり進展が無い
TreeMap、ばねモデル、...
論文になるようなアイデアは少ないとか
昔の研究者は引退した
飽きた?
ニッチ商売は残っている
一般人トレンド
アーティスト/Webデザイナ/マニアが参入
カッコ良いWebページ
「プログラマの視覚化はひどい」 (Marcos Weskamp氏)
論文にはなりにくい
原理は自明 or 再発明
Jock Mackinleyは「それは俺が試した」といつも言ってた
一般人トレンド
視覚化システムをはじめて見るユーザが増えた
カッコ良い視覚化システムが増えた
使える一般的システムやツールが増えた
視覚化ライブラリ
視覚化ツール
Webのおかげで視覚化システムが再ブレイク中
視覚化の対象
ネットワーク構造
インターネットのリンク情報
ソーシャルネット
ソーシャルフィルタリング
計算機情報
各種ログ
侵入解析
視覚化の対象
バイオ
遺伝子
タンパク質構造
マインドマップ
年表
アート
地図
「Visualizing Data」
Processingの本だが情報視覚化の話が沢山
https://gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png
内容
折線グラフ、散布図などの伝統的描画手法
古典的視覚化手法の実装
ネットからデータを取得するハック
古典的グラフ描画手法
円グラフ、折線グラフ
散布図
Parallel Coordinates
Parallel Sets
散布図
Scatter Plot
https://gyazo.com/5224cb354be1e97d6d44b06eed5f2441.png
Parallel Coordinates
X座標で属性を表現
https://gyazo.com/e532c2c617c9a7344b68a75fa57fb5cc.png
Parallel Coordinates
https://gyazo.com/720129635d12c2602d1990fdc96ce417.png
ParallAX software
https://gyazo.com/449fbc02de153745dad937ad5b2ecaaa.png
Prof. Alfred Inselberg
at Ochanomizu University (2015)
https://gyazo.com/34228bfdf7167bf8e0387063aa0194aa.png
EYE-CANDY
https://gyazo.com/46d10c6e9b4e3bed7a85a7ebca409c5e.png
Mapping between map and graph
Selecting lines => area highlighted
Video: Parallel Coordinates
https://www.youtube.com/watch?v=cv_g2OB73EU
https://gyazo.com/4f0137f0af484ea56379e4db50a41bfa.png
汎用テクニック
アニメーション、パラメタ変更、動的検索
次元をひとつ増やすことができる
3次元利用
PerspectiveWallとか
ばねモデル
FishEye
ズーミング
コンテクストズーミング
TableLensとか
歪の利用
Treemap
HyperbolicTree
Sparklines
階層表示 / 入れ子表示
SOM
動的検索
アニメーション
次元が増える
世界の統計を視覚化
https://i.gyazo.com/26dc8c48f8b97a83499d7a632845cf6c.png
FisheyeView
階層構造のある大量のデータを効果的に視覚化する手法
視点の付近はすべて表示を行ない、視点から遠いものは重要なもののみ表示する
「重要さ関数」選択により各種の視覚化が可能
Degree of Interest = A Priori Interest - Distance
ばねモデルによるレイアウト
ノード間の引力/斥力を計算してレイアウト
mixiGraph
https://gyazo.com/fa8f657c3d131d7514ba14e3b3cff85e.png
TreeMap
階層構造を2次元平面にマッピング
縦分割/横分割を繰り返す
https://gyazo.com/fa6230caf2187871465007f290065c60.png
TreeMap
https://gyazo.com/6259f2f613b9fe7d8c95b1b9f2a168f6.png
https://gyazo.com/e70d2ce986cb2495d1e0625191c05862.png
Newsmap
https://i.gyazo.com/d5d08abf825731f073c7e67b8a47a971.png
TreeMap + 動的検索
Hive Group
ビデオ: Treemapなど
Ben Shneiderman
36:00あたりにTreemap
https://www.youtube.com/watch?v=r1pKvDdLxVM
Sunburst
階層情報を同心円で表現
最近増えてきた
https://gyazo.com/8f1355578798a4a6685c9bb5cf4bbaf4.png
ビデオ: Sunburst
https://www.youtube.com/watch?v=rv5T-_apX74
HyperbolicTree
「Hyperbolic Space」 (非ユークリッド空間)に情報を配置
遠くのものほど小さく見え、沢山表示可能
StarTreeという名前で商品化
ビデオ: HyperbolicTree
http://www.youtube.com/watch?v=pwpze3RF55o
StarTree
https://gyazo.com/44d2bb4fc83ac5825a3495359239297d.png
https://gyazo.com/bd222d90e5ed3b076db9afbf2552d7e2.png
Sparklines
折れ線グラフを小さなアイコンで表示
https://gyazo.com/ca164fc8c6a0ef90e15d6b7011a2f62c.png
ズーミング
Pad
ズーミングインタフェースの先駆
平面を無限に連続的に拡大/縮小して文書等を表現
巨大な階層をなめらかにブラウジング可能
部分切り取りも可能
https://gyazo.com/6d93c16b1ddce8efd644888bfdcde5e7.png
Pad++
Padの拡張
フィルタ機能 / Overview+Detail / etc.
https://gyazo.com/100a2da596557e5a0b8f10cbddf3c012.png
ビデオ: Pad++
https://www.youtube.com/watch?v=68lP1gRLmZw
Contextual Zooming
TableLens
DateLens
TableLens
巨大な表を小さな画面で操作
必要な行/列のみ表示
ビデオ: TableLens
http://www.youtube.com/watch?v=qWqTrRAC52U
スケジューラを魚眼で賢く
https://gyazo.com/6bce7b7992e193b2d65b010858bcdf74.png
非線型ズーミング
エクセルのような表形式データを魚眼レンズで可視化
https://gyazo.com/813fa7fb66f2807858e0160d66559405.png
ズーミング+動的検索
WING
LensBar
ピテカン辞書
デモ: WING
1D/2D/3Dズーミングによる情報検索
https://gyazo.com/d44943c8f574a2da409443844eff601c.png
デモ: LensBar
動的曖昧検索 + 非線型ズーミング
https://gyazo.com/a4fb5e88b525dec70e7c8f4e0e18ed4a.png
入れ子構造で階層表示
FacetMap
データ宝石箱
Grokker
FacetMap
https://gyazo.com/6c53d7cb537058b00bdb8ad0cbc90e82.png
データ宝石箱
階層データをうまく配置
https://gyazo.com/994a19028b8ad8b561686ee67d06a094.png
https://gyazo.com/9cae3dc2b693554c55c7fca2ab7ad962.png
入れ子構造で大量情報を整理
https://i.gyazo.com/e96de27c90d9c8cc91f637e7a6227d8b.png
自己組織化マップ
多次元データを2次元平面にマッピング
類似データを自動的に近くに配置
https://gyazo.com/ded10daa58face833aed448d287922b0.png
https://gyazo.com/b13fc253d24d7ffb579deaba71f20486.png
ブログ空間を3次元視覚化
https://gyazo.com/77820a7a884d5363ab16adffd6655f5f.png
属性が沢山ある複雑化なデータの視覚化
Sparklinesを利用
https://gyazo.com/21f14e81c0d0212d362a5041f7d47040.png
視覚化システム会社
いろいろ出たがすべて消滅?
Inxight
HCILから立ち上げ
Spotfire
視覚化サービス/ツール
AT&Tの視覚化ツール
「DOT記法」で表現したネットワーク構造を視覚化
Ben Shneidermanのネットワーク情報視覚化ツール
ネットワーク分析と視覚化を統合
https://gyazo.com/027041ae81033b7de033394195b10f59.png
ビデオ: SocialAction
http://vimeo.com/7308004
https://gyazo.com/e48af851cee63cdd5a7d46b01a9a0bb0.png
バイオ研究のネットワーク視覚化ツール
cyto == 「細胞」
一般的なネットワーク視覚化に利用可能
JavaScriptの視覚化ライブラリ
DOMデータをベースにSVG描画
https://gyazo.com/de8d809e2d27f77f76300a6d854fb322.png
Treemap, Sunburstなど各種
https://gyazo.com/78195b75ea63a1f901f4986d35e40be8.png
https://gyazo.com/8abce282d17e4875f6f389b4cf2abd91.png
ビデオ: D3本
https://www.youtube.com/watch?v=yECYJbTwlWk
デモ: D3によるお絵書きツール
code:d3.js
1,3,5,7,9,8,7,6,5,6,7,8,9,10
...
$('.line').sparkline();
表示されるSparkline
https://gyazo.com/54620ef5792f56d57bcaef3429b70b45.png
ブラウザでOpenGLを利用
JavaScriptでCanvasに描画
WebGLを使った3Dライブラリ
https://gyazo.com/4afc96a4a5fbd15fd610f97636dbd740.png
情報ソース
まとめ
視覚化が必要なデータが大量に存在
JavaScriptの視覚化ツールが急増
Webのおかげで視覚化システムが再ブレイク中