nodebox

Bubble, bubble toil and trouble

Recently we wanted to show how Concentrate, our new long-tail keyword tool, could give you a view of search patterns across travel websites.As political junkies, we were inspired by this chart from our friends at the NY Times.

NY Times candidate word bubble chart

The first tool we tried, simply on principle, was Excel 2003. As expected, making a NY Times quality bubble chart in Excel 2003 is a hard problem. Here’s a draft of how far I got before giving in to label fatigue.

Excel NY Times bubble

The bubbles themselves aren’t tough, but getting the labels right is hard. I’d love to see a solution, so if any reader wants to tackle it eternal fame can be yours. Here is a CSV if you want to try.

travelpatterns.csv

Another of the tools we use at Juice is NodeBox, which we used to make this:

Concentrate pattern comparison

Here’s the code that made the graph.

The power of a programmatic approach like this is that by changing a line or two, you can get the following. Click for a larger version. Click the text for the code..

Display the largest item in each row as a red square

With great power comes a great need to exercise restraint. Otherwise you end up like these poor chaps. Must... flex... restraint... muscles...

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.