Supporting blog post: http://blog.intercom.io/data-visualisation-in-web-apps/ This talk was most recently presented at WebVisions Portland #wvpdx

1. Data visualisations and Dashboard Design

2. Des Traynor
@destraynor,
COO of @intercom

3. TRO
INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

4. We are drowning in data.

5. Better than Adaptable
text
IT’S HARD TO MAKE VISUALS
Useful Meaningful
Readable

6. “ Be clear first and clever
second. If you have to throw
one of those out, throw out
clever.
— Jason Fried

7. VISUALS CAN CONFUSE

14. Visualising the Gulf Oil Spill...

16. O k a y , l ets t r y w i t h fo ot b a l l . . .

17. 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.

18. 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.

19. The “anti-infographic
movement”
No data was harmed in the
making of these info-
graphics

21. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

22. WHO ARE WE DESIGNING FOR?

23. WHAT ROLE?
The role defines the level of abstraction required.

24. CEO Level Detail
Strategic view
Focus on the long term
High level overview
Simple summary

25. Analyst role
Query driven analysis
Precision required
Emphasis on trends,
and correlations

26. Operations/Logistics
Focus on current status
Issue & Event driven
e.g. Alerts, spikes, trouble

27. WHAT DEPARTMENT?
The department defines the domain knowledge

28. SALES DEPARTMENT
Leads, conversions, avg. value per sale, etc

29. MARKETING DEPARTMENT
Impressions, loyalty, awareness, share

30. NETWORK & IT
Issues, tickets, lead time, open cases, uptime

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

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

33. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

34. # Unit sales
$ Sales today Avg $ per sale
Us vs Competitor
WHICH OF THESE?
Avg. $ per This period vs last
customer period
Total this % Change Popular
month in sales products

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

36. 6 THINGS TO COMMUNICATE

37. 1. COMMUNICATE A SINGLE FIGURE
Used when context is obvious, precision is required, and
past/future is irrelevant to user.
Examples: BALANCE
AA clerk with a waiting list
Checking bank balance $23.00
BALANCE
Sys admin checking current status
$11.32
Notes: BALANCE
Single numbers can have states
$11.32

38. 2. SINGLE FIGURE WITH CONTEXT
“How are we doing lately? Any problems on
horizon?”
Examples: READERS CHANGE
12,247 0.32%
How were this months sales?
Is the network performing well?
Hows our user figures looking? READERS CHANGE
15,231 9.52%
Notes:
Spark-lines can save space, and

39. 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

40. GOOD LINE CHART
50
40
30
20
10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Work best with precise data (e.g. day to day)

41. BA D L I N E C H A R T
50
40
30
20
10
Jan Feb Mar Apri May

42. BA R C H A R T
50
40
30
20
10
Jan Feb Mar Apri May
Never imply precision you don’t have.

43. BA R C H A R T
50
40
30
20
10 2nd
Takeaway
Jan Feb Mar Apri May
Never imply precision you don’t have.

44. 4. ANALYSIS OF PERIOD, WITH TARGET
Did we hit our sales figures?
Are we fulfilling our five nines quota?
Examples:
Are sales were they should be?
Are all our employees performing okay?
Is our response time better than industry standard?

45. BAD LINE CHART
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
Actual
Target

46. 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...

47. 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

48. FOCUS ON THE DELTA
20%
10%
0%
-10%
-20%
-30%
-40%
Jan Feb Mar April May June July August September October November December
Same data, big difference

49. BAD LINE CHART
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
This guy is getting a bonus

50. FOCUS ON THE DELTA
20%
10%
0%
-10%
-20%
-30%
-40%
Jan Feb Mar April May June July August September October November December
This guy is getting fired.

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

52. signup
4 5 6 7 8 9 10 11
21% 20% 18% 18% 17% 17% 17% 17%
18% of January sign ups
22% 20% 18% 17% are still 7% 7%
active in July 16%
23% 21% 18% 18% 17% 17%
23% 21% 17% 15% 16%
28% 24% 22% 18%
24% 23% 19%
27% 23%
32%

