David GiardMCTS, MCSD, MCSE, MCDBA

blog: DavidGiard.comtv: TechnologyAndFriends.comtwitter: @DavidGiarde-mail: DavidGiard@DavidGiard.com

Data VisualizationThe Ideas of Edward Tufte

I II III IV

x y x y x y x y

10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58

8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76

13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71

9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84

11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47

14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04

6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25

4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50

12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.59

7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91

5.0 5.68 5.0 4.74 5.0 5.72 8.0 6.89

0 10 200

5

10I

0 10 200

5

10II

0 10 200

5

10

III

0 10 200

5

10

IV

Dr. Edward Tufte

Graphical Excellence

500,000

100,000

10,000

Graphical Integrity

Blatant Lies

Source: Fox News, Dec 2011Reprinted by Washington Post

$(11,014)$0 $(11,014)

Lie

Lie Factor

Lie

Data Increase = 53%Graphical Increase = 783%

Lie Factor=14.8

Truth

1978 1979 1980 1981 1982 1983 1984 19850

5

10

15

20

25

30

Required Fuel Economy Standards:New cars built from 1978 to 1985

Data Change = 125%Graphical Change = 406%

Lie Factor=3.8

Data Change = 554%Graphical Change = 27,000% Lie Factor=48.8

Context

1955 1956275

300

325 Connecticut Traffic Deaths,Before (1955) and After(1956)

Stricter Enforcement by the PoliceAgainst Cars Exceeding Speed Limit

Before stricterenforcement

After stricterenforcement

1951 1952 1953 1954 1955 1956 1957 1958 1959225

250

275

300

325

Connecticut Traffic Deaths1951-1959

1951 1952 1953 1954 1955 1956 1957 1958 19596

8

10

12

14

16 Traffic Deaths per 100,000Persons in Connecticut, Massachusetts,

Rhode Island, and New York1951-1959

NY

MA

CTRI

Principles of Graphical Integrity

• Data Representations proportional to Data• #Dimensions in graph = #Dimensions in data• Real dollars, instead of deflated dollars• Provide context

Data-Ink

Data-Ink Ratio

=

35.9

35.9

0 1 2 3 4 5 60

20

40

60

80

100

120

140

160

0 1 2 3 4 5 60

20

40

60

80

100

120

140

160

0 1 2 3 4 5 60

20

40

60

80

100

120

140

160

0 2 4 60

40

80

120

160

0 2 4 60

40

80

120

160

0 2 4 60

40

80

120

160

Principles

• Above all else, show the data• Maximize the Data-Ink ratio, within reason• Erase non-data-ink• Erase redundant data-ink• Revise and edit

Vibrations

Vibrations

Series105

1015202530354045505560

INFLATIONUNEMPLOYMENTSHORTAGESRACELinear (RACE)CRIMEGOVT. POWERCONFIDENCEWATERGATECOMPETENCE

ISSUE AREAS

PERC

ENT

CRIT

ICA

L A

RTIC

LES

Series105

1015202530354045505560

INFL

ATI

ON

UN

EM-

PLO

YMEN

T

SHO

RTA

GES

RA

CE

CR

IME

GO

VT.

PO

WER

CO

NFI

DEN

CE

WA

TER

GA

TE

CO

MPE

TEN

CE

ISSUE AREAS

PER

CEN

T C

RIT

ICA

L A

RTI

CLE

S

Chart Junk and Ducks

Worst. Graph. Ever.

Year % Students < 25

1972 28.0

1973 29.2

1974 32.8

1975 33.6

1976 33.0

Multifunctioning Graphical Elements

Data Density

Data Density

Low Data Density

Low Data Density

Number of entries = 4Graph Area = 26.5 square inchesData Density = =.15 data entries per sq. in.

High Data Density

181 Numbers per square inch

High Data Density

1,000 Numbers per square inch

Small Multiples

Small Multiples

