6. 様々なデータのビジュアライゼーション
https://www.youtube.com/watch?v=V_8jqx1Sp9A
増井俊之
慶應義塾大学 環境情報学部
masui@pitecan.com
2021年11月11日
データ視覚化の人類史
https://www.amazon.co.jp/dp/4791774191 https://gyazo.com/c6055c1a5175aa9baf9e4da194814767
得票率マップ
https://gyazo.com/13bfc7467667a61d366b78254a29bbe1
地図リテラシー入門
https://www.amazon.co.jp/dp/4860646665 https://gyazo.com/3f9e681cc4a63890f0620c1bd1d628e0
https://gyazo.com/6293891111fccf0067e7c5e6ecd5a120
階級区分図 (choropleth map)
レポート課題
階層/ネットワーク以外のデータ
表データ
時系列変化
相関関係
多次元属性
表データの視覚化
Excelのデータなど
X軸, Y軸は何でもよい
相関情報
タイムライン
PerspectiveWall
長いリストを曲がった壁に貼りつける
視点から遠いものは自然に小さく/近いものは大きく表示される
https://gyazo.com/dbd6789eb9d669c471a83552c101b02e
ビデオ: 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(微調整可能なスライダ)で検索条件を微調整
https://gyazo.com/9cc8f3a3c537d01efd8bbdaf9a78aa21
Video: FilmFinder
https://s3-ap-northeast-1.amazonaws.com/masui.org/c/a/cae12f5fb5813f1b6be21abd6329b2d6.mp4
TileBar
キーワードの文書内分布をタイル状に表示
https://gyazo.com/19518d9fc81d91a7cdd2c2a44ffbcbce
属性が沢山ある複雑化なデータの視覚化
Sparklineを利用
https://gyazo.com/21f14e81c0d0212d362a5041f7d47040.png
時系列の視覚化
一番単純なグラフ
https://gyazo.com/0a04b12cdb7915cf5794b0bc397810f0.png
「折れ線グラフ」でググった結果
https://gyazo.com/80d5356633f1862b896c77f2efe2e269
Y軸を時間に割り当てた例
https://gyazo.com/8baf8b82a1e7a51db6d250c7da63f91e.png
Sparkline
折れ線グラフを小さなアイコンで表示
https://gyazo.com/756419809b28a762c5f9b0f84f1b8b8b.png
https://gyazo.com/5e7366abfc71853eb3904cfe8cf3d317.png
LifeLines
少年非行履歴の視覚化
https://gyazo.com/7cf1f1daed123e57f123477d719129eb
見えログ
ネットワークログの視覚化
https://gyazo.com/da09eac3bfe7230b460fb7c433280dcf.png
Wikipediaの変更履歴などを視覚化
http://gyazo.com/248b7f2692553e0474280f1c51bbd378.png
「Abortion」の編集履歴
https://gyazo.com/47ba75aff16d3e1f511bf40da93dfb3e.png
SeeSoft
プログラムの視覚化ツール群
https://gyazo.com/31164d1dc490ccc68827bf6dd30fe2ff
https://gyazo.com/e302c5ea1380447b58495bfe25710c5d
https://gyazo.com/e04d8f9eb8d1dba6849c87724e0f4b2a.png
Visualizing Empires Decline
アニメーションで時系列を表現
http://gyazo.com/77f6086ad6338de2ef15dd16f8bda00a.png
https://vimeo.com/11506746
ナイチンゲールの視覚化
角度で時系列を表現
https://gyazo.com/58cf7b2762c167f5651500466f80f064.png
その他の視覚化いろいろ
ドーナツグラフ
散布図
レーダーチャート
等高線グラフ
Parallel Coordinates
ヒートマップ
古さの視覚化
Exelのグラフの種類
縦棒グラフ
横棒グラフ
折れ線グラフ
円グラフ
散布図
面グラフ
ドーナツ グラフ
レーダー チャート
等高線グラフ
バブル チャート
株価チャート
円柱グラフ、円錐グラフ、ピラミッド グラフ
ドーナツグラフ
https://gyazo.com/8570e4549b6e8bcb0c8567cbf85f574b.png
等高線グラフ (Contour graph)
Excelで描いたもの
https://gyazo.com/496fcf5783f6aa5946f2ecd8ba0d8813.png
等高線グラフ
Mathematicaで描いたもの
https://gyazo.com/d03154eeb529d6cbddf7862010e7fc8a.png
https://gyazo.com/cdd4e25f733d26bdaf54ff42a5e6bcf7
レーダーチャート
https://gyazo.com/695143a6ef2c1ccb148fc61e63add8f2.png
散布図
相関を見るときとか
https://gyazo.com/5224cb354be1e97d6d44b06eed5f2441.png
世界の統計を散布図アニメーション視覚化
https://gyazo.com/26dc8c48f8b97a83499d7a632845cf6c
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
https://www.youtube.com/watch?v=pNTZPOqg8N0
自己組織化マップ (SOM)
多次元データを2次元平面にマッピング
類似データを自動的に近くに配置
https://gyazo.com/0c7b97d5d3cae1f927486016011136ce
古さの視覚化
廃れるリンク
廃れるバックグラウンド
テロメア
古いページへのリンクはぼやける
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
チャートジャンク
駄目なグラフ
https://gyazo.com/c8b93a67603d32b1f72e1928dd81df9a
インチキ円グラフ
https://gyazo.com/789e37ee5b9bb78a4c4296e97f0e96bb
様々なグラフなど @ Pinterest/masui
http://www.pinterest.com/masui/visualization-ideas/ https://gyazo.com/dc3b784293236505cd7c18e254769957.png
レポート課題