The Science of Visual Analysis - cdnl.tblsft.comcdnl.tblsft.com/.../science_of_visual_analysis.pdf · Readings in Information Visualization. Morgan Kaufmann, 1999 • Jacques Bertin

The Science of Visual Analysis

PRESENTED BY

Jock D. Mackinlay

Senior Director, Visual Analysis

Tableau Software

Dedicated to Jacques Bertin

• French cartographer

• July 27, 1918 to May 3, 2010

• Semiologie Graphique (Semiology of Graphics), University of

Wisconsin Press, 1967

Rich Gold’s 4 hats of creativity

Humans are slow at mental math

34

X 72 ------------------

Humans are faster when they use the world

34

X 72 ------------------

68

23180

------------------

2448

People use the world: Asking for directions



Interruptions can make people slow

From Rensink: http://www2.psych.ubc.ca/~rensink/flicker/download/

Interruptions can make people slow

The human visual system

Eye Brain

From the Texas School for the Blind and Visually Impaired

http://www.tsbvi.edu/images/visual-system.jpg

©2012 Tableau Software Inc. All rights reserved.

This is not a camera

The human visual system is powerful

How many 9s?


Accountants exploit pop-out



Lesson:

Exploit the power of the

human visual system

You have to look

to see

Pattern of eye motions when asked to identify the age of the people in the painting “An Unexpected Visitor,” by I.E. Repin. From Yarbus, 1967

Eyes move continuously, directed by task and attention (saccades)

Where you look depends on task


Visual processing is bi-directional

Based on Information Visualization: Perception for Design, 2nd Ed, 2004 By Colin Ware

Features Patterns Objects

Bottom-up: build patterns

Top-down: directs and reinforces


Bertin’s 3 levels of reading: Simple

Bertin’s 3 levels of reading: Intermediate

Bertin’s 3 levels of reading: Global


Lesson:

There is no single view:

iterate, explore, and

experiment


The Cycle of Visual Analysis

Reference model for Information Visualization

From

Readings in Information Visualization:

Using Vision to Think

Card, Mackinlay, Shneiderman, 1999

Data

Transformations

Data

Raw

Data

Data

Tables

Human Interaction (controls)

Visual

Mappings

View

Transformations

View Task

Visual

Structures Views

Graphical Vocabulary

Marks

Points

Lines

Areas

Position

Retinal

Color

Size

Shape

Gray

Orientation

Texture

x x x x x

x

x

x

x

x x

x

x x

x x

From

Semiology of Graphics, 1967 Jacques Bertin


Length

Position More accurate

Less accurate

Angle Slope

Size

Color Density

From Graphical perception: theory, experimentation and application to the development of graphical methods Cleveland & McGill, Journal of the American Statistical Association, 1984

Effectiveness

Quantitative Data


Quantitative:

Position > Length


Quantitative:

Position > Size > Color

Good Bad


Quantitative:

Encode from zero

Good Bad


Quantitative:

People see area rather than height

Good Bad

S. Stevens’ theory of scale measurement

• Quantitative

• Ratio: Kelvin

• Interval: Celsius

• Ordinal: Monday, Tuesday, Wednesday, …

• Nominal: Apple, Orange, Banana, …

From

On the theory of scales of measurement S. Stevens, Science, 1946 http://en.wikipedia.org/wiki/Level_of_measurement


Nominal & Ordinal:

Position


Nominal & Ordinal:

Size encodings

Bad Good


Nominal & Ordinal:

Color encodings

Good OK

Effectiveness depends on the data type

• Data type

• Quantitative: 2.4, 5.98, 10.1, …

• Ordinal: Monday, Tuesday, Wednesday, …

• Nominal: Apple, Orange, Banana,…

• Size encoding

• Quantitative:

• Ordinal:

• Nominal: Conveys an ordering

• Color encoding

• Quantitative:

• Ordinal:

• Nominal:

Use shape for large cardinalities

• Color encoding

• Nominal:

• Ordinal:

• Shape:

From:

Beautiful Evidence (based on Carl Sagan’s graph)

Edward R. Tufte, Graphics Press, 2006

Nominal

Position

Shape

Color hue

Gray ramp

Color ramp

Length

Angle

Size

Ranking of encodings by data type

Ordinal

Position

Gray ramp

Color ramp

Color hue

Length

Angle

Size

Shape

Quantitative

Position

Length

Angle

Size

Gray ramp

Color ramp

Color hue

Shape


Lessons:

Use Position for the

most important data

Use Color for

nominal data <= 20

Use Shape for

nominal data > 20


Warning: Interactions Small size hides color, and shape

Bad Bad

Bad Bad Good

Expressiveness: Communicate all of the relevant data


Human Perception is Limited: Bertin’s Barrier

3D Graphics Does Not Break the Barrier

• Only adds a single dimension

• Creates occlusions

• Adds orientation complexities

• Easy to get lost

• Suggests a physical metaphor

Interactivity: Bertin’s Sorting of Data Views

Bertin’s permutation matrix (1977)

• Analysis by sorting visual tables

• Technology


Lesson:

The human visual system is limited:

Each data view should be

focused

Use interactivity and

multiple views

Composition: Small Multiples

See:

The Visual Display of Quantitative Information Edward R. Tufte, Graphics Press, 1983

Composition:

Napoleon march to Moscow by Minard

• Two images:

Composition: Dashboards

Interactivity: Links and Filtering

Visual Analysis

• Human visual system

• Fast, intuitive interaction

click click

Summary

• Exploit the power of the human visual system

• There is no single view: iterate, explore, and experiment

• Use position for the most important data

• Use color for nominal data <= 20

• Use shape for nominal data > 20

• Human visual system is limited: each view should be focused

• For multidimensional data, use interactivity and multiple views

Resources

• Card, Mackinlay, Shneiderman ([email protected])

Readings in Information Visualization. Morgan Kaufmann, 1999

• Jacques Bertin

Semiology of Graphics. University of Wisconsin Press, 1967

• Colin Ware

Information Visualization, Perception for Design. Morgan Kaufmann, 2ed, 2004

• Edward Tufte

The Visual Display of Quantitative Information. Graphics Press, 1983

• William S Cleveland

The Elements of Graphing Data. Hobart Press, 1994

• Stephen Few

Show Me The Numbers. Analytics Press, 2004

Documents

The Science of Visual Analysis - cdnl.tblsft.comcdnl.tblsft.com/.../science_of_visual_analysis.pdf · Readings in Information Visualization. Morgan Kaufmann, 1999 • Jacques Bertin