6. Webと情報視覚化
郊外住宅地の見えない空き家
http://www3.nhk.or.jp/news/akiya/ http://gyazo.com/5bed14053463cb734b174c0902dd257d.png
オープンデータとマッシュアップで変わる世界 (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
FACTFULNESS
https://gyazo.com/d7cd16478eff52b68cc6f099ac3b40ae
https://gyazo.com/a013db28805c37837c4d26d906a54bb6 https://www.tableau.com/ja-jp#hero-video
Salesforceが157億ドルで買収 (2019/6)
情報視覚化とは
大量の情報を対話的に効果的に表示
情報検索に有効
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、ばねモデル、...
論文になるようなアイデアは少ないとか
昔の研究者は引退した
飽きた?
視覚化会社
最近好調?
Tableau
TIBCO Spotfire
デザイナ的トレンド
アーティスト/Webデザイナ/マニアが参入
カッコ良いWebページ
「プログラマの視覚化はひどい」 (Marcos Weskamp)
論文にはなりにくい
原理は自明 or 再発明
Jock Mackinleyは「それは俺が試した」といつも言ってた
Joc Mackinley
https://gyazo.com/3e9863465ca13de7b5ce5dd19a2b2b11
Xerox PARC => Tableau
一般人トレンド
視覚化システムをはじめて見るユーザが増えた
カッコ良い視覚化システムが増えた
使える一般的システムやツールが増えた
視覚化ライブラリ
視覚化ツール
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
http://masui.org.s3.amazonaws.com/2/8/28a311cb0f7c39b2e317e27fd0c1f942.mp4
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
Xerox PARCからのスタートアップ
HCILから立ち上げ
HCILにいたChristopherが作った会社を2007に買収
https://www.youtube.com/watch?v=WZm0Hr4yzLg
https://www.youtube.com/watch?v=2jM0xHDNnnE
Video: AlphaSlider (2:50)
http://masui.org.s3.amazonaws.com/0/7/07b3b2494947579b6044f2e35b3696ca.mp4
https://gyazo.com/a013db28805c37837c4d26d906a54bb6 https://www.tableau.com/ja-jp#hero-video
Salesforceが157億ドルで買収 (2019/6)
視覚化サービス/ツール
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のおかげで視覚化システムが再ブレイク中