狠狠撸

狠狠撸Share a Scribd company logo
今时のビジュアライゼーション

       増井俊之
  慶應義塾大学 環境情報学部
    masui@pitecan.com
     http://pitecan.com/

       2012年7月3日
自己紹介

シャープ、ソニー、産総研などに勤務
  ケータイの予測変換(POBox)などを開発
2008秋まで米国Appleに勤務
  フリック入力などを開発
ユーザインタフェースの研究開発
各種Webサービス運用中
論文、雑誌記事、Web記事多数
未踏ユースプロジェクトマネージャ
画像は重要

MosaicでWebがブレイクした
画像や背景があったから
画像が無ければWebは使われない
Beautiful Visualization
ビジュアリゼーションのいろいろ

インフォグラフィクス
サイエンティフィックビジュアリゼーション
情報視覚化 (Information Visualization)
インフォグラフィクス

情報をポスターのように美しく表示する
計算機技術と直接関係無い
ニューヨーク地下鉄のビジュアライゼーション
ナポレオンのモスクワ侵攻
インフォグラフィックの例

伊勢参宮名所図会
縦書きの有効利用
サイエンティフィックビジュアリゼーション

シミュレーション結果やセンシングデータを計算機で3次元表
示
大昔から綿々と使われている
サイエンティフィックビジュアリゼーションの
          例
サイエンティフィックビジュアリゼーションの
          例
サイエンティフィックビジュアリゼーションの
          例
サイエンティフィックビジュアリゼーションの
          例

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

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

「Information Visualization」
(大きな)データをわかりやすく表示する技術
実世界のものと対応関係が無い
情報視覚化の特徴

形が無い情報を扱う
 ファイルシステム、ネットワーク構造、...
視覚化手法が任意
対話的に情報発見/検索/実感
なめらかな操作
eyeo Festival
視覚化の流行の理由

PCの高速化
データが増えた
ブラウザの描画対応
  Canvas標準化
オーソドックスな手法の普及
  Treemap
  力学モデル
視覚化の流行の理由

ツールが増えた
 GraphViz
 Processing
 Canvas+JavaScript
 GoogleMaps
 SocialAction
 Cytoscape
视覚化の基本
何のために情報視覚化を行なうか

情報検索
データマイニング
プログラミング
デバッグ
アート
何となく?
視覚化の対象

ネットワーク構造
 インターネットのリンク情報
 ソーシャルネット
 ソーシャルフィルタリング
計算機情報
 ファイルシステム
 各種ログ
 ネットトラフィック
視覚化の対象

バイオ情報
 遺伝子
 タンパク質構造
マインドマップ
技術動向
年表
アート
視覚化対象

巨大なもの
 Web全体
小さいもの
 Sparkline
情報視覚化の手法

フィルタリング技法
画面へのマッピング手法
インタラクション手法
フィルタリング技法

条件とのマッチング
拡大/縮小
重要度計算
画面へのマッピング手法

表現形式
 形、色、テクスチャ、..
レイアウト
歪表示
アニメーション
インタラクション手法

移動/拡大/縮小
動的フィルタリング
直接操作
情報視覚化の歴史

XeroxPARC、メリーランド大学などで盛んに研究(80年代)
様々な手法が提案される
InfoVisコンファレンスなども
その後研究は下火に
Ben Shneiderman
Stuart Card
情報視覚化の現在

画期的な新手法を見かけない
新規参入者による再発明
 デザイナ系
 古臭いとか言って馬鹿にしている
健在な商売もある
 銀行,バイオなど特定分野
 汎用ツール商売はすべて失敗
技術トレンド

パソコンの高速グラフィクス
ブラウザ技術
 JavaScript, HTML5
ネット上の大規模データ
視覚化ライブラリ
 描画ライブラリ
 レイアウトライブラリ
統計処理システム
気分トレンド

基本的技法はあまり進展が無い
 TreeMap、ばねモデル、...
 論文になるようなアイデアは少ない
昔の研究者は引退した
 飽きた?
 AaronMarcusの記事の感想
ニッチ商売は残っている
一般トレンド

