Des Traynor
October 11, 2011
51k

# Designing Dashboards & Data Visualisations in Web Apps

Supporting blog post: http://blog.intercom.io/data-visualisation-in-web-apps/

I have given variations of this presentation at conferences such as WebVisions 12, Beyond Tellerand, MIX 11, MidwestUX.

You can find a video recording of it at
http://vimeo.com/34784156
http://channel9.msdn.com/Events/MIX/MIX11/OPN04

October 11, 2011

## Transcript

1. Data visualisations and Dashboard Design

2. Des Traynor
@destraynor,
COO of @intercom

3. TOPIC
TIME REMAINING
INTRO
CLOSING POINTS
FIN
TRO

4. We are drowning in data.

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

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

7. VISUALS CAN CONFUSE

8. Visualising the Gulf Oil Spill...

9. Okay, lets try with football...

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

13. TOPIC
TIME REMAINING
INTRO
CLOSING POINTS
FIN

14. WHO ARE WE DESIGNING FOR?

15. WHAT ROLE?
The role deﬁnes the level of abstraction required.

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

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

18. Operations/Logistics
Focus on current status
Issue & Event driven

19. WHAT DEPARTMENT?
The department deﬁnes the domain knowledge

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

21. MARKETING DEPARTMENT
Impressions, loyalty, awareness, share

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

23. SALES MARKETING
CUSTOMER
SUPPORT
MANAGEMENT
* Satisfaction Rating
* Trend per quarter
* Comparison with
competitors
ANALYST
* 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
* Progress towards
target
OPERATIONS
* Active campaigns
* Current CPM/CPC
* Landing page
Role + Department = Information needed
1st
Takeaway

25. TOPIC
TIME REMAINING
INTRO
CLOSING POINTS
FIN

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

28. 6 THINGS TO COMMUNICATE

29. 1. COMMUNICATE A 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
Notes:
Single numbers can have states

30. 2. SINGLE FIGURE WITH 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
12,247
CHANGE
0.32%
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. 10
20
30
40
50
Jan Feb Mar Apri May

34. 10
20
30
40
50
Jan Feb Mar Apri May
BAR CHART
Never imply precision you don’t have.

35. 10
20
30
40
50
Jan Feb Mar Apri May
BAR CHART
Never imply precision you don’t have.
2nd
Takeaway

36. 4. ANALYSIS OF PERIOD, WITH 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?

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

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

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

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

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

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

43. 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
are still active in July

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

45. 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%
100%
17%
21%
35%
100%
32%
100%
26%
100%
32%
19%
18%
100%
22%
28%
48%
Showing: % of total % of prev. month

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

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

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

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

50. America
Ireland
U.K.
Australia
Spain
France

51. America
Ireland
U.K.
Australia
Spain
France
9%
15%
9%
11%
18%
23%
15%

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

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

54. LYING WITH GROUPINGS
Or maybe not...

55. O! "#\$% &'?
http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor
LYING WITH GROUPINGS

56. LYING WITH ROTATIONS

57. LYING WITH DIMENSIONS

D
C
B
A
E

D
C
B
A
E
Which would you pick?

60. A B
- =
How “big” is this?

D
C
B
A
E

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

80. TOPIC
TIME REMAINING
INTRO
CLOSING POINTS
FIN

81. Visuals communicate 2 things.
Category Quantity

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

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

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

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

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

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

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

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

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

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

92. Credit: S. Few & Tom Watkins

93. TOPIC
TIME REMAINING
INTRO
CLOSING POINTS
FIN

94. A WORD ON CONTEXT

95. This is a car.

96. This is a Nuclear power station.

97. This is a space shuttle

98. This is none of those things...

99. Chances are this is where your user is

100. The point is, we’re not
always ﬁghting for
attention.

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

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

103. Let’s take 3 points from Tufte

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

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

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

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

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

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

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

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

112. HTML has a
tag but no
tag.
As a result, we
forget to think
important on the
screen.
— Ryan Singer

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

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

115. 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
From here we could begin to style

116. This isn’t about visual design

117. 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%

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

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

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

121. TOPIC
TIME REMAINING
INTRO
CLOSING POINTS
FIN
CLOSING POINTS

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

123. Looks great, but makes very little sense.

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

125. VANITY DASHBOARDS

127. ADD INSIGHT AS YOU NEED IT

128. ADD A YEARLY VIEW, AFTER A YEAR

129. INCLUDE INSIGHTS & ACTIONS

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

132. INSIGHTS INTO ENGAGEMENT
2 main clusters it appears.

How’s that Freemium model working out for us?

134. 3. PRESENTING AN ARGUMENT
the factual presentation of information

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

136. 0
5
10
15
J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec

137. Bring the fancy shit afterwards.

138. 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,
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

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

140. This isn’t immediately understandable for everyone.

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

142. 5. IMPLEMENTATION TOOLS
HTML for the win.

143. Highcharts is excellent and worth the money

144. Flotr2 is new, but popular

145. D3 is Immense.

146. D3 is Immense.

147. Rickshaw (based on D3) is powerful

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

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

150. 6. REFERENCES

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

152. TOPIC
TIME REMAINING
INTRO