Lecture 4
Human Visual System
– Recap
– 3D vs 2D Debate
– Object Recognition Theories
Tufte – Envisioning Information
© Anselm Spoerri
Human Visual System – Recap
Sensory Representations Effective
because well matched to early stages of neural processing
Physical World Structured
Stages of Visual Processing
1 Rapid Parallel Processing
2 Slow Serial Goal-Directed Processing
Visual System Detects CHANGES + PATTERNS
Luminance Channel More Important than Color
Pre-Attentive Features
Position
Color
Simple Shape = orientation, size
Motion
Depth
© Anselm Spoerri
Gestalt Laws – Recap
Proximity
Similarity
Continuity
Symmetry
Closure
Relative Size
Figure and Ground
© Anselm Spoerri
Space Perception – Recap
Depth Cues
Shape-from-Shading
Shape-from-Contour
Shape-from-Texture
Shape-from-Motion
© Anselm Spoerri
Simple Lighting Model – Recap
Light from above and at infinity
Diffuse, Specular and Ambient Reflection Depth Cues
Diffuse
Lambertian
Specular
Ambient
Shadows
© Anselm Spoerri
Depth Cues – Relative Importance – Recap
Depth Contrast
0.001
Motion
parallax
Occlusion
0.01
Relative size
0.1
Binocular
disparity
Convergence
accommodation
1.0
1
Aerial
10
100
Depth (meters)
© Anselm Spoerri
3D vs 2D Debate - Display Abstract Data in 3D?
Depth Cue Theory
– Depth cues are environmental information about space
Occlusion most important Depth Cue
Perspective may not add anything by itself
Stereo important for Close Interaction
Motion important for 3D layout
Surface Perception
– Shape-from-Shading
– Shape-from-Texture
© Anselm Spoerri
Relative Position Judgment
Fine Judgments
- threading a needle
– Stereo is important
– Shadows
– Occlusion
Large Scale Judgments
– Perspective
– Motion parallax
– Stereo is not important
© Anselm Spoerri
Image + Object Recognition
Properties of Image Recognition
–
–
–
–
Remarkable image recognition memory
Up to 5 images per second
Applications in image searching interfaces
Easier to Recognize than to Recall
Image Based Theories
– Template theories based on 2D image processing
Structural 3D Theories
– Extract structure of a scene in terms of 3D primitives
© Anselm Spoerri
Template Theories
Template with simple morphing operations
© Anselm Spoerri
Template Theories – Scale Matters
Visual degrees = 4
optimal for object perception
© Anselm Spoerri
Geon Theory
© Anselm Spoerri
Geon Theory
(cont.)
3D Primitives “Geons”
Structural skeleton
Shape from shading
is also primitive
© Anselm Spoerri
Canonical Silhouettes
© Anselm Spoerri
Recognition – Processing Stages
© Anselm Spoerri
Pattern Finding & Recognition – 3D vs 2D
21% errors
11.4% errors
34% memory errors
20% memory errors
© Anselm Spoerri
Edward Tufte
Books
The Visual Display of
Quantitative Information
Envisioning Information
Visual Explanations
© Anselm Spoerri
Tufte - Minard's Napoleon's March to Moscow
© Anselm Spoerri
Tufte - Escape Flatland: Napoleon's March
Enforce Visual Comparisons
Width of tan and black lines gives you an
immediate comparison of the size of
Napoleon's army at different times during
march.
Show Causality
Map shows temperature records and
some geographic locations that shows
that weather and terrain defeated
Napoleon as much as his opponents.
Use Direct Labeling
Integrate words, numbers & images
Don't make user work to learn your "system.”
Legends or keys usually force the reader to
learn a system instead of studying the
information they need.
Design Content-Driven
Show Multivariate data
Napoleon's March shows six: army size,
location (in 2 dimensions), direction,
time, and temperature.
© Anselm Spoerri
Tufte – Challenger Data: Launch?
Graph obscures important variables of interest: temperature is shown textually and
graphically; degree of damage is not mapped onto a nominal scale
© Anselm Spoerri
Tufte – Challenger Data: Launch?
Diagrams can lead to great insight, but also to lack of it
© Anselm Spoerri
Cause of cholera epidemic in London in 1854?
John Snow’s deduction that a cholera epidemic was caused by a bad water pump
Modified in Visual Explanations by Edward Tufte, Graphics Press, 1997
© Anselm Spoerri
Tufte’s Measures
Maximize data-ink ratio
Data ink
Data ink ratio =
Total ink used in graphic
Maximize data density
Data density of graphic =
Number entries in data matrix
Area of data graphic
Measuring Misrepresentation
Lie factor =
 close to 1