アーティスト/Webデザイナ/マニアが参入
 中村勇吾
 EduardoSciammarella
 長谷川踏太
 MarcosWeskamp
   「プログラマの視覚化はひどい」
論文にはなりにくい
 原理は自明 or 再発明
一般トレンド

視覚化システムをはじめて見るユーザが増えた
カッコ良い視覚化システムが増えた
使える一般的システムやツールが増えた
 視覚化ライブラリ
 視覚化ツール
今後のトレンド

一般人が参入してはじめて実用化がはじまる
 e.g.VisiCalc,Web,
研究が廃れた後でブレイクするものも多い
 テキスト検索、AR、etc.
実例紹介

TreeMap
HyperbolicTree
LensBar
WING
Gyazz
Treemap

階層構造を2次元平面にマッピング
大きなに応じて縦分割/横分割を繰り返す
SequoiaView
Disk Inventory X
Newsmap
HyperbolicTree
ポアンカレ円板
无限の表现
TreeVis
デモ: LensBar

動的曖昧検索+非線型ズーミング
Web版
デモ: WING

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

お手軽Wiki
関連画像を並べて表示
最近の流行

JavaScriptの視覚化ツール
Processing
GoogleMapsの利用
平行座標
Sparkline
GapMinder
SocialAction
JavaScriptによる描画

Canvasの利用
  ブラウザ画面に直接描く
jQueryのライブラリ多数
d3 (Data-Driven Documents)
Processing

Ben Fryの開発したお手軽言語
Javaのサブセット
情報視覚化に特に有用
Processing
「Visualizing Data」

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

簡単なズーミングインタフェースが手軽に実現
Book's Marking
Zoomii

書棚をズーミング
Sparkline

のようなグラフを埋め込む
Parallel Coordinate (平行座標)

X座標で属性を表現
Parallel Sets
Gapminder

Hans RoslingのTEDトーク
アニメーション付き散布図
SocialAction

統計アルゴリズムと視覚化の併用
ビジュアライゼーションの落とし穴
発見があるか?

実は新しい情報を得られることは少ない
想定内の情報を確認できるだけ
ソーシャルネットワーク視覚化

だから何?
民主党/共和党上院议员の投票倾向
わかった気になる

メンタルモデルと近い表示を選ぶ
木構造もフォルダ表示も同じなのだが
e.g. SpySee

間違った人間関係を理解したつもりになるかも
错覚
乱数による点描画

パタンがいろいろ見られる
误差分散法によるグレースケール
相関

相関と因果
本当の相関が見えないことがある
ベンフォード則みたいなものはわからない

フラクタルとエセフラクタルとか
レイアウトの難しさ

綺麗に/わかりやすく/レイアウトは難しい
綺麗だとかわかりやすいとかいう評価を計算できないから
評価関数があればなんとかなるのだが
ばねモデルだと皆同じになってしまう
例: 三角形の中の適当な位置に別の点を配置

なんらかの評価関数の最適化によりその点の位置が定まるよ
うにしたい
础笔+叠笔+颁笔を最小化
础笔镑2+叠笔镑2+颁笔镑2を最小化
「チャートジャンク」
「チャートジャンク」
チャートジャンク

役にたつという説もあるが一般的には有害
アニメーションの功罪

情報の伝達においてアニメーションは他の方式と比べて速度
も正確さも劣る
発表と探索は異なる
このようなグラフの方が発見は簡単だったりする
色覚

東京アメッシュ
傾向

工夫が少ないものが流行する
カッコ良いものがウケるが理解を深めるとは限らない
参考资料
情报视覚化の本棚
Readings in Information Visualization
Envisioning Information
Beautiful Evidence
Search User Interface

全文が公開されている
10章が情報視覚化について
「Visualizing Data」

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

幅広い話題をカバー
ビジュアル?コンプレキシティ !情報パターン
        のマッピング

美しい視覚化が沢山載ってる
Visual.ly
Good.is/infographics

美しいインフォグラフィクス

More Related Content

ビジュアライゼーションの役割と鲍滨开発のイノベーション(1)