4. 情報視覚化

資料

参考情報いろいろ

Twitter

個人プロジェクトをScrapbox上に作成

sfc-id2019-CNSログインアカウント

情報視覚化

情報検索に有効

秋学期に授業あり

https://www.amazon.co.jp/dp/4339028835 https://gyazo.com/f7bb7c5bbf19e4040f63c762d8bfe493

Visualizing Data

Processingの本だが情報視覚化の話が豊富

http://gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png

幅広い話題をカバー

http://gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

ビジュアリゼーションのいろいろ

インフォグラフィクス

サイエンティフィックビジュアリゼーション

情報視覚化 (Information Visualization)

インフォグラフィクス

情報を奇麗に表示する技術

デザイナ的情報表示

計算機技術と直接関係無い

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

http://gyazo.com/3e9d348ee49815ab8d462ee2254d921d.png

ナポレオンのモスクワ侵攻

http://gyazo.com/19e5355ce8962b40eb9d7ebccc96dc46.png

甲府盆地の河川の治水 (山梨県立博物館)

矢印プロット

http://masui.org.s3.amazonaws.com/9/0/90c2da873c356ae9d0d8bba1afc87309.jpg

http://masui.org.s3.amazonaws.com/1/4/14418368b7824c5ef782f3d37fbb0dcb.jpg

サイエンティフィックビジュアリゼーション

シミュレーション結果やセンシングデータを計算機で3次元表示

大昔から綿々と使われている

サイエンティフィックビジュアリゼーションの例

http://gyazo.com/456260ff7c9681525f41b2dc209ca6fb.png

サイエンティフィックビジュアリゼーションの例

http://gyazo.com/d8a770c4cd912fb8523ab2a0be0d0462.png

サイエンティフィックビジュアリゼーションの例

http://gyazo.com/aa1d5e522d2cdfe2cabc7abff629731a.png

サイエンティフィックビジュアリゼーションの例

亜鉛原子と水素原子の結合

http://gyazo.com/1ae719bf0c4eb8607f1cb9b385dbad92.png

AVS

サイエンティフィックビジュアリゼーションの代表的ソフトウェア

http://gyazo.com/efcda5f12538b36633541455aa4ea0b4.png

情報視覚化の特徴

抽象的情報を扱う

対話的に情報発見/検索/実感

なめらかな操作

ビジュアリゼーションな人々

Stuart Card

Ben Shneiderman

Bret Victor

Mike Bostock

Edward Tufte

Stuart Card

Xerox PARC

Information Visualizationの名付け親

http://gyazo.com/7466a651e0d3c76f35977e860761ca7f.png

Ben Shneiderman

University of Maryland

高名なユーザインタフェース研究者/啓蒙家

https://gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png

Shneiderman氏のUI教科書

http://hondana.org/%E5%A2%97%E4%BA%95/0321537351 https://gyazo.com/a9d600e21b1814d54f2305be49ce90cc.png

Bret Victor

http://worrydream.com/ http://gyazo.com/ea6852f9ce886a7d0e36a994f4ee19d9.png

目指すべきメディアとはどういうものなのか。Victor氏が挙げるのは、ハプティック、タンジブル、動的ディスプレイ、等だ。

http://gyazo.com/f7f730a1813d0f20158922f9e5bd45d3.png

Video: Inventing on Principle

https://vimeo.com/36579366

Mike Bostock

D3の作者

https://gyazo.com/f72348e5c77e7e3f484b6537137d4c1e.png

http://bost.ocks.org/mike/ https://gyazo.com/85fc16b5a762626de3bd8e1379f7a342.png

d3.expressについてのmedium.comの記事

https://gyazo.com/635115f74b5a979a69565150df727730

Video: Design is a search problem

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

Edward Tufte

美しい視覚化本を多数執筆

https://gyazo.com/2e2f7b2aee1b7f558ee29bfa2a9fe9f8

必要な技法

必要なもののみ表示するフィルタリング技法

全体と詳細を同時に見る方法

focus+context: 注目点と全体を同時に眺める

画面へのマッピング方法

自動レイアウト

操作しやすいインタフェース

表示技法

自動配置

3次元視覚化

ズーミング(線型/非線型)

色の濃淡/透明度

アニメーション

インタラクション技法

直接操作 (Direct Manipulation)

動的検索 (Dynamic Query)

連続的/可逆的操作

検索手法

情報視覚化の歴史

Xerox PARC、メリーランド大学などで盛んに研究

様々な手法が提案される

InfoVisコンファレンスなども

その後研究は下火に?

情報視覚化の現在

