Graphical Perception Nam Wook Kim Mini-Courses January @ GSAS - - PowerPoint PPT Presentation

▶

graphical perception

Graphical Perception Nam Wook Kim Mini-Courses January @ GSAS - - PowerPoint PPT Presentation

Apr 01, 2024 310 likes •1.17k views

Graphical Perception Nam Wook Kim Mini-Courses January @ GSAS 2018 What is graphical perception? The visual decoding of information encoded on graphs Why? Visualization is really about external cognition, that is, how resources

slide-1

SLIDE 1

Graphical Perception

Nam Wook Kim Mini-Courses — January @ GSAS 2018

slide-2

SLIDE 2

The visual decoding of information encoded on graphs

What is graphical perception?

slide-3

SLIDE 3

Why?

slide-4

SLIDE 4

“Visualization is really about external cognition, that is, how resources outside the mind can be used to boost the cognitive capabilities of the mind” — Stuart Card

slide-5

SLIDE 5

“Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space” — Edward Tufte

slide-6

SLIDE 6

Goal

To understand how humans perceive visualization

slide-7

SLIDE 7

Topics

Signal Detection
Magnitude Estimation
Pre-Attentive Processing
Using Multiple Visual Encodings
Gestalt Grouping
Change Blindness

slide-8

SLIDE 8

Detection

slide-9

SLIDE 9

Detecting Brightness

Which is brighter? A B

slide-10

SLIDE 10

(128,128,128) (144,144,144)

A B

Detecting Brightness

slide-11

SLIDE 11

Detecting Brightness

Which is brighter? A B

slide-12

SLIDE 12

(138,138,138) (134,134,134)

Detecting Brightness

A B

slide-13

SLIDE 13

Just Noticeable Difference (JND) — Weber’s Law

dp = k dS S

Physical Intensity

slide-14

SLIDE 14

Just Noticeable Difference (JND) — Weber’s Law

dp = k dS S

Physical Intensity Change of Intensity

slide-15

SLIDE 15

Just Noticeable Difference (JND) — Weber’s Law

dp = k dS S

Physical Intensity Change of Intensity Perceived Change

slide-16

SLIDE 16

Just Noticeable Difference (JND) — Weber’s Law

dp = k dS S

Physical Intensity Change of Intensity Perceived Change Weber constant (Empirically determined)

slide-17

SLIDE 17

Just Noticeable Difference (JND) — Weber’s Law

dp = k dS S

Physical Intensity Change of Intensity Perceived Change Weber constant (Empirically determined)

For detecting JND, ratios more important than magnitude Most continuous variation in stimuli are perceived in discrete steps

slide-18

SLIDE 18

Ranking visualizations for depicting correlation

[Harrison et al 2014]

slide-19

SLIDE 19

Ranking visualizations for depicting correlation

[Harrison et al 2014]

r = 0.7 r = 0.6

Which of the two appeared to be more highly correlated?

slide-20

SLIDE 20

Ranking visualizations for depicting correlation

[Harrison et al 2014]

r = 0.7 r = 0.65

Which of the two appeared to be more highly correlated?

slide-21

SLIDE 21

Ranking visualizations for depicting correlation

[Harrison et al 2014]

Overall, scatterplots are the best for both positive and negative correlations. Parallel coordinates are only good for negative correlations .

slide-22

SLIDE 22

Magnitude Estimation

slide-23

SLIDE 23

A Quick Experiment…

slide-24

SLIDE 24

A B

slide-25

SLIDE 25

A B

slide-26

SLIDE 26

A B

slide-27

SLIDE 27

A B

slide-28

SLIDE 28

Steven’s Power Law

[Graph from T. Munzner 2014]

S = I p

Physical Intensity Perceived Sensation Exponent (Empirically Determined) Predicts bias, not necessarily accuracy! Models the relationship between the magnitude of a physical stimulus and its perceived intensity.

slide-29

SLIDE 29

Steven’s Power Law

[Graph from T. Munzner 2014]

Overestimate Underestimate Unbiased

slide-30

SLIDE 30

Apparent Magnitude Scaling

Cartography: Thematic Map Design, Figure 8.6, p. 170, Dent, 96

