2. 情報視覚化の基礎技術

情報視覚化の基礎技術

増井俊之

慶應義塾大学 環境情報学部

masui@pitecan.com

2017年10月5日

情報視覚化の技術要素

静的視覚化要素

動的視覚化要素

視覚化装置

静的視覚化要素

情報を美しく表現する

雑誌、パンフレット、ポスターなどの技法と同じ

「情報デザイン」「インフォグラフィック」

多数の技法/文献 (e.g. Tufte本)

https://Gyazo.com/2e90b6bf8e764d88e12ba66680e5c885.png

https://Gyazo.com/e5294839c0dcd270950cbf061a21e8f2.png

https://Gyazo.com/bb92d74a06e9df356a5f6ae1bd60b860.png

インフォグラフィックの例

ワシントンDCの地下鉄

https://Gyazo.com/a4cd2131656e64f8d335b21555030a77.png

インフォグラフィックの例

ニューヨーク地下鉄のビジュアライゼーション

https://Gyazo.com/3e9d348ee49815ab8d462ee2254d921d.png

インフォグラフィックの例

縦書きの有効利用

https://Gyazo.com/1eb3337bfc6b05a949b3aef1e4d8a1a7.png

インフォグラフィックの例

ナポレオンのロシア行軍解説 by Charles Minard

軍勢の大きさ、位置、向き、温度を視覚化

色、太さ、座標、向きなどを利用

https://Gyazo.com/426c6184fd14709d0b2716762c87db29.png

静的視覚化要素

座標

図形の大きさ、太さ、長さ

図形の形、色

テクスチャ、透明度

テキストの大きさ、フォント

歪み、デフォルメ

画像

座標

位置の表現

時間の表現

数値の表現

属性の表現

座標による時間表現

ほとんどの場合時間はX座標で表現

「グラフ」でググると大抵これが出る

https://Gyazo.com/0418c841a6c71d644e6d85d44b82005a.png

鉄道ダイヤ

https://Gyazo.com/570e61142f312f4f732378cb0a2c923a.png

座標による時間表現

稀にY座標で表現することもある

https://Gyazo.com/e1476bdbfb089513b288366103891ea2.png

座標による位置表現

地図や形状をそのまま利用

https://Gyazo.com/d2ccb925984cbc3eb5cc710fdd658c39.png

座標による数値の表現

様々なグラフ

散布図の例

https://Gyazo.com/985bf069df2f509614f29305077d43a9.png

座標による属性の表現

https://Gyazo.com/98660f4be49b3ed3294bb87a35a1777b.png

座標による属性の表現

Parallel Sets

https://Gyazo.com/4f0137f0af484ea56379e4db50a41bfa.png

一般的な属性の表現

色、形、テクスチャなどを利用

強調

目立つ色、太いフォント、大きな図形

欧米人はイタリックを強調と感じる

日本人は漢字を強調と感じるかも

表現のメリハリ

重要でない部分は小さく表示

プリティプリンティング

https://gyazo.com/79d9633187374e06fc33141d78d4725c.png

色の利用の注意

色盲だと区別が難しい場合がある

https://Gyazo.com/50ed42b55880c82227ab981235dd5222.png

浅田氏@KMDが開発

色を対話的に変換

https://Gyazo.com/6ca789accc7ac4fd6790f86e7ab2c9ba.png

色の利用の注意

色で数値を表現するのは難しい

https://Gyazo.com/1e4abf74d7aa9ce523ad65ac889949bd.png

テクスチャ利用

色よりもわかりやすい場合がある

古さなどの属性を表現可能

情報の古さをテクスチャで表現

http://pitecan.com/Enzan/ https://Gyazo.com/c7d37199ab3cf8cbfe52b9bce50e63d5.png

https://Gyazo.com/6b1cc45a176dc572422b91da0519019a.png

古いページへのリンクはぼやける

https://Gyazo.com/1529ed75aa3fcc9b06680c9cfb65846c.png

廃れるページ

https://gyazo.com/b28c99231c1f291b434aa72682d64f06.png

古いページが古く見えるブラウザ拡張機能

画像の活用

意味が無い画像でも格好良くなる

https://Gyazo.com/38a553c4943af70a73caa1f3d46eb469.png

画像による印象づけ

https://Gyazo.com/a26f31d8f2c460f25325f8c3ac2a8ef9.png

プレゼンテーションへの活用

Presentation Zen

http://hondana.org/%E5%A2%97%E4%BA%95/4894713284 https://Gyazo.com/b1250adb6504626aca1b3b2817427f46.png

http://www.slideshare.net/garr/sample-slides-by-garr-reynolds https://Gyazo.com/33e5d50d593fac3df0db9adf3a53d062.png

動的視覚化要素

対話手法

ズーミング

フィルタリング

アニメーション

大きな情報を見る方法

歪み表示

3次元表示

ズーミング操作

アニメーション

歪み表示の例

https://www.youtube.com/watch?v=pwpze3RF55o

https://i.Gyazo.com/031ecbe3d8afed0d00338b871ce6bf4b.png