53. MAR 100% 29% 25% 23% 21% 18%
APR 100% 32% 26% 23% 21% 17%
MAY 100% 33% 33% 28% 24% 22%
JUN 100% 34% 28% 24% 23% 19%
JUL 100% 35% 31% 27% 23%
AUG 100% 40% 35% 32%
SEP 100% 41% 38%
OCT 100% 48%
NOV 100%
DEC
Showing: % of total % of prev. month

54. How many stick around for a second month?
35%
32.4%
30%
25%
20%
15%
10%
5%
Signed
January February March April
up:

55. Retention using a cycle plot
35%
30%
25%
20%
15%
10%
5%
0%
Month 2 Month 3 Month 4 Month 5
Retention Retention Retention Retention

56. 35%
30%
25%
Signups in April 2011
26% Still Active in June
20% 101 retained - 290 lost.

57. 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?

58. BAD PIE CHART
America
Ireland
U.K.
Canada
Australia
Spain
France

59. YOU COULD ADD THE DATA...
America
9% 15%
Ireland
15%
U.K.
23%
9%
Canada
11%
18% Australia
Spain
France

60. SORTED BAR CHART
30.000%
22.500%
15.000%
7.500%
0%
Ireland U.K. America Spain Canada Australia

61. LYING WITH GROUPINGS
The 100K to 200k is where we need to tax!

62. LYING WITH GROUPINGS
Or maybe not...

63. L Y I N G W I T H G RO U P I N G S
O! "#$% &'?
http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor

64. LYING WITH ROTATIONS

65. LYING WITH DIMENSIONS

66. BAD: AREA PLOT
B
A
E
D
C

67. BAD: AREA PLOT
B
A
E
D
C
Which would you pick?

68. BAD: AREA PLOT
A
- B
=
How “big” is this?

69. BAD: AREA PLOT
B
A
E
D
C

70. BAD UNIT PLOT

71. 5. BREAKDOWN OF A VARIABLE
“Bar charts aren’t sexy, but they rely on an
innate skill, following a line. ”

72. If you had to fight one of them...

73. 4th
Takeaway
If you had to fight one of them...

74. 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?

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

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

77. STACKED BAR CHART
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
A($!&)* s U . K &. d o n e ?
How ha +$,-$" . J/01?

78. LYING WITH DIMENSIONS
70000
52500
35000
Jan
Feb 17500
Mar
April
May
June
July
August
September
October 0
November
December
Lots more yellow pixels here now...

79. LET’S TRY A LINE CHART
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
Ireland U.K America

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

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

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

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

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

85. INTERACTIVE, REMEMBER?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
You can adapt based on Interctions

86. STACKED BAR CHART
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
Why is it so hard to follow the U.K here?

87. If it was easy, we’d all be great at billiards

92. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

93. Visuals communicate 2 things.
Category Quantity

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

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

96. Line length Line width Colour intensity
WAYS TO VISUALISE QUANTITY
Size Quantity Speed5th
Takeaway

97. Le type Colr Spe
HOW TO VISUALISE CATEGORY
Locn

98. HOW TO USE ALL THIS?
You’ve just taken over a hotel. You’re
handed the accounts. Excel hell. Where
do we start?

99. Q: Are we making any money?
Profit is the delta between costs and
revenue. Let’s see that for the year.
Profit and loss
€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

100. Q: What makes us money?
Let’s compare the percentage of revenue
generated by each category.
50%
40%
30%
20%
10%
Rms Wdgs B Gym/Spa Rtaurt Buss Cfc

101. Q: What sort of prices do we charge per room?
Let’s look at the price range the median value
€175
€150
€100
€75
€50
King suite Junior Suite Deluxe Room Standard Room Hostel

102. Design to support analyst queries...
MIDWEST HOTELZ
REPORT TYPE ROOM TYPE PERIOD GUEST TYPE
REVENUE ROOMS & EXTRAS KING SUITES LAST YEAR ALL GUESTS
PROFIT
LOYALTY
INCIDENTALS
GUEST REPORT
WEDDINGS
CONFERENCES

