CSE 512 - Data Visualization Graphical Perception Jeffrey Heer University of Washington
Design Principles [Mackinlay 86] Expressiveness A set of facts is expressible in a visual language if the sentences (i.e. the visualizations) in the language express all the facts in the set of data, and only the facts in the data. Effectiveness A visualization is more effective than another visualization if the information conveyed by one visualization is more readily perceived than the information in the other visualization.
Design Principles Translated Tell the truth and nothing but the truth (don t lie, and don t lie by omission) Use encodings that people decode better (where better = faster and/or more accurate)
Which best encodes quantities? Position Length Area Volume Value (Brightness) Color Hue Orientation (Angle) Shape
Effectiveness Rankings [Mackinlay 86] QUANTITATIVE ORDINAL NOMINAL Position Position Position Length Density (Value) Color Hue Angle Color Sat Texture Slope Color Hue Connection Area (Size) Texture Containment Volume Connection Density (Value) Density (Value) Containment Color Sat Color Sat Length Shape Color Hue Angle Length Texture Slope Angle Connection Area (Size) Slope Containment Volume Area Shape Shape Volume
Graphical Perception The ability of viewers to interpret visual (graphical) encodings of information and thereby decode information in graphs.
Topics Signal Detection Magnitude Estimation Pre-Attentive Processing Using Multiple Visual Encodings Gestalt Grouping Change Blindness
Detection
Detecting Brightness Which is brighter?
Detecting Brightness (128, 128, 128) (144, 144, 144) Which is brighter?
Detecting Brightness Which is brighter?
Detecting Brightness (134, 134, 134) (128, 128, 128) Which is brighter?
Just Noticeable Difference (JND) JND (Weber s Law) Perceived Change Scale Factor (Empirically Determined) Ratios more important than magnitude Most continuous variation in stimuli are perceived in discrete steps Change of Intensity Physical Intensity
Encoding Data with Color Value is perceived as ordered Encode ordinal variables (O) Encode continuous variables (Q) [not as well] Hue is normally perceived as unordered Encode nominal variables (N) using color
Steps in Font Size Sizes standardized in 16 th century a a a a a a a a a a a a a a a a 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72
Magnitude Estimation
A Quick Experiment
Compare area of circles
Compare length of bars
Compare area of circles
Compare length of bars
Steven s Power Law Exponent (Empirically Determined) Perceived Sensation Physical Intensity Predicts bias, not necessarily accuracy! [Graph from Wilkinson 99, based on Stevens 61]
Exponents of Power Law Sensation Exponent Loudness 0.6 Brightness 0.33 Smell 0.55 (Coffee) - 0.6 (Heptane) Taste 0.6 (Saccharine) -1.3 (Salt) Temperature 1.0 (Cold) 1.6 (Warm) Vibration 0.6 (250 Hz) 0.95 (60 Hz) Duration 1.1 Pressure 1.1 Heaviness 1.45 Electic Shock 3.5 [Psychophysics of Sensory Function, Stevens 61]
Apparent Magnitude Scaling [Cartography: Thematic Map Design, Figure 8.6, p. 170, Dent, 96] S = 0.98A 0.87 [from Flannery 71]
Graphical Perception [Cleveland & McGill 84]
Cleveland & McGill, 84
Position 1 Position 2 Position 3 Length 1 Length 2 Angle Area (Circular) Area (Rect 1) Area (Rect 2) Heer & Bostock 10 Log Absolute Estimation Error Graphical Perception Experiments Empirical estimates of encoding effectiveness
Relative Magnitude Comparison Most accurate Position (common) scale Position (non-aligned) scale Length Slope Angle Area Volume Least accurate Color hue-saturation-density
Effectiveness Rankings [Mackinlay 86] QUANTITATIVE ORDINAL NOMINAL Position Position Position Length Density (Value) Color Hue Angle Color Sat Texture Slope Color Hue Connection Area (Size) Texture Containment Volume Connection Density (Value) Density (Value) Containment Color Sat Color Sat Length Shape Color Hue Angle Length Texture Slope Angle Connection Area (Size) Slope Containment Volume Area Shape Shape Volume
Administrivia
A3: Interactive Prototype Create an interactive visualization. Choose a driving question for a dataset and develop an appropriate visualization + interaction techniques, then deploy your visualization on the web. Due by 11:59pm on Monday, April 30. Register your team by EOD, Friday, April 20!
D3.js Tutorial Date: Thursday, April 19 Time: 4:30pm to 6:30pm Location: Sieg 134 D3.js is a popular JavaScript visualization library, valuable for A3 and your Final Project
Pre-Attentive Processing
How Many 3 s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686 [based on a slide from J. Stasko]
How Many 3 s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686 [based on a slide from J. Stasko]
Visual Pop-Out: Color http://www.csc.ncsu.edu/faculty/healey/pp/index.html
Visual Pop-Out: Shape http://www.csc.ncsu.edu/faculty/healey/pp/index.html
Feature Conjunctions http://www.csc.ncsu.edu/faculty/healey/pp/index.html
Pre-Attentive Features [Information Visualization. Figure 5. 5 Ware 04]
More Pre-Attentive Features Line (blob) orientation Julesz & Bergen [1983]; Wolfe et al. [1992] Length Triesman & Gormican [1988] Width Julesz [1985] Size Triesman & Gelade [1980] Curvature Triesman & Gormican [1988] Number Julesz [1985]; Trick & Pylyshyn [1994] Terminators Julesz & Bergen [1983] Intersection Julesz & Bergen [1983] Closure Enns [1986]; Triesman & Souther [1985] Colour (hue) Nagy & Sanchez [1990, 1992]; D'Zmura [1991]; Kawai et al. [1995]; Bauer et al. [1996] Intensity Beck et al. [1983]; Triesman & Gormican [1988] Flicker Julesz [1971] Direction of motion Nakayama & Silverman [1986]; Driver & McLeod [1992] Binocular lustre Wolfe & Franzel [1988] Stereoscopic depth Nakayama & Silverman [1986] 3-D depth cues Enns [1990] Lighting direction Enns [1990]
Pre-Attentive Conjunctions Spatial conjunctions are often pre-attentive Motion and 3D disparity Motion and color Motion and shape 3D disparity and color 3D disparity and shape But most conjunctions are NOT pre-attentive
Feature Integration Theory Feature maps for orientation & color [Green] Treisman s feature integration model [Healey 04]
Multiple Attributes
One-Dimensional: Lightness White White Black White Black White Black Black White White
One-Dimensional: Shape Square Circle Circle Square Circle Circle Circle Square Circle Circle
Redundant: Shape & Lightness Circle Square Square Circle Square Circle Square Square Square Circle
Orthogonal: Shape & Lightness Circle Square Square Circle Square
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 other
Speeded Classification Response Time Interference Gain R 1 O R 1 O Lightness Shape Dimension Classified
Types of Perceptual Dimensions Integral Filtering interference and redundancy gain Separable No interference or gain Asymmetric One dim separable from other, not vice versa Example: The Stroop effect color naming is influenced by word identity, but word naming is not influenced by color
Stroop Effect: What word? blue yellow red orange green purple
Stroop Effect: What color? blue yellow red orange green purple
Size and Value W. S. Dobson, Visual information processing and cartographic communication: The role of redundant stimulus dimensions, 1983 (reprinted in MacEachren, 1995)
Orientation & Size How well can you see temperature or precipitation? Is there a correlation between the two? [MacEachren 95]
Shape & Size Easier to see one shape across multiple sizes than one size of across multiple shapes? [MacEachren 95]
Length & Length [MacEachren 95]
Angle & Angle [MacEachren 95]
Summary of Integral & Separable Integral [Figure 5.25, Color Plate 10, Ware 2000] Separable
Set Each card has 4 features: Color Symbol Number Shading/Texture A set consists of 3 cards in which each feature is the SAME or DIFFERENT on each card.
Gestalt Grouping
Gestalt Principles Figure/Ground Proximity Similarity Symmetry Connectedness Continuity Closure Common Fate Transparency
Figure/Ground Principle of surroundedness Ambiguous Principle of relative size http://www.aber.ac.uk/media/modules/mc10220/visper07.html
Figure/Ground Ambiguous Unambiguous (?) http://www.aber.ac.uk/media/modules/mc10220/visper07.html
Proximity [Ware 00]
Similarity Rows dominate due to similarity [from Ware 04]
Symmetry Bilateral symmetry gives strong sense of figure [from Ware 04]
Connectedness Connectedness overrules proximity, size, color shape [from Ware 04]
Continuity We prefer smooth not abrupt changes [from Ware 04] Connections are clearer with smooth contours [from Ware 04]
Continuity: Vector Fields Prefer field that shows smooth continuous contours [from Ware 04]
Continuity: Vector Fields Prefer field that shows smooth continuous contours [from Ware 04]
Closure We see a circle behind a rectangle, not a broken circle [from Ware 04] Illusory contours [from Durand 02]
Common Fate Dots moving together are grouped
Transparency Requires continuity and proper color correspondence [from Ware 04]
Layering
Layering: Gridlines Electrocardiogram tracelines [from Tufte 90]
Layering: Gridlines Stravinsky score [from Tufte 90]
Setting Gridline Contrast How light can gridlines be and remain visible? How dark can gridlines be and not distract? Safe setting: 20% Alpha [Stone & Bartram 2009] [Heer & Bostock 2010]
Change Blindness
Change Blindness
Change Blindness
Change Blindness
Change Blindness
Change Blindness [Example from Palmer 99, originally due to Rock]
Demonstrations http://www.psych.ubc.ca/~rensink/flicker/download/ http://www.youtube.com/watch?v=ahg6qcgoay4
Summary Choosing effective visual encodings requires knowledge of visual perception. Visual features/attributes Individual attributes often pre-attentive Multiple attributes may be separable or integral Gestalt principles provide high-level guidelines We don t always see everything that is there!