6. 様々なデータのビジュアライゼーション
増井俊之
慶應義塾大学 環境情報学部
masui@pitecan.com
2017年11月1日
レポート課題1: 階層データ視覚化
TreeMapなどを利用して階層データを視覚化する
https://gyazo.com/b8023bc4426a31f2b45e07708d93378e.png
視覚化されるデータ
ファイルのサイズ
予算
国家予算
家計簿
面白いデータを視覚化したものを評価します
あらゆるリストは階層データに変換可能
例: 国家予算の視覚化
https://gyazo.com/df597f3f71e3cd4303cfac7adce0e2a1.png
レポート課題2: ネットワークデータ視覚化
有向グラフまたは無向グラフ
手書きしたものと比較
https://gyazo.com/c98655de5802c6dc6589f2628394e35d.png
データに関する注意
独自のデータを使う
自分のファイルシステム
自分の友達関係
自分で捜したデータ
本当のデータを使う
適当にでっち上げない
最低20件のデータを含むこと
Direct manipulation vs Information agent
http://masui.org/631bc9260d664c7a389a898b4eaad3ee.pdf https://gyazo.com/362c2c02e7daef9ef05e2e9657908520
Shneiderman vs Maes
階層/ネットワーク以外のデータ
表データ
時系列変化
相関関係
多次元属性
表データの視覚化
Excelのデータなど
X軸, Y軸は何でもよい
相関情報
タイムライン
PerspectiveWall
長いリストを曲がった壁に貼りつける
視点から遠いものは自然に小さく/近いものは大きく表示される
http://masui.org/dbd6789eb9d669c471a83552c101b02e.gif
ビデオ: PerspectiveWall
https://www.youtube.com/watch?v=hYUZbrWtCZg
表の非線型ズーミング
TableLens
DateLens
FiCell
TableLens
巨大な表を小さな画面で操作
必要な行/列のみ表示
数字表示/棒グラフ表示
Video: TableLens
https://www.youtube.com/watch?v=qWqTrRAC52U
カレンダを非線型ズーミング
https://gyazo.com/de1f0ef32627802b3e555f5f5cbea9ac.png
Video: DateLens
https://www.youtube.com/watch?v=CwZs0SuN8lM
表形式データを魚眼レンズで可視化
https://gyazo.com/813fa7fb66f2807858e0160d66559405.png
FilmFinder
映画データの様々な属性を視覚化
動的検索によるリアルタイムフィルタリング
AlphaSlider(微調整可能なスライダ)で検索条件を微調整
http://masui.org/9cc8f3a3c537d01efd8bbdaf9a78aa21.gif
Video: FilmFinder
TileBar
キーワードの文書内分布をタイル状に表示
http://masui.org/19518d9fc81d91a7cdd2c2a44ffbcbce.gif
属性が沢山ある複雑化なデータの視覚化
Sparklineを利用
https://gyazo.com/21f14e81c0d0212d362a5041f7d47040.png
時系列の視覚化
一番単純なグラフ
https://gyazo.com/0a04b12cdb7915cf5794b0bc397810f0.png
「グラフ」でググった結果
http://www.stat.go.jp/naruhodo/img/c1/c1graph/img_01c.jpg
Y軸を時間に割り当てた例
https://gyazo.com/8baf8b82a1e7a51db6d250c7da63f91e.png
Sparkline
折れ線グラフを小さなアイコンで表示
https://gyazo.com/756419809b28a762c5f9b0f84f1b8b8b.png
https://gyazo.com/5e7366abfc71853eb3904cfe8cf3d317.png
LifeLines
少年非行履歴の視覚化
http://masui.org/0e238c5693fc9f04f09be9fef8c67cc4.gif
見えログ
ネットワークログの視覚化
https://gyazo.com/da09eac3bfe7230b460fb7c433280dcf.png
Wikipediaの変更履歴などを視覚化
http://masui.org.s3.amazonaws.com/2/4/248b7f2692553e0474280f1c51bbd378.png
「Abortion」の編集履歴
https://gyazo.com/47ba75aff16d3e1f511bf40da93dfb3e.png
SeeSoft
プログラムの視覚化ツール群
http://masui.org/31164d1dc490ccc68827bf6dd30fe2ff.gif
http://masui.org/e302c5ea1380447b58495bfe25710c5d.png
https://gyazo.com/e04d8f9eb8d1dba6849c87724e0f4b2a.png
Visualizing Empires Decline
アニメーションで時系列を表現
http://masui.org/77f6086ad6338de2ef15dd16f8bda00a.png
ナイチンゲールの視覚化
角度で時系列を表現
https://gyazo.com/58cf7b2762c167f5651500466f80f064.png
その他の視覚化いろいろ
ドーナツグラフ
散布図
レーダーチャート
等高線グラフ
Parallel Coordinates
ヒートマップ
古さの視覚化
Exelのグラフの種類
縦棒グラフ
横棒グラフ
折れ線グラフ
円グラフ
散布図
面グラフ
ドーナツ グラフ
レーダー チャート
等高線グラフ
バブル チャート
株価チャート
円柱グラフ、円錐グラフ、ピラミッド グラフ
ドーナツグラフ
https://gyazo.com/8570e4549b6e8bcb0c8567cbf85f574b.png
等高線グラフ
Excelで描いたもの
https://gyazo.com/496fcf5783f6aa5946f2ecd8ba0d8813.png
等高線グラフ
Mathematicaで描いたもの
https://gyazo.com/d03154eeb529d6cbddf7862010e7fc8a.png
レーダーチャート
https://gyazo.com/695143a6ef2c1ccb148fc61e63add8f2.png
散布図
相関を見るときとか
https://gyazo.com/5224cb354be1e97d6d44b06eed5f2441.png
世界の統計を散布図アニメーション視覚化
http://masui.org/26dc8c48f8b97a83499d7a632845cf6c.png
Gapminder
https://www.youtube.com/watch?v=BPt8ElTQMIg
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
お茶の水女子大学での講演 (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
Parallel Sets
https://gyazo.com/4f0137f0af484ea56379e4db50a41bfa.png
タグクラウドとParallel Coordinatesの組み合わせ
https://gyazo.com/216fe1491b7cd2fb32c2c57b9c8d98fb.png
Video: Parallel Tag Clouds
ヒートマップ
2次元情報を色で表現
相関の視覚化
Treemapなどとの組み合わせ
Webページの注視位置調査
https://gyazo.com/881d43ce6daa6fbaee51d36e166ab15c.png
株価の高低、値動きの幅を一目でわかるように可視化
https://gyazo.com/4be861f7952800433058425190618092.png
遺伝子解析への応用
https://gyazo.com/7ef8b7760597c13d4eee504f4cfdc3a7.png
遺伝子の情報視覚化
ヒートマップ + Parallel Coordinates
https://gyazo.com/5b2db410acefefe54c780111a59e034b.png
自己組織化マップ (SOM)
多次元データを2次元平面にマッピング
類似データを自動的に近くに配置
http://masui.org/4ddf6affb581e7eacf39ad880bca921c.gif
古さの視覚化
廃れるリンク
廃れるバックグラウンド
テロメア
古いページへのリンクはぼやける
https://gyazo.com/1529ed75aa3fcc9b06680c9cfb65846c.png
情報の古さをテクスチャで表現
http://www.pitecan.com/Enzan/ https://gyazo.com/c7d37199ab3cf8cbfe52b9bce50e63d5.png
https://gyazo.com/6b1cc45a176dc572422b91da0519019a.png
https://gyazo.com/d59fb064d402c514cd894289acc34608.png
Scrapboxの「テロメア」
https://gyazo.com/5480309bba5b66ac273abeb38a78de3d
「チャートジャンク」
http://oku.edu.mie-u.ac.jp/~okumura/blog/node/2548 https://gyazo.com/e915d0923f2402253cc559e283124568.png
「チャートジャンク」
https://gyazo.com/5e8329f85cdf460214aae0a5aece924a.png
チャートジャンク
様々なグラフなど @ Pinterest/masui
http://www.pinterest.com/masui/visualization-ideas/ https://gyazo.com/dc3b784293236505cd7c18e254769957.png
レポート課題1: 階層データ視覚化
TreeMapなどを利用して階層データを視覚化する
https://gyazo.com/b8023bc4426a31f2b45e07708d93378e.png
視覚化されるデータ
ファイルのサイズ
予算
国家予算
家計簿
面白いデータを視覚化したものを評価します
あらゆるリストは階層データに変換可能
例: 国家予算の視覚化
https://gyazo.com/df597f3f71e3cd4303cfac7adce0e2a1.png
レポート課題2: ネットワークデータ視覚化
有向グラフまたは無向グラフ
手書きしたものと比較
https://gyazo.com/c98655de5802c6dc6589f2628394e35d.png
データに関する注意
独自のデータを使う
自分のファイルシステム
自分の友達関係
自分で捜したデータ
本当のデータを使う
適当にでっち上げない
最低20件のデータを含むこと