103. Another example.
What the hell is going on in Europe?

109. Credit: S. Few & Tom Watkins

110. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

111. A WORD ON CONTEXT

112. This is a car.

113. This is a Nuclear power station.

114. This is a space shuttle

115. This is none of those things...

116. Chances are this is where your user is

117. The point is, we’re not
always fighting for
attention.

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

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

120. Let’s take 3 points from Tufte

121. Chart junk: the stuff that doesn’t change
when the data changes

122. Data Ink Ratio: what percentage of your ink
shows data

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

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

125. Smallest Effective Difference: the least you
can do to highlight
These are far quieter.

126. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
G r a d i e n tInception a d o w s , c o l o r s , g r i d l i n e s . 9A l l 72.50 n - c o n t e n t
s, sh no
The girl who kicked the hornet's nest 15 54.05

127. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception
L e t ’ s k i l l t h e g r a d i e n t9s 72.50
The girl who kicked the hornet's nest 15 54.05

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

129. 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

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

131. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
L e t ’ s a d d Inceptionn e c e s s a r y d i f f e r e n c e s
the 9 72.50
The girl who kicked the hornet's nest 15 54.05

132. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
F r o m h e r eInception c o u l d b e g i n t o s t y l e
we 9 72.50

133. This isn’t about visual design

134. SALES REPORT MAY 2012
ORDERS ACCOUNTS SITE
12,247 0.4% 2,323 1.4% PAYMENT
FULFILLMENT
Revenue per product
40
30
20
10
e-goods Books Electronics Appliances Other Magazines
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50

135. SALES REPORT MAY 2012
ORDERS ACCOUNTS
12,247 0.4% 2,323 1.4% PA
FULFIL
Revenue per product
40

136. 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.

137. 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.
6th
Takeaway

138. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

139. 1. VISUALS SHOULD SAY SOMETHING
The worst visualisations are the
ones you look at just think “Heh.”

140. Looks great, but makes very little sense.

141. 2. DASHBOARDS & VISUALS EVOLVE
Revisit them as your data increases

142. VANITY DASHBOARDS

143. START WITH THE BASICS

144. ADD INSIGHT AS YOU NEED IT

145. ADD A YEARLY VIEW, AFTER A YEAR

146. INCLUDE INSIGHTS & ACTIONS

147. CONSIDER ADDING PROJECTIONS

148. GET INSIGHTS INTO ENGAGEMENT
What types of users do we have?

149. INSIGHTS INTO ENGAGEMENT
2 main clusters it appears.

150. INSIGHTS INTO BUSINESS MODELS
How’s that Freemium model working out for us?

151. 3. PRESENTING AN ARGUMENT
It’s okay to add visuals if your goal is more than
the factual presentation of information

152. The world is not filled 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

153. 15
10
5
0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Get your data first.

155. Bring the fancy shit afterwards.

156. 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-find bathrooms. But nobody
would be there. They would all be down
the street at Coyote Ugly pouring beer on
each other.
— Joel Spolsky

157. 4. THEY’RE NOT ALL FIRST TIMERS
Like chess players understand chessboards,
people can learn to understand visualisations

158. This isn’t immediately understandable for everyone.

159. For those used to it, it’s perfect.

162. 5. IMPLEMENTATION TOOLS
HTML for the win.

164. Highcharts is excellent and worth the money

165. Flotr2 is new, but popular

166. D3 is Immense.

167. D3 is Immense.

168. Rickshaw (based on D3) is powerful

169. HTML Charting Libraries
1. Highcharts
2. D3
3. Rickshaw
4. Flotr 2

170. HTML Charting Libraries
1. Highcharts
2. D3
3. Rickshaw
4. Flotr 2
7th
Takeaway

171. 6. REFERENCES
Where can I read more?

172. Books
Stephen Few - “Dashboard Design” & “Now you see it”
Brian Suda - “Designing with Data”
Edward Tufte - The first two.
Blogs
Stephen Few -> http://perceptualedge.com
Intercom (me) -> http://blog.intercom.io

173. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC

175. Thanks everyone! – @destraynor