graphics

Real-World Tufte Graphics in 11 Lines of Code

Check out our followup post that describes how we created a downloadable Windows application or an excel spreadsheet you can use to create these graphics.

One of the troubles with Tufte is the frustrating infeasability of his approach to design for real people in business. One of his recommendations is to use Adobe Illustrator.

Adobe Illustrator is a big serious program that can do almost anything on the visual field (other than Photoshop an image). Most of my sparkline work was done in Illustrator. Fortunately all graphic designers and graphic design students have the program and know how to use it, so find a colleague who knows about graphic design.

Raise your hand if you have a graphic design assistant at your beck and call. I thought not.

One of the tools we use for rapid prototyping at Juice is NodeBox.

NodeBox is a Mac OS X application that lets you create 2D visuals (static, animated or interactive) using Python programming code and export them as a PDF or a QuickTime movie. NodeBox is free and well-documented.

All true. But it’s more helpful to think of NodeBox as a free Adobe Illustrator that you can program in the world’s easiest programming language. Oops, here’s the right link.

I wanted to see if we could reproduce the following graph from The Visual Display of Quantitative Information, p 158.

Tufte Current Receipts Graphic

Here’s the code. It’s 11 lines of code if you exclude entering the data and setting things like fonts and colors.

size

(

500

,

700

)

font

(

'Palatino'

);

fontsize

(

12

)

stroke

(

0.4

)

# a medium grey for lines

fill

(

0.2

)

# a slightly darker grey for text

<

h1

>

data

=

(

label

,

first

,

last

,

label

-

fudge

-

factor

)

h1

>

data

=

[

(

'Sweden'

,

46.9

,

57.4

,

0.

,

0.

),

(

'Netherlands'

,

44.0

,

55.8

,

.

3

,

0.

),

(

'Norway'

,

43.5

,

52.2

,

0.

,

0.

),

(

'Britain'

,

40.7

,

39.0

,

0.

,

0.

),

(

'France'

,

39.0

,

43.4

,

0.

,

0.6

),

(

'Germany'

,

37.5

,

42.9

,

0.

,

-

0.4

),

(

'Belgium'

,

35.2

,

43.2

,

0.

,

0.

),

(

'Canada'

,

35.2

,

35.8

,

.

8

,

0.4

),

(

'Finland'

,

34.9

,

38.2

,

-

0.5

,

0.

),

(

'Italy'

,

30.4

,

35.7

,

0.3

,

-

0.3

),

(

'United States'

,

30.3

,

32.5

,

-

0.3

,

0.

),

(

'Greece'

,

26.8

,

30.6

,

0.4

,

0.

),

(

'Switzerland'

,

26.5

,

33.2

,

-

0.2

,

0.1

),

(

'Spain'

,

22.5

,

27.1

,

0.

,

0.3

),

(

'Japan'

,

20.7

,

26.6

,

0.

,

0.

),

]

text

(

"Current Receipts of Goverment as a Percentage of "

"Gross Domestic Product, 1970 and 1979"

,

20

,

70

,

width

=

215

)

text

(

"1970"

,

WIDTH

*.

28

,

HEIGHT

*

0.03

)

text

(

"1979"

,

WIDTH

*.

68

,

HEIGHT

*

0.03

)

def

ypos

(

val

):

# calculate a vertical position by scaling between 10% and 90%

# of the height of the image

return

HEIGHT

*

(

0.9

-

0.8

*

(

val

-

minval

)

/

(

maxval

-

minval

))

<

h1

>

find

the

minimum

and

maximum

values

in

the

range

h1

>

alldata

=

[

d

[

1

]

for

d

in

data

]

+

[

d

[

2

]

for

d

in

data

]

minval

,

maxval

=

min

(

alldata

),

max

(

alldata

)

for

label

,

start

,

end

,

startfudge

,

endfudge

in

data

:

align

(

RIGHT

)

text

(

label

,

0

,

ypos

(

start

+

startfudge

)

+

4

,

width

=

0.25

*

WIDTH

)