Small Multiples

Tufte’s Graphs

• Sparkline• Slope Graph

Sparklines

Sparklines

Slope Graph

Slope Graph

Source: The Atlantic, June 30, 2012

Takeaways

• Maintain Graphical Integrity• Maximize Data-Ink Ratio, within reason• Avoid Chartjunk and Ducks• Use Multifunctioning Graphical Elements, if

possible• Keep Labels with data• Maximize Data Density

-5-9

-21

-11

-20

-24

-30

-26

Temperature ( C )

10/10/201210/18/201210/24/201211/09/201211/14/201211/20/201211/28/201212/01/201212/06/201212/07/2012

100,000

96,000

55,000

37,000

24,000

50,000

25,00020,00012,00010,000

# Troops

10/10/201210/18/201210/24/201211/09/201211/14/201211/20/201211/28/201212/01/201212/06/201212/07/201240 90

145

180

250

275300

320

365

Distance Traveled (km)

10/10/201210/18/201210/24/201211/09/201211/14/201211/20/201211/28/201212/01/201212/06/201212/07/2012

10/1010/1

210/1

410/1

610/1

810/2

010/2

210/2

410/2

610/2

810/3

011/1

11/311/5

11/711/9

11/1111/1

311/1

511/1

711/1

911/2

111/2

311/2

511/2

711/2

912/1

12/312/5

12/70

20,000

40,000

60,000

80,000

100,000

120,000

Troops

Troops

Date

# Tr

oops

10/1010/1

210/1

410/1

610/1

810/2

010/2

210/2

410/2

610/2

810/3

011/1

11/311/5

11/711/9

11/1111/1

311/1

511/1

711/1

911/2

111/2

311/2

511/2

711/2

912/1

12/312/5

12/70

20,000

40,000

60,000

80,000

100,000

120,000

Troops

Troops

Date

# Tr

oops

10/1010/1

210/1

410/1

610/1

810/2

010/2

210/2

410/2

610/2

810/3

011/1

11/311/5

11/711/9

11/1111/1

311/1

511/1

711/1

911/2

111/2

311/2

511/2

711/2

912/1

12/312/5

12/70

20,000

40,000

60,000

80,000

100,000

120,000

Troops

Date

# Tr

oops

10/1010/1

210/1

410/1

610/1

810/2

010/2

210/2

410/2

610/2

810/3

011/1

11/311/5

11/711/9

11/1111/1

311/1

511/1

711/1

911/2

111/2

311/2

511/2

711/2

912/1

12/312/5

12/70

20,000

40,000

60,000

80,000

100,000

120,000

Date

# Tr

oops

10/10 10/17 10/24 10/31 11/7 11/14 11/21 11/28 12/50

20,000

40,000

60,000

80,000

100,000

120,000

Date

# Tr

oops

10/10 10/17 10/24 10/31 11/7 11/14 11/21 11/28 12/50

20,000

40,000

60,000

80,000

100,000

120,000

-35

-30

-25

-20

-15

-10

-5

0

Date

# Tr

oops

Tem

pera

ture

(Cel

sius)

Troops

Temperature

David GiardMCTS, MCSD, MCSE, MCDBA

blog: DavidGiard.comtv: TechnologyAndFriends.comtwitter: @DavidGiarde-mail: DavidGiard@DavidGiard.com

David’s Speaking ScheduleDate Event Location Topic(s)

Sep 15 Code Camp NYC New York, NY Effective Data Visualization

Sep 22 SQL Saturday Kalamazoo, MI Effective Data Visualization

Sep 25 SoftwareGR Grand Rapids, MI TBA

Oct 13 Tampa Code Camp

Tampa, FL TBA

Nov 7 Ann Arbor Computing Society

Ann Arbor, MI How I Learned to Stop Worrying and Love jQuery

Feb 21 Greater Lansing .NET User Group

Okemos, MI How To Use Azure Storage