全く新しい手法は見かけない

新規参入者による再発明

デザイナ系

古臭いとか言って馬鹿にしている

健在な商売もある

銀行, バイオなど特定分野

汎用ツール商売はすべて失敗

技術トレンド

ブラウザで動かす

ネット上のデータを利用

サーバ/ブラウザ協調

サーバもブラウザもJS (Node)

データはなるべくブラウザにダウンロード

気分トレンド

基本的技法はあまり進展が無い

TreeMap、ばねモデル、...

論文になるようなアイデアは少ない

昔の研究者は引退した

飽きた?

ニッチ商売は残っている

一般人トレンド

アーティスト/Webデザイナ/マニアが参入

「プログラマの視覚化はひどい」

論文にはなりにくい

原理は自明 or 再発明

Jock Mackinleyは「それは俺が試した」といつも言ってた

一般人トレンド

ブラウザ上の視覚化が当然のようになってきた

カッコ良い視覚化システムが増えた

使える一般的システムやツールが増えた

視覚化ライブラリ

視覚化ツール

http://www3.nhk.or.jp/news/akiya/js/chart.js https://gyazo.com/efaf1a2923f27e9dde7802a86d5272bf.png

視覚化の対象

ネットワーク構造

インターネットのリンク情報

ソーシャルネット

ソーシャルフィルタリング

計算機情報

各種ログ

侵入解析

視覚化の対象

バイオ

遺伝子

タンパク質構造

マインドマップ

年表

アート

汎用テクニック

動的検索

アニメーション

3D表示

散布図

Parallel Coordinates

ばねモデル

FishEye

ズーミング

歪の利用

Treemap

HyperbolicTree

Sparklines

SOM

動的検索

検索条件を変化させるとすぐに結果を表示

アニメーション

時間とともに表示を変化させる

表現できる次元が増える

散布図 (Scatter Plot)

http://gyazo.com/5224cb354be1e97d6d44b06eed5f2441.png

世界の統計を視覚化

http://gyazo.com/26dc8c48f8b97a83499d7a632845cf6c.png

Factfulness

https://gyazo.com/41738488e59d6fb5e456702eebcd9392

Parallel Coordinates

http://gyazo.com/e532c2c617c9a7344b68a75fa57fb5cc.png

FisheyeView

階層構造のある大量のデータを効果的に視覚化する手法

視点の付近はすべて表示を行ない、視点から遠いものは重要なもののみ表示する

「重要さ関数」選択により各種の視覚化が可能

Degree of Interest = A Priori Interest - Distance

ばねモデルによるレイアウト

ノード間の引力/斥力を計算してレイアウト

mixiGraph

http://gyazo.com/fa8f657c3d131d7514ba14e3b3cff85e.png

TreeMap

階層構造を2次元平面にマッピング

縦分割/横分割を繰り返す

http://gyazo.com/fa6230caf2187871465007f290065c60.png

TreeMap

http://gyazo.com/6259f2f613b9fe7d8c95b1b9f2a168f6.png

http://gyazo.com/e70d2ce986cb2495d1e0625191c05862.png

Newsmap

http://gyazo.com/d5d08abf825731f073c7e67b8a47a971.png

TreeMap + 動的検索

Hive Group

HyperbolicTree

遠くのものほど小さく見え、沢山表示可能

StarTreeという名前で商品化

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

StarTree

http://gyazo.com/44d2bb4fc83ac5825a3495359239297d.png

デモ: TreeViz

Sparklines

折れ線グラフを小さなアイコンで表示

http://gyazo.com/756419809b28a762c5f9b0f84f1b8b8b.png

ズーミング

Pad

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

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

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

部分切り取りも可能

http://gyazo.com/6d93c16b1ddce8efd644888bfdcde5e7.png

Video: Pad

Pad++

Padの拡張

フィルタ機能 / Overview+Detail / etc.

http://gyazo.com/100a2da596557e5a0b8f10cbddf3c012.png

Contextual Zooming

TableLens

DateLens

TableLens

巨大な表を小さな画面で操作

必要な行/列のみ表示

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

スケジューラを魚眼で賢く

http://gyazo.com/6bce7b7992e193b2d65b010858bcdf74.png

非線型ズーミング

エクセルのような表形式データを魚眼レンズで可視化

http://gyazo.com/813fa7fb66f2807858e0160d66559405.png

ズーミング+動的検索

WING

LensBar

ピテカン辞書

デモ: WING

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

http://gyazo.com/d44943c8f574a2da409443844eff601c.png

デモ: LensBar

動的曖昧検索 + 非線型ズーミング