text

(

"

%0.1f

"

%

start

,

0.25

*

WIDTH

,

ypos

(

start

+

startfudge

)

+

4

,

width

=

0.07

*

WIDTH

)

align

(

LEFT

)

text

(

label

,

WIDTH

*.

75

,

ypos

(

end

+

endfudge

)

+

4

)

text

(

"

%0.1f

"

%

end

,

0.68

*

WIDTH

,

ypos

(

end

+

endfudge

)

+

4

,

width

=

0.07

*

WIDTH

)

line

(

WIDTH

*.

33

,

ypos

(

start

),

WIDTH

*.

67

,

ypos

(

end

))

Here’s what the result looks like.

Tufte Current Receipts Graphic with NodeBox

We have some great followups to this planned for next week. We’ll reimplement this code with the Python Imaging Library, which will open things up for Windows users. We have some great plans for mashing these graphics up with our just released Google Analytics API.

Check out our followup post that describes how we created a downloadable Windows application you can use to create these graphics.

Analytics Roundup: TIps for showing, sharing, communicating

Developer’s Guide - Google Chart API - Google Code
Beautiful stuff, particularly the Venn diagram.

Align Journal - BI Worst Practices
We often see articles on BI "Best Practices" here is an article telling us what NOT to do.

flot - Google Code
Attractive Javascript plotting for jQuery.

ongoing · On Communication
Interesting blog post about how different forms of communication rank for immediacy, lifespan, and audience reached.

The Excel Magician: 70+ Excel Tips and Shortcuts to help you make Excel Magic : Codswallop

SlideShare
Source for presentation ideas.

Analytics Roundup: infographics and visualizations

Visualization for the Masses: Information Graphics and the New York Times
He explained how a 30-person team creates the impressive infographics and visualizations we see on the newspaper every week.

information r/evolution movie
This video explores the changes in the way we find, store, create, critique & share information, a nice video illustration of some of Shirkey’s essays.

demographics by ZIP Code - ZIPskinny
Colorful visualization comparing demographic attributes of zip codes.

Analytics Roundup

Nielsen/NetRatings’ August social media numbers: Not much change
Interesting post I stumbled on related to Nielsen’s web analytics service. Several references to "juicy" or "juiciness".

Inbox Zero
Merlin Mann on cleaning your e-mail inbox.

The New York Times > Home Prices Across the Nation
The most interesting / important part may be the talking head in the lower left, should you be annotating your reports with video?

Introduction to Statistical Thought—free ebook
1) explains how statisticians think about data
2) introduces modern statistical computing
3) as lots of real examples

Analytics Roundup: Chicken presentation and so much more

Programming Collective Intelligence
Pulling information from community contributed data.

Videos that can change your organization
Top ten business videos on YouTube.

The Encyclopedia of Business Cliches

UC Berkeley CS160 User Interfaces Fall 06
Course readings and student notes.

Language Log: Chicken: the PowerPoint Presentation
The presentation you dare not give.

Prometheus Meets the Enterprise Management System
I laughed, I cried, I laughed again.

Diagrams: Tools and Tutorials

Data Visualization: Modern Approaches
A grab bag of ideas.

fontblog : Introducing Ambiguity
A typographic symbol to indicate ambiguity, compare to the typographic mark lol which indicates stupidity.

Whimsley: The Netflix Prize: 300 Days Later

Process Trends Website
Good excel charting and visualization tips.

BusinessWeek: Who Participates And What People Are Doing Online
A simple and fairly effective use of square pies.

Analytics Roundup: Fixing Excel and dashboards

Ask E.T.: Cleaning up Excel’s poshlust graphics
Discussion of the Chart Cleaner along with other approaches to make Excel look good.

The Universe of Discourse : Excessive precision
Humorous take on one of the ways excessive precision can creep into reports.

Data Visualization: Intelligent Dashboard Design
The third in a series of columns that feature the winners of DM Review’s 2005 data visualization competition.