3次元表示

遠くの情報を小さく表示

https://Gyazo.com/2c0685ec8ef28aa41c72e886479e2512.png

3次元表示の注意

複雑な3次元視覚化は失敗する

操作が難しい

理解が難しい

ズーミング

Google Mapsなど

Zooming UI (ZUI)

対話的にズーミングを行なう

画面に入りきらない情報を表示可能

Pad

ズーミングインタフェースの先駆

平面を無限に連続的に拡大/縮小して文書等を表現

巨大な階層をなめらかにブラウジング可能

http://masui.org/386e0f22c8e89ecf82c5abbd5e1b642d.gif

Video: Pad

Pad++

http://www.youtube.com/watch?v=62KcJ09k7cE

https://Gyazo.com/b9c665f3b396467f5e0f7b1f28bdfa3b.png

ズーミングインタフェースの注意

成功例はほとんど無い

何も無い砂漠に迷い込むことがある

ズーミング操作は浸透していない

アニメーション

動きの視覚化

より多くの情報を見せるのにも利用

http://masui.org/f85b2a06cba162f16c12fdeb15e068e5.gif

http://graphs.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=6;ti=1880$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=phAwcNAVuyj2tPLxKvvnNPA;by=ind$inc_s;uniValue=8.21;iid=phAwcNAVuyj0XOoBL_n5tAQ;by=ind$inc_c;uniValue=255;gid=CATID0;by=grp$map_x;scale=log;dataMin=194;dataMax=96846$map_y;scale=lin;dataMin=23;dataMax=86$map_s;sma=49;smi=2.65$cd;bd=0$inds= https://Gyazo.com/6c2a3141c27ad22b91f02c11b3e702ec.png

http://livedoor.2.blogimg.jp/coodoo/imgs/9/7/977bf38b.gif

http://livedoor.2.blogimg.jp/coodoo/imgs/9/1/91df1f8d.gif

フィルタリング

検索条件を指定して表示量を制御

キーワードを指定

数値を指定

デモ: WING

1D/2D/3Dズーミングによる情報検索

選択によるフィルタリング

https://Gyazo.com/d44943c8f574a2da409443844eff601c.png

動的視覚化の注意

なめらかな遷移が重要

連続的 / 可逆的

Change Blindnessなどの落とし穴

急激な変化があると気付かない

注目点以外に気付かない

Change Blidness

「アハ体験」?

画面の変化に気付きにくい場合がある

http://www.youtube.com/watch?v=1DnfJdvcLgQ

https://Gyazo.com/ae07d8b55b500108524b052bd6362a95.png

Change Blidnessの例

http://www.youtube.com/watch?v=nDQYdU5p0KY https://Gyazo.com/252f14de3f878dab17387d26aadaaba2.png

http://www.youtube.com/watch?v=voAntzB7EwE https://Gyazo.com/8f2932261361ee8ef4e183221a58247a.png

Change Blindness

https://gyazz-clone.herokuapp.com/prog-exercises/Change%20Blindness https://gyazo.com/efb6866f7f17a35bf40861f2f1faf288.png

GUIはすべてイリュージョン

手品のテクニックが有効

積極的に騙されるとよい

手品的な表示

http://masui.org/733b578a0cbf0953ee35d6dcef15568d.gif

「仮現運動」と呼ばれる

針の動きが連続的に見える

ふたつの画像を表示しているだけ

動きの理解

人間は動きや流れを理解するのが難しい

e.g. どのレジが速いかわからない

エスカレータ問題

片側を空けると効率が悪く渋滞しやすい

歩ける場所があると速いと勘違い

http://www.pitecan.com/Puzzle/escalator/ https://gyazo.com/e452501e0980d430a851c41e7bbe68a2.gif

入出力デバイス

表示デバイス

計算機ディスプレイが主流

入力デバイス

キーボード、マウスが主流

アブノーマルな出力デバイス

風車、泡、傘、円板、...

実世界指向インタフェースで重要

泡ディスプレイ

Information Parcolator

https://Gyazo.com/ca0bcbff3bbdd3e8fcc6f32f4ed5e5d8.png

泡ディスプレイ2

六本木ヒルズのもの

http://www.youtube.com/watch?v=L2v0IgD9bo4

傘ディスプレイ1

https://Gyazo.com/083936a88763b062a2efb830b9369651.png

https://Gyazo.com/e6ba4e951917dd465a09dcdeb68e6c1a.png

傘ディスプレイ2

http://farm1.static.flickr.com/97/252986258_9c00b43cfd.jpg

車輪ディスプレイ

http://www.youtube.com/watch?v=mT13ZcpwYtA

風車

Pinwheels by 石井裕

アンビエントに情報を表示

https://Gyazo.com/beac28ea40a5c2e0094325a0c1868c1d.png

Ambient Orb

株価や天気を表示

https://Gyazo.com/fe68d7fcec7687f6c0fac8be20467c6c.png

まとめ

静的な表示手法

対話的手法

各種の表示要素と装置