Des Traynor
September 05, 2012
8.9k

# From Data To Insight

An updated version of the previous "Data Visualisation & Infographics" talk, this contains numerous new examples, and some additional closing points.

## Des Traynor

September 05, 2012

## Transcript

MAKE VISUALS
6. ### Be clear ﬁrst and clever second. If you have to

throw one of those out, throw out clever. — Jason Fried “

10. ### If the Gulf of Mexico - the 7th largest body

of water in the world, containing approximately 660 quadrillion gallons of water (that's 660 with 15 zeros) - was represented by Cowboys Stadium in Dallas - the largest domed stadium in the world - how would the spill stack up? In this example, the amount of oil spilled - if the Gulf of Mexico was the size of Cowboys Stadium - would be about the size of a 24 ounce can of beer. Cowboys stadium has an internal volume of approximately 104 million cubic feet, compared to the just over 50 cubic inches of volume in a 24-ounce can. Just like the can, the spilled oil represents only . 00000002788% of the liquid volume present in the Gulf of Mexico, although as the oil is dispersed, the amount of water affected becomes substantially greater.
11. ### If the Gulf of Mexico - the 7th largest body

of water in the world, containing approximately 660 quadrillion gallons of water (that's 660 with 15 zeros) - was represented by Cowboys Stadium in Dallas - the largest domed stadium in the world - how would the spill stack up? In this example, the amount of oil spilled - if the Gulf of Mexico was the size of Cowboys Stadium - would be about the size of a 24 ounce can of beer. Cowboys stadium has an internal volume of approximately 104 million cubic feet, compared to the just over 50 cubic inches of volume in a 24-ounce can. Just like the can, the spilled oil represents only . 00000002788% of the liquid volume present in the Gulf of Mexico, although as the oil is dispersed, the amount of water affected becomes substantially greater.
12. ### The “anti-infographic movement” No data was harmed in the making

of these info- graphics

16. ### CEO Level Detail •Strategic view •Focus on the long term

•High level overview •Simple summary
17. ### •Query driven analysis •Precision required •Emphasis on trend & and

correlations Analyst role

23. ### SALES MARKETING CUSTOMER SUPPORT MANAGEMENT * Satisfaction Rating * Trend

per quarter * Comparison with competitors ANALYST * My Active leads * Value per lead * Progress towards target OPERATIONS * Active campaigns * Current CPM/CPC * Landing page Role + Department = Information needed
24. ### SALES MARKETING CUSTOMER SUPPORT MANAGEMENT * Satisfaction Rating * Trend

per quarter * Comparison with competitors ANALYST * My Active leads * Value per lead * Progress towards target OPERATIONS * Active campaigns * Current CPM/CPC * Landing page Role + Department = Information needed 1st Takeaway

26. ### \$ Sales today # Unit sales Avg \$ per sale

This period vs last period Us vs Competitor Total this month Popular products % Change in sales Avg. \$ per customer WHICH OF THESE?
27. ### WHICH OF THESE? TOTAL SALES \$12,240.65 CHANGE 5.32% Top grossing

items % TOTAL REV. 10 20 30 40 100 200 300 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 400 500 1 2 3 4 5 6 7 8 9 10 Top selling items Item name Unit sales % of total Oak tree (special edition) 803 16% Pet Kitten 607 12% Skyscraper (high rise) 511 11% Sycamore tree 430 9% Dancing disco. 203 4% Other items 2495 52% Change 11.52% 100% 1.52% 5.23% 1.20% -- 100 200 300 400 500 Ybarra Bow Broadsword Dagger Eclipse Mace BattleAxe Magic wand Crossbow Poison Revenue 5 10 15 20 25 Unit sales

29. ### 1. COMMUNICATE SINGLE FIGURE Used when context is obvious, precision

is required, and past/future is irrelevant to user. BALANCE \$23.00 BALANCE \$11.32 BALANCE \$11.32 Examples: AA clerk with a waiting list Checking bank balance Sys admin checking current status Notes: Single numbers can have states (good,bad
30. ### 2. SINGLE FIGURE & CONTEXT “How are we doing lately?

Any problems on horizon?” Examples: How were this months sales? Is the network performing well? Hows our user ﬁgures looking? Notes: Spark-lines can save space, and provide context READERS 12,247 CHANGE 0.32% READERS 15,231 CHANGE 9.52%
31. ### 3. ANALYSIS OF A PERIOD “Show me all the key

moments this month” Examples: Looking for patterns in longer data sets Looking ahead based on current data Comparison with previous period
32. ### 10 20 30 11 12 13 14 15 16 17

18 19 20 21 22 23 24 25 26 27 28 29 30 31 40 50 1 2 3 4 5 6 7 8 9 10 Work best with precise data (e.g. day to day) GOOD LINE CHART
33. ### BAD LINE CHART 0 12.5 25 37.5 50 2001 2002

2003 2004 2005 This implies lots of things that aren’t necessarily true
34. ### GOOD BAR CHART Never imply precision you don’t have. 0

12.5 25 37.5 50 2001 2002 2003 2004 2005
35. ### GOOD BAR CHART Never imply precision you don’t have. 2nd

Takeaway 0 12.5 25 37.5 50 2001 2002 2003 2004 2005

up, right?
37. ### \$3.00 \$3.25 \$3.50 \$3.75 \$4.00 Feb April Jun Aug Oct

Jan 3.14 3.76 3.6 3.58 3.41 3.37 Excellent, the cost of gas has been decreasing all year! MANIPULATING LINE CHARTS
38. ### \$0 \$1.00 \$2.00 \$3.00 \$4.00 Feb April Jun Aug Oct

Jan MANIPULATING LINE CHARTS Changes in gas prices aren’t that big a deal
39. ### BAD BAR CHART Always watch the axes. If they don’t

start at zero, someone is up to something dodgy
40. ### 0 10 20 30 40 Now Jan 1 2012 SAME

DATA, DIFFERENT STORY
41. ### 4. ANALYSIS OF PERIOD+ TARGET Did we hit our sales

ﬁgures? Are we fulﬁlling our ﬁve nines quota? Examples: Are sales were they should be? Are all our employees performing okay? Is our response time better than industry standard?
42. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December Actual Target BAD LINE CHART
43. ### A common error in visualisation is leaving all the processing

to the reader. At a glance it looks like we’re doing okay here. In this case, we’re talking about a delta, but we’re not showing the delta...
44. ### A common error in visualisation is leaving all the processing

to the reader. At a glance it looks like we’re doing okay here. In this case, we’re talking about a delta, but we’re not showing the delta... 3rd Takeaway
45. ### -40% -30% -20% -10% 0% 10% 20% Jan Feb Mar

April May June July August September October November December FOCUS ON THE DELTA Same data, big difference
46. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December BAD LINE CHART This guy is getting a bonus
47. ### -40% -30% -20% -10% 0% 10% 20% Jan Feb Mar

April May June July August September October November December FOCUS ON THE DELTA This guy is getting ﬁred.
48. ### JUL JUN MAY APR MAR FEB JAN NOV OCT SEP

AUG DEC 29% 100% 23% 38% 7% 28% 24% 100% 7% 100% 21% 100% 20% 23% 24% 31% 17% 17% 41% 27% 17% 21% 35% 40% 24% 34% 18% 18% 16% 100% 33% 22% 23% 23% 17% 33% 17% 16% 25% 18% 100% 15% 17% 21% 35% 100% 18% 26% 32% 20% 100% 26% 17% 100% 32% 19% 18% 100% 18% 17% 100% 22% 28% 1 2 3 4 5 6 7 8 9 10 11 12 48% Showing: % of total % of prev. month Highlight drops over: 5% A full cohort analysis 24% 23% % Active in months after signup Sign Up 18% of January sign ups are still active in July
49. ### 9% 23% 38% 7% 28% 24% 7% 21% 20% 23%

24% 31% 17% 17% % 27% 17% 21% 35% 0% 24% 4% 18% 18% 16% 33% 22% 23% 23% 17% 3% 17% 16% 25% 18% 15% 17% 21% 5% 18% 6% 32% 20% 26% 17% 2% 19% 18% 18% 17% 22% 28% 2 3 4 5 6 7 8 9 10 11 12 % 23% months after signup 18% of January sign ups are still active in July
50. ### JUL JUN MAY APR MAR NOV OCT SEP AUG DEC

29% 23% 38% 28% 24% 100% 100% 21% 100% 23% 24% 31% 41% 27% 35% 40% 34% 100% 33% 23% 23% 33% 25% 18% 100% 15% 17% 21% 35% 100% 18% 32% 100% 26% 100% 32% 19% 18% 100% 22% 28% 48% Showing: % of total % of prev. month
51. ### How many stick around for a second month? 35% 30%

25% 20% 15% 10% 5% January February March April 32.4% Signed up:
52. ### Retention using a cycle plot 35% 30% 25% 20% 15%

10% 5% 0% Month 2 Retention Month 3 Retention Month 4 Retention Month 5 Retention
53. ### 35% 30% 25% 20% Signups in April 2011 26% Still

Active in June 101 retained - 290 lost.
54. ### 5. BREAKDOWN OF A VARIABLE “What age groups are buying

our stuff?” “What countries are we big in?” Examples: Who are our customers? Whats our awareness like in each demographic? What browsers are people using these days?

56. ### America Ireland U.K. Canada Australia Spain France YOU COULD ADD

THE DATA... 9% 15% 9% 11% 18% 23% 15%
57. ### 0% 7.500% 15.000% 22.500% 30.000% Ireland U.K. America Spain Canada

Australia SORTED BAR CHART

need to tax!

you pick?

this?

68. ### 5. BREAKDOWN OF A VARIABLE “Bar charts aren’t sexy, but

they rely on an innate skill, following a line. ”

71. ### 6. BREAKDOWN OVER TIME “How has the composition changed over

the last year?” Examples: How has the browser market changed? Has our revenue sources shifted recently?
72. ### 0 17500 35000 52500 70000 Jan Feb Mar April May

June July August September October November December Ireland U.K America STACKED BAR CHART
73. ### 0 17500 35000 52500 70000 Jan Feb Mar April May

June July August September October November December STACKED BAR CHART A(\$!&)* +\$,-\$" &. J/01? America peaked in July?
74. ### 0 17500 35000 52500 70000 Jan Feb Mar April May

June July August September October November December STACKED BAR CHART A(\$!&)* +\$,-\$" &. J/01? How has U.K. done?
75. ### 0 17500 35000 52500 70000 Jan Feb Mar April May

June July August September October November December LYING WITH DIMENSIONS Lots more yellow pixels here now...
76. ### LET’S TRY A LINE CHART 0 12500 25000 37500 50000

Jan Feb Mar April May June July August September October November December Ireland U.K America
77. ### LINE CHART OF SAME DATA? 0 12500 25000 37500 50000

Jan Feb Mar April May June July August September October November December A(\$!&)* #. 23\$ 4+. 5K .\$6\$! 73*.8\$"? Same data. Different story.
78. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December Ireland U.K America BAR CHARTS AGAIN?
79. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December BAR CHARTS AGAIN?
80. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December BAR CHARTS AGAIN?
81. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December BAR CHARTS AGAIN?
82. ### 0 12500 25000 37500 50000 Jan Feb Mar April May

June July August September October November December INTERACTIVE, REMEMBER? You can adapt based on interactions
83. ### 0 17500 35000 52500 70000 Jan Feb Mar April May

June July August September October November December STACKED BAR CHART Why is it so hard to follow the U.K here?

88. ### WAYS TO VISUALISE QUANTITY Line length Line width Colour intensity

Size Quantity Speed
89. ### WAYS TO VISUALISE QUANTITY Line length Line width Colour intensity

Size Quantity Speed
90. ### WAYS TO VISUALISE QUANTITY Line length Line width Colour intensity

Size Quantity Speed 5th Takeaway

Takeaway
93. ### You’ve just taken over a hotel. You’re handed the accounts.

Excel hell. Where do we start? HOW TO USE ALL THIS?
94. ### Q: Are we making any money? Proﬁt is the delta

between costs and revenue. Let’s see that for the year. -€9,000.00 -€6,750.00 -€4,500.00 -€2,250.00 €0 €2,250.00 €4,500.00 €6,750.00 €9,000.00 Jan Feb Mar April May June July August September October November December Profit and loss
95. ### Q: What makes us money? Rooms Weddings Conferences Businesses Restaurant

Bar Gym/Spa 10% 20% 30% 40% 50% Let’s compare the percentage of revenue generated by each category.
96. ### King suite Junior Suite Standard Room Hostel €50 €75 €100

€150 €175 Deluxe Room Q: What sort of prices do we charge per room? Let’s look at the price range the median value, with a Pareto plot €200
97. ### REPORT REVENUE TYPE ROOMS & EXTRAS ROOM TYPE KING SUITES

PERIOD LAST YEAR Overview | Advanced REPORT TYPE MIDWEST HOTELZ PROFIT LOYALTY INCIDENTALS GUEST REPORT WEDDINGS CONFERENCES GUEST TYPE ALL GUESTS Design to support analyst queries... Drill down, Date Selector, Saved Filters, Daily reports etc

108. ### Top products Product Orders \$ Revenue Books Electronics Magazines Appliances

e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON
109. ### Top products Product Orders \$ Revenue Books Electronics Magazines Appliances

e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON Let’s use this strawman

changes

114. ### Smallest Effective Difference: the least you can do to highlight

These colours would get very loud. Unnecessarily so.
115. ### Smallest Effective Difference: the least you can do to highlight

These are far quieter.
116. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Inception 9 72.50 The girl who kicked the hornet's nest 15 54.05 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON Gradients, shadows, colors, gridlines. All non-content
117. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Inception 9 72.50 The girl who kicked the hornet's nest 15 54.05 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON Let’s kill the gradients
118. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Inception 9 72.50 The girl who kicked the hornet's nest 15 54.05 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON Let’s kill the colours
119. ### HTML has a <strong>tag but no <weak> tag. As a

result, we forget to think about what’s less important on the screen. — Ryan Singer
120. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Inception 9 72.50 The girl who kicked the hornet's nest 15 54.05 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON Let’s adjust the shading.
121. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Inception 9 72.50 The girl who kicked the hornet's nest 15 54.05 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON Let’s add the necessary differences
122. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Inception 9 72.50 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product Sales Report Jan 2012 ORDERS 12,247 CHANGE 0.32% ACCOUNTS 7,343 CHANGE 4.32% SITE LIVE PAYMENT LIVE FULFILLMENT ON
123. ### Top products Product Orders \$ Revenue The girl with the

dragon tattoo 11 88.50 Books Electronics Magazines Appliances e-goods Other 10 20 30 40 Revenue per product SALES REPORT MAY 2012 ORDERS 12,247 SITE PAYMENT FULFILLMENT 0.4% ACCOUNTS 2,323 1.4%
124. ### 40 Revenue per product SALES REPORT MAY 2012 ORDERS 12,247

SITE PAYMENT FULFILLMENT 0.4% ACCOUNTS 2,323 1.4%
125. ### 4 Points on Visual Design 1. Remove Chart Junk 2.

Maximise your data ink ratio 3. Use the “least effective difference” to highlight 4. Remember to quieten down less important parts.
126. ### 4 Points on Visual Design 1. Remove Chart Junk 2.

Maximise your data ink ratio 3. Use the “least effective difference” to highlight 4. Remember to quieten down less important parts. 7th Takeaway

128. ### 1. VISUALS SHOULD SAY SOMETHING The worst visualisations are the

ones you look at just think “Heh.”

130. ### H\$1 8&90, I -.#: 1#4! )#(+*.1 &% 8#&.8 ;*<-!4+' *."

,=0 1#4! %\$!6\$!% *!\$ "#:., ;4' 73\$7- #4' 23\$%\$ %:\$\$' 8!*>3&)%...

increases

have?

for us?
141. ### 3. PRESENTING AN ARGUMENT It’s okay to add visuals if

your goal is more than the factual presentation of information
142. ### The world is not ﬁlled with professional statisticians. Many of

us would like a quick glance just to get a good idea of something. If a graph is made easier to understand by such irrelevancies as a pile of oil cans or cars, then I say all the better. — Don Norman
143. ### 0 5 10 15 J Feb M Apr May Jun

Jul Aug Sep Oct Nov Dec Get your data first.

145. ### Usability is not everything. If usability engineers designed a nightclub,

it would be clean, quiet, brightly lit, with lots of places to sit down, plenty of bartenders, menus written in 18-point sans-serif, and easy-to-ﬁnd bathrooms. But nobody would be there. They would all be down the street at Coyote Ugly pouring beer on each other. — Joel Spolsky
146. ### 4. THEY’RE NOT ALL FIRST TIMERS Like chess players understand

chessboards, people can learn to understand visualisations

156. ### HTML Charting Libraries 1. Highcharts 2. D3 3. Rickshaw 4.

Flotr 2 5. selection.datavisualization.ch
157. ### HTML Charting Libraries 1. Highcharts 2. D3 3. Rickshaw 4.

Flotr 2 5. selection.datavisualization.ch 8th? Takeaway

159. ### S3#: "*'* 23*'’% (\$*.&.8?/0, .@ A4%' “\$*%1 '# B."” V&%4,0&%\$

'# )#((4.&)*'\$%, .@ '# +#%' #. D!CDDE0\$ I. F3#G, &'( #)' *+,)( -!(!, #)'. &'( #)' -!(! *+,)(. R+,)(? L!"#\$%...

161. ### Books Stephen Few - “Dashboard Design” & “Now you see

it” Edward Tufte - “The visual display of quantitative information” Brian Suda - “Designing with Data” - available at designingwithdata.com Blogs Stephen Few -> http://perceptualedge.com Intercom (me) -> http://blog.intercom.io These slides will be on http://speakerdeck.com/u/destraynor, I’ll tweet when they’re live.