To compensate for human error in interpreting scale because people tend to underestimate area

slide-31

SLIDE 31

Graphical Perception [Cleveland & McGill 84]

What percentage of the smaller was of the larger?

slide-32

SLIDE 32

Graphical Perception [Cleveland & McGill 84]

What percentage of the smaller was of the larger?

Compare positions   (along common scale) Compare lengths

slide-33

SLIDE 33

slide-34

SLIDE 34

What percentage each value was of the maximum?

Compare positions Comare angles

slide-35

SLIDE 35

Bar chart won!

slide-36

SLIDE 36

[T. Munzer 2014]

Effectiveness Ranking of Visual Encoding Variables

for comparing numerical quantities

slide-37

SLIDE 37

Pre-Attentive Processing

slide-38

SLIDE 38

How Many 3’s?

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

[based on a slide from J. Stasko]

slide-39

SLIDE 39

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

How Many 3’s?

[based on a slide from J. Stasko]

slide-40

SLIDE 40

The ability of the low-level human visual system to rapidly and effortlessly identify certain basic visual properties.

Pre-attentive processing

slide-41

SLIDE 41

Visual Pop-Out: Color

Christopher Healey, https://www.csc.ncsu.edu/faculty/healey/PP/index.html

slide-42

SLIDE 42

Christopher Healey, https://www.csc.ncsu.edu/faculty/healey/PP/index.html

Visual Pop-Out: Shape

slide-43

SLIDE 43

Christopher Healey, https://www.csc.ncsu.edu/faculty/healey/PP/index.html

and more…

slide-44

SLIDE 44

No unique visual property of the target

Christopher Healey, https://www.csc.ncsu.edu/faculty/healey/PP/index.html

Feature Conjunctions

slide-45

SLIDE 45

Pre-attentive Conjunctions

Most conjunctions are not pre-attentive. Some spatial conjunctions are pre-attentive.

Motion and 3D disparity
Motion and color
Motion and shape
3D disparity and color
3D disparity and shape

slide-46

SLIDE 46

Multiple Attributes

slide-47

SLIDE 47

One-Dimensional: Lightness

White Black White Black White White White Black Black White

r

Classify objects based on lightness

slide-48

SLIDE 48

Square Circle Circle Circle Square Circle Circle Circle Square Circle

r

One-Dimensional: Shape

Classify objects based on shape

slide-49

SLIDE 49

Redundant: Shape & Lightness

Circle Square Square Square Circle Circle Circle Square Square Square

r

Classify objects based on shape. Easier?

slide-50

SLIDE 50

Redundant: Shape & Lightness

Circle Square Square Square Circle Circle Circle Square Square Square

r

Classify objects based on shape. Easier?

slide-51

SLIDE 51

Orthogonal: Shape & Lightness

Circle Circle Square Square Circle Classify objects based on shape. Difficult?

slide-52

SLIDE 52

Speeded Classification

Redundancy Gain Facilitation in reading one dimension when the other provides redundant information. Filtering Interference Difficulty in ignoring one dimension while attending to the

ther.

slide-53

SLIDE 53

Speeded Classification

R: Redundant Encoding 1: One-dimensional O: Orthogonal Encoding

Interference Gain

slide-54

SLIDE 54

Speeded Classification

R: Redundant Encoding 1: One-dimensional O: Orthogonal Encoding

Stable

White White Black White Black

slide-55

SLIDE 55

Types of Perceptual Dimensions

Integral Filtering interference and redundancy gain Separable No interference or gain Asymmetric One dimension separable from other, not vice versa e.g., Lightness was not really influenced by shape

slide-56

SLIDE 56

Separability vs. Integrality

2 groups each

Position Hue (Color) Fully separable

[Tamara Munzner 14]

What we perceive:

slide-57

SLIDE 57

Separability vs. Integrality

2 groups each 2 groups each

Position Hue (Color) Size Hue (Color) Fully separable Some interference

[Tamara Munzner 14]

What we perceive:

slide-58

SLIDE 58

Separability vs. Integrality

2 groups each 2 groups each 3 groups total: integral area