Size of effect shown in graphic
Size of effect in data
© Anselm Spoerri
Tufte - Graphical Displays Should
Show Data
Focus on Content
Avoid Distorting
instead of graphic production
what
Data has to say
Make Large Data Sets Coherent
Encourage Eye to Compare Different Pieces of Data
Reveal Data at several Levels of Detail
Closely integrate Statistical and Verbal Descriptions
© Anselm Spoerri
Example
Stock market crash?
500
475
450
1998
1999
2000
2001
2002
© Anselm Spoerri
Example
500
250
Show entire scale
0
1998
1999
2000
2001
2002
© Anselm Spoerri
Example
500
250
Show in context
0
1960
1970
1980
1990
2000
© Anselm Spoerri
Tufte - How to Exaggerate with Graphs
“Lie factor” = 2.8
© Anselm Spoerri
Tufte - How to Exaggerate with Graphs
“Lie factor” = 2.8
Error:
Shrinking
along both
dimensions
© Anselm Spoerri
When to use which type?
Line Graph
20
15
10
5
0
1 2 3 4
5 6 7 8
– x-axis requires quantitative variable
– Variables have contiguous values
– familiar/conventional ordering among ordinals
15
10
Bar Graph
5
0
1 2 3 4
5 6 7 8
100%
80%
Scatter Plot
R2 = 0.87
60%
40%
20%
0%
0.0
0.2
– comparison of relative point values
0.4
– convey overall impression of relationship
between two variables
Pie Chart
– Emphasizing differences in proportion
among a few numbers
© Anselm Spoerri
Tufte - Graph & Chart Tips
Avoid Separate Legends and Keys
Make Grids, labeling, etc., Very Faint so
that they recede into background
Graphical Integrity
–
–
–
–
Where’s baseline?
What’s scale?
What’s context?
Watch Size Coding: Height/width vs. area vs. volume
Using Color Effectively
–
–
–
–
To
To
To
To
label
measure
represent or imitate reality
enliven or decorate
© Anselm Spoerri
Tufte – Hierarchy of Visual Effects
© Anselm Spoerri
Tufte – Hierarchy of Visual Effects
© Anselm Spoerri
Tufte – Hierarchy of Visual Effects in Maps
© Anselm Spoerri
Tufte – Be aware of visual artifacts
© Anselm Spoerri
Tufte – Leverage Illusionary Contours
© Anselm Spoerri
Tufte – Narratives of Space & Time
© Anselm Spoerri
Tufte – Micro / Macro Readings - 2½ Displays
Axonometric Projection
To Clarify, Add Detail
© Anselm Spoerri
Tufte – Micro / Macro Readings - 2½ Displays
© Anselm Spoerri
Tufte’s Principles – Summary
Good Information Design = Clear Thinking Made Visible
Greatest number of Ideas
in Shortest Time
with Least Ink in the Smallest Space
Principles
– Enforce Visual Comparisons
Show Comparisons Adjacent in Space
– Show Causality
– Show Multivariate Data
– Use Direct Labeling
– Use Small Multiples
– Avoid “Chart Junk”:
Not needed extras to be cute
© Anselm Spoerri