http://gyazo.com/a4fb5e88b525dec70e7c8f4e0e18ed4a.png

デモ: 学会プログラム

情報処理学会 インタラクション2014

入れ子構造で階層表示

FacetMap

データ宝石箱

Grokker

FacetMap

http://gyazo.com/6c53d7cb537058b00bdb8ad0cbc90e82.png

データ宝石箱

階層データをうまく配置

http://gyazo.com/994a19028b8ad8b561686ee67d06a094.png

http://gyazo.com/9cae3dc2b693554c55c7fca2ab7ad962.png

入れ子構造で大量情報を整理

http://gyazo.com/e96de27c90d9c8cc91f637e7a6227d8b.png

自己組織化マップ (SOM)

多次元データを2次元平面にマッピング

類似データを自動的に近くに配置

http://gyazo.com/ded10daa58face833aed448d287922b0.png

http://gyazo.com/b13fc253d24d7ffb579deaba71f20486.png

関連するＷｅｂサイトとキーワードを海図のように表示する

http://gyazo.com/e237efc0c3e88d03f00348a305866d33.png

好きな音楽アーティストに似たアーティストは誰？

http://gyazo.com/0c00cd4ab0195413838a5833fabdf1f0.png

株価の高低、値動きの幅を一目でわかるように可視化

http://gyazo.com/4be861f7952800433058425190618092.png

ハムレットに登場する単語の関係図

http://gyazo.com/b5e6d1d75a05e904a4cde4ffe5604a3a.png

http://gyazo.com/5b446276ede34af0610cb92f73e79e6e.png

納豆ビュー

http://gyazo.com/2178f0eb35b7a9b5b8aa9c31f6d1fa4f.png

属性が沢山ある複雑化なデータの視覚化

Sparklinesを利用

http://gyazo.com/21f14e81c0d0212d362a5041f7d47040.png

視覚化ベンチャー

Inxight

HCILから立ち上げ

Spotfire

HCILから立ち上げ

視覚化サービス/ツール

視覚化プログラミングの要件

無料 or 安価

どこでも動く

導入が簡単

プログラミングが楽

作成結果の公開が楽

望ましい点

簡単にプログラムできること

表現力があること

様々な環境で利用できること

Windows, Mac, Linux, Chromebook, ...

ブラウザで動くこと

Chrome, Safari, Firefox, ...

ブラウザで動かせるシステム

table:描画システム

簡単さ 表現力 標準 Web オープン 将来性

Processing ◎ ◯ ◯ ◯ ◯ △

P5.js ◯ ◯ ◯ ◎ ◯ ◯

Flash △ ◯ ◯ ◯ △ ×

Java △ ◯ ◯ ◎ ◯ ×

JS+Canvas △ ◯ ◯ ◎ ◯ ◯

JS+SVG △ ◯ ◯ ◯ ◯ ◯

HTML ◯ × ◎ ◎ ◯ ×

ScrapboxからP5.js利用

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

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

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

泡ディスプレイ

Information Parcolator

https://Gyazo.com/ca0bcbff3bbdd3e8fcc6f32f4ed5e5d8.png

泡ディスプレイ2

六本木ヒルズのもの

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

https://Gyazo.com/9204ffa8d20a95fb5b1f23fa9485802d.png

傘ディスプレイ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

https://Gyazo.com/5fb19688158b90844f07770f69a5544f.png

風車

Pinwheels by 石井裕

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

https://Gyazo.com/beac28ea40a5c2e0094325a0c1868c1d.png

Ambient Orb

株価や天気を表示

https://Gyazo.com/fe68d7fcec7687f6c0fac8be20467c6c.png

参考資料

論文集

情報視覚化の本棚

http://gyazo.com/bb92d74a06e9df356a5f6ae1bd60b860.png

http://gyazo.com/688a73ec88e95bb61c9f61af4bdb555e.png

http://gyazo.com/2e90b6bf8e764d88e12ba66680e5c885.png

http://gyazo.com/e5294839c0dcd270950cbf061a21e8f2.png

全文が公開されている {All the contents available on the Web}

http://gyazo.com/d1d51dfff4bc4608c498c4ee4c7d6586.png

幅広い話題をカバー

http://gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

「Visualizing Data」

Processingの本だが情報視覚化の話が沢山

http://gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png

https://gyazo.com/9d9b7421e48936f09ab9b270ae6ea48e.png

伊藤貴之氏@お茶大 の新刊

https://www.amazon.co.jp/dp/4339028835 https://gyazo.com/f7bb7c5bbf19e4040f63c762d8bfe493