Position Hue (Color) Size Hue (Color) Width Height Fully separable Some interference Some/signifjcant interference

[Tamara Munzner 14]

What we perceive:

slide-59

SLIDE 59

Separability vs. Integrality

2 groups each 2 groups each 3 groups total: integral area 4 groups total: integral hue

Position Hue (Color) Size Hue (Color) Width Height Red Green Fully separable Some interference Some/signifjcant interference Major interference

[Tamara Munzner 14]

What we perceive:

slide-60

SLIDE 60

Not about good or bad

Match the characteristics of the channels to the information that is encoded. For a single data attribute with three categories, this may work just fine: small, flattened, and large.

[Tamara Munzner 14]

slide-61

SLIDE 61

Gestalt Grouping

slide-62

SLIDE 62

Principles of Perceptual Organization

Similarity Proximity Uniformed Connectedness Connection Enclosure Continuity Symmetry and there are more not covered here…

slide-63

SLIDE 63

Proximity

Columns Rows

slide-64

SLIDE 64

Similarity

Rows stand out due to similarity.

slide-65

SLIDE 65

Scatter Plot Matrix Clusters and outliers

slide-66

SLIDE 66

Uniformed Connectedness: Connection

Connectedness dominates proximity and similarity

Proximity (column) vs connection (row) Similarity (row) vs connection (column)

slide-67

SLIDE 67

Uniformed Connectedness: Enclosure

slide-68

SLIDE 68

Chart Annotations

[ https://chartaccent.github.io/ ]

Enclosure Connection

slide-69

SLIDE 69

Visualizing Sets

[ Slides from A. Lex ]

Bubble Sets Line Sets Kelp Diagrams

slide-70

SLIDE 70

Treemap and Circle Packing

https://bl.ocks.org/mbostock/4063530 https://bl.ocks.org/mbostock/4063582

Proximity, Similarity, Enclosure

slide-71

SLIDE 71

Continuity

We prefer smooth not abrupt changes [from Ware 04] Connections are clearer with smooth contours [from Ware 04]

slide-72

SLIDE 72

Hierarchical Edge Bundling

[ Holten 06 ]

slide-73

SLIDE 73

Symmetry

Elements that are symmetrical to each other tend to be grouped together.

https://www.populationpyramid.net/united-states-of-america/2017/

slide-74

SLIDE 74

Population Pyramid (or tornado chart?)

https://www.populationpyramid.net/united-states-of-america/2017/

Korean War?

slide-75

SLIDE 75

Change Blindness

slide-76

SLIDE 76 http://www.psych.ubc.ca/~rensink/flicker/download/

Change Detection Test

slide-77

SLIDE 77 https://www.youtube.com/watch?v=ubNF9QNEQLA

Change Detection Test

slide-78

SLIDE 78

“To see an object change, it is necessary to attend to it.” — Ronald A. Rensink

slide-79

SLIDE 79

Reducing change blindness in visualization

Provide attentional guidance by leverage pre-attentive features, Gestalt principles, etc. Example: Ease tracking objects through animated transitions

https://bl.ocks.org/mbostock/3885705

slide-80

SLIDE 80

Topics

Signal Detection
Magnitude Estimation
Pre-Attentive Processing
Using Multiple Visual Encodings
Gestalt Grouping
Change Blindness

slide-81

SLIDE 81

Take away

1. Human don’t perceive changes and magnitude at face value. 2. Use pre-attentive visual features for faster target detection. 3. Be aware of interference and redundancy of multiple features. 4. Leverage gestalt principles for high-level grouping. 5. Change blindness in visualization is the failure of design, not because of our vision system.

Knowledge of perception can benefit visualization design

slide-82

SLIDE 82

1. Value of visualization
2. Design principles
3. Graphical perception

Today

Fundamental

slide-83

SLIDE 83

1. Data model and visual encoding
2. Exploratory data analysis
3. Storytelling with data
4. Advanced visualizations

Practical

Tomorrow

slide-84

SLIDE 84

Data model and visual encoding

Next

Rankings of visual variables for quantitative, ordinal, and normal data

slide-85

SLIDE 85

See you tomorrow!