直感とビジュアライズ Data Visualization Japan meetup #1

1. 直感とビジュアライズ
西田善彦

2. 自己紹介
西田善彦
某IT企業でUIデザイナー＆インタラクションデベロッパーとして勤務
/18
!
facebook: yoshihiko.nishida.54
2

3. The Facebook Offering: How It Compares
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?_r=0
3/18

4. こんなことありませんか？
「うーん、よくわからない、、、」
「かっこいいけど、、」
「で、どういう意味？」
「もっと直感的にしてください。」
/18
4

5. ビジュアライズはデータを直感的に表現するもの
地図
位置情報にマッピングして、地域ごとの特性を把握しやすく
!
2次元のグラフ
X軸とY軸に情報を割り振ることでデータの傾向を把握しやすく
!
ヒートマップ
色を使ってデータの傾向を把握しやすく
/18
etc…
5

6. テック系企業のIPOデータの比較
The Facebook Offering: How It Compares
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?_r=0
/18
• X軸：年代
• Y軸：評価額
6
• 円の色：年代
• 円の大きさ：評価額

7. こんなところがわかりにくい（と個人的に思う）
• 同じ情報なのに別々の表現
• 年代を表すのに色を使っているが、あまりピンとこない
• 透明度に意味はない？
• 評価額の単位が指数関数的なので、面積でわかりやすくしている？
データを表現する方法がもったいない
/18
7

8. 直感的なビジュアライズをするために
データや情報には特性がある
量的、質的、連続的、カテゴリ的、LATCH・・・・
!
表現にも特性がある
形状、大きさ、配置、色相、明度、彩度・・・
!
表現は感覚と繋がっている
距離が近い＝関係がありそう 距離が遠い＝関係なさそう
データを適切な感覚を与える表現とマッチングさせる
/18
8

9. /18
44の事例を調査
• 書籍やインターネットなどから、表現方法が異なる
44のビジュアライズの事例を収集
• 使われている表現、意味、気付きを分析
9

10. 表現によく割り当てられる情報
次元オブジェクト位置・配置大きさ長さ太さ形状面積色相彩度・明度
/18
10
点・円
四角
人
サイト
ジャンル
会社
役職
消費量
球
イベント
円で均等配
置
時系列
着弾位置
類似度
位置座標
モジュール
の量
影響力
回数
アクセス数
人・会社
の分類
グループ
分類
速度
滞在時間
回数
滞在時間
直線
共作関係
時系列
メール関係
推移
関係
イベント間の
関係
時系列
部門
支援の強さ
消費量
情報量
差の度合い
イベントの類
似度
高い/低い
編集者
曲線
つながり
リンク
引用関係
送受信の関係
受信関係
意見の近さ
送受信の間
隔
共有量
面
単語
フォルダ
州
州
包含関係
地形
作業順序
州
使用率
容量
編集量
フォルダの
関係
当選陣営
作業内容
包含関係

11. 表現方法が与える直感的な視点と気づき
間隔
密度
遠近
傾斜
大きさ
形状
トーン
/18
11
連続性がある、ない
序列がある、ない
詰まっている
偏っている
関係がある、ない
近い、遠い
急速、緩やか
関係が強い、弱い
量が多い、少ない
量に差がある、ない
均等、不均等
系列・ジャンル
同じ種類か異なる種類か
高い、低い
熱い、冷たい
濃い、薄い
はっきり、ぼんやり
強い、弱い
順番
距離
角度
太さ
長さ
高さ
色相
彩度
明度
寒暖
明暗
位置
線
面
色

12. オブジェクトの種類と気づきの関係
ビジュアル当てはめやすいデータビジュアルが与える気づき
/18
12
点・円
四角
人や物体
そのもの
対象となる
オブジェクトがある
直線つながり
時系列連続性がある/ない
曲線つながり連続性がある/ない
面形状を持ったもの
量を持ったもの量が多い/少ない

13. 点・円・四角のプロパティと気づきの関係
ビジュアル当てはめやすいデータビジュアルが与える気づき
位置座標
類似度
/18
13
偏り
密/疎
大きさ数量
影響度
多い/少ない
影響が強い/弱い

14. 直線のプロパティと気づきの関係
ビジュアル当てはめやすいデータビジュアルが与える気づき
位置座標つながり、連続性
長さ数量
類似度
/18
14
多い/少ない
影響が強い/弱い
遠い/近い
角度（点の位置関係？） 急速/緩やか
太さ関係値
（やりとりの回数など） 関係が強い/弱い

15. 曲線のプロパティと気づきの関係
ビジュアル当てはめやすいデータビジュアルが与える気づき
位置座標遠い／近い
曲率（ベジェ計算?） 急速/緩やか
大きさ関係値
（やりとりの回数など） 関係が強い/弱い
/18
15

16. 面のプロパティと気づきの関係
ビジュアル当てはめやすいデータビジュアルが与える気づき
形状カテゴリ種類が同じ/種類が異なる
面積数量
容量多い/少ない
/18
16

17. 色のプロパティと気づきの関係
ビジュアル当てはめやすいデータビジュアルが与える気づき
色相ジャンル種類が同じ/種類が異なる
明度数量
包含関係
/18
17
同系統
有効/無効
彩度数量
包含関係
同系統
重要である/重要でない
グラデー
ション
寒暖
高低
変化
偏り

18. 直感的なビジュアライズのポイント
• 無作為にビジュアライズしても、わかりにくいものしかできない。
!
• 各表現のプロパティと与える気づきを知ることで、
より直感的にビジュアライズすることができる（はず）。
/18
18

19. ご清聴ありがとうございました。