インタフェース設計論 授業ページ
4. 情報視覚化
資料
講義ページ (on Scrapbox)
参考情報いろいろ
Twitter
ハッシュタグ: #sfcid2017
個人プロジェクトをScrapbox上に作成
sfc-id2017-CNSログインアカウント
情報視覚化
大量の情報を対話的に効果的に表示
情報検索に有効
秋学期に授業あり
Visualizing Data
Processingの本だが情報視覚化の話が豊富
幅広い話題をカバー
ビジュアリゼーションのいろいろ
インフォグラフィクス
サイエンティフィックビジュアリゼーション
情報視覚化 (Information Visualization)
インフォグラフィクス
情報を奇麗に表示する技術
デザイナ的情報表示
計算機技術と直接関係無い
ニューヨーク地下鉄のビジュアライゼーション
ナポレオンのモスクワ侵攻
サイエンティフィックビジュアリゼーション
シミュレーション結果やセンシングデータを計算機で3次元表示
大昔から綿々と使われている
サイエンティフィックビジュアリゼーションの例
サイエンティフィックビジュアリゼーションの例
サイエンティフィックビジュアリゼーションの例
サイエンティフィックビジュアリゼーションの例
亜鉛原子と水素原子の結合
AVS
サイエンティフィックビジュアリゼーションの代表的ソフトウェア
情報視覚化の特徴
抽象的情報を扱う
対話的に情報発見/検索/実感
なめらかな操作
ビジュアリゼーションな人々
Stuart Card
Ben Shneiderman
Bret Victor
Mike Bostock
Edward Tufte
Stuart Card
Xerox PARC
Information Visualizationの名付け親
Ben Shneiderman
University of Maryland
高名なユーザインタフェース研究者/啓蒙家
Shneiderman氏のUI教科書
Bret Victor
Appleで働いてたUI専門家
> 目指すべきメディアとはどういうものなのか。Victor氏が挙げるのは、ハプティック、タンジブル、動的ディスプレイ、等だ。
Video: Inventing on Principle
Mike Bostock
D3の作者
d3.expressについてのmedium.comの記事
Video: Design is a search problem
Edward Tufte
美しい視覚化本を多数執筆
必要な技法
必要なもののみ表示するフィルタリング技法
全体と詳細を同時に見る方法
focus+context: 注目点と全体を同時に眺める
画面へのマッピング方法
自動レイアウト
操作しやすいインタフェース
表示技法
自動配置
3次元視覚化
ズーミング(線型/非線型)
色の濃淡/透明度
アニメーション
インタラクション技法
直接操作 (Direct Manipulation)
動的検索 (Dynamic Query)
連続的/可逆的操作
検索手法
情報視覚化の歴史
Xerox PARC、メリーランド大学などで盛んに研究
様々な手法が提案される
InfoVisコンファレンスなども
その後研究は下火に?
情報視覚化の現在
全く新しい手法は見かけない
新規参入者による再発明
デザイナ系
古臭いとか言って馬鹿にしている
健在な商売もある
銀行, バイオなど特定分野
汎用ツール商売はすべて失敗
技術トレンド
ブラウザで動かす
ネット上のデータを利用
サーバ/ブラウザ協調
サーバもブラウザもJS (Node)
データはなるべくブラウザにダウンロード
気分トレンド
基本的技法はあまり進展が無い
TreeMap、ばねモデル、...
論文になるようなアイデアは少ない
昔の研究者は引退した
飽きた?
ニッチ商売は残っている
一般人トレンド
アーティスト/Webデザイナ/マニアが参入
「プログラマの視覚化はひどい」
論文にはなりにくい
原理は自明 or 再発明
Jock Mackinleyは「それは俺が試した」といつも言ってた
一般人トレンド
ブラウザ上の視覚化が当然のようになってきた
カッコ良い視覚化システムが増えた
使える一般的システムやツールが増えた
視覚化ライブラリ
視覚化ツール
視覚化の対象
ネットワーク構造
インターネットのリンク情報
ソーシャルネット
ソーシャルフィルタリング
計算機情報
各種ログ
侵入解析
視覚化の対象
バイオ
遺伝子
タンパク質構造
マインドマップ
年表
アート
汎用テクニック
動的検索
アニメーション
3D表示
散布図
Parallel Coordinates
ばねモデル
FishEye
ズーミング
歪の利用
Treemap
HyperbolicTree
Sparklines
SOM
動的検索
検索条件を変化させるとすぐに結果を表示
アニメーション
時間とともに表示を変化させる
表現できる次元が増える
散布図 (Scatter Plot)
世界の統計を視覚化
Parallel Coordinates
FisheyeView
階層構造のある大量のデータを効果的に視覚化する手法
視点の付近はすべて表示を行ない、視点から遠いものは重要なもののみ表示する
「重要さ関数」選択により各種の視覚化が可能
Degree of Interest = A Priori Interest - Distance
ばねモデルによるレイアウト
ノード間の引力/斥力を計算してレイアウト
mixiGraph
TreeMap
階層構造を2次元平面にマッピング
縦分割/横分割を繰り返す
TreeMap
Newsmap
TreeMap + 動的検索
Hive Group
HyperbolicTree
``
Hyperbolic Space''(非ユークリッド空間)に情報を配置 遠くのものほど小さく見え、沢山表示可能
StarTreeという名前で商品化
StarTree
デモ: TreeViz
Sparklines
折れ線グラフを小さなアイコンで表示
ズーミング
Zooming User Interface @ NYU
Piccolo @ UMD
Pad
ズーミングインタフェースの先駆
平面を無限に連続的に拡大/縮小して文書等を表現
巨大な階層をなめらかにブラウジング可能
部分切り取りも可能
Video: Pad
Pad++
Padの拡張
フィルタ機能 / Overview+Detail / etc.
ツールキット化 = Piccolo
Contextual Zooming
TableLens
DateLens
TableLens
巨大な表を小さな画面で操作
必要な行/列のみ表示
スケジューラを魚眼で賢く
非線型ズーミング
エクセルのような表形式データを魚眼レンズで可視化
ズーミング+動的検索
WING
LensBar
ピテカン辞書
デモ: WING
1D/2D/3Dズーミングによる情報検索
デモ: LensBar
動的曖昧検索 + 非線型ズーミング
デモ: 学会プログラム
情報処理学会 インタラクション2014
入れ子構造で階層表示
FacetMap
データ宝石箱
Grokker
FacetMap
ファセット検索を視覚化
データ宝石箱
階層データをうまく配置
入れ子構造で大量情報を整理
自己組織化マップ (SOM)
多次元データを2次元平面にマッピング
類似データを自動的に近くに配置
関連するWebサイトとキーワードを海図のように表示する
好きな音楽アーティストに似たアーティストは誰?
株価の高低、値動きの幅を一目でわかるように可視化
ハムレットに登場する単語の関係図
納豆ビュー
属性が沢山ある複雑化なデータの視覚化
Sparklinesを利用
視覚化ベンチャー
Inxight
SAPに吸収された
HCILから立ち上げ
Spotfire
HCILから立ち上げ
SpotFire デモ @TIBCO
視覚化サービス/ツール
GraphViz @ ATT
Protovis @ Stanford
アブノーマルな出力デバイス
風車、泡、傘、円板、...
実世界指向インタフェースで重要
泡ディスプレイ
Information Parcolator
泡ディスプレイ2
六本木ヒルズのもの
傘ディスプレイ1
傘ディスプレイ2
車輪ディスプレイ
風車
Pinwheels by 石井裕
アンビエントに情報を表示
Ambient Orb
株価や天気を表示
参考資料
論文集
情報視覚化の本棚
全文が公開されている {All the contents available on the Web}
10章が情報視覚化について
幅広い話題をカバー
「Visualizing Data」
Processingの本だが情報視覚化の話が沢山