Tweet
Tweet

Slide 1

Slide 1 text

Art and Science of Visual Analytics Episode 2: Forms and Positions

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Episode 0 Visual Analytics 考えなくても、理解できるように工夫する Preattentive Attributes Visual Analyticsを助ける考え方(= Art and Science)

Slide 4

Slide 4 text

今回は、形と位置

Slide 5

Slide 5 text

Preattentive Attributesの種類 Color - 色 Form - 形 Position - 位置 Movement - 動き

Slide 6

Slide 6 text

Form Color Position

Slide 7

Slide 7 text

TL;DR (Visual) Illusion Shapes and Position

Slide 8

Slide 8 text

ゲームをしましょう :)

Slide 9

Slide 9 text

どちらが大きい？

Slide 10

Slide 10 text

どちらが大きい？

Slide 11

Slide 11 text

傾きが大きいのは？

Slide 12

Slide 12 text

傾きが大きいのは？

Slide 13

Slide 13 text

人間の視覚を騙すのはとても簡単

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

以上を頭の片隅に

Slide 18

Slide 18 text

記憶の三段階 タイプ 保持期間 容量制限 Sensory memory(即時記憶) 200~500ミリ秒 特徴のあるものだけ。 Short-term memory(短期記憶) 10~15秒 一度に7項目まで。 Long-term memory(長期記憶) 生涯 個人差がある。

Slide 19

Slide 19 text

Best Practices of Shapes and Position

Slide 20

Slide 20 text

組み合わせの法則

Slide 21

Slide 21 text

向き + 位置 = 折れ線グラフ

Slide 22

Slide 22 text

長さ + 幅 + 位置 = 棒グラフ

Slide 23

Slide 23 text

形状 + 位置 + グループ = 散布図

Slide 24

Slide 24 text

複雑そうなグラフも紐解くと組み合わせ

Slide 25

Slide 25 text

長さ + 幅 + 位置 + サイズ = ウォーターフォールチャート

Slide 26

Slide 26 text

サイズ + 位置 + グループ = バブルチャート

Slide 27

Slide 27 text

サイズ + グループ = パックバブルチャート

Slide 28

Slide 28 text

空間を最大限活用する

Slide 29

Slide 29 text

サイズ + 位置 + 囲い = ツリーマップ

Slide 30

Slide 30 text

位置(緯度、経度) + 囲い = 地図

Slide 31

Slide 31 text

色も組み合わせてみると、さらに強力に

Slide 32

Slide 32 text

長さ + 幅 + 位置 + 囲い + 色相 = 積み上げ棒グラフ

Slide 33

Slide 33 text

向き + 位置 + 囲い + 色相 = 面グラフ

Slide 34

Slide 34 text

サイズ + 向き(角度) + 囲い + 色相 = 円グラフ

Slide 35

Slide 35 text

位置 + 囲い + 彩度 = ヒートマップ

Slide 36

Slide 36 text

すべてのグラフは Preattentive Attributesから できている

Slide 37

Slide 37 text

TL;DR (Visual) Illusion 人間の視覚情報は容易に騙される(錯覚、錯視) 視覚を悪用しないように注意する Shapes and Position すべてのグラフを構成している要素はPreattentive Attributesである 色と組み合わせると強力な表現力となる

Slide 38

Slide 38 text

No content