Supporting blog post : http://blog.intercom.io/data-visualisation-in-web-apps/
I have given variations of this presentation at conferences such as MIX11, MidwestUX, ReMix. You can find a video recording of it at http://channel9.msdn.com/Events/MIX/MIX11/OPN04
11. H e y J o e , w e n e e d to v i s u a l i s e 1 8 4 m i l l i o n g a l l o n s . W h at ’y a g ot ?
12. O k a y , l ets t r y w i t h fo ot b a l l . . .
13. 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.
14. 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.
15. 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
Y e a h , I t h i n k e v e r y o n e g et ’s t h at
greater.
27. 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
D ata r e q u i r e d d e p e n d s o n r o l e & d e p a r t m e n t
33. 2. SINGLE FIGURE WITH CONTEXT
“How e we dog ty? Any probms hiz?”
Examps: READERS CHANGE
How we ms sas? 12,247 0.32%
Is netwk pfmg wl?
Hows r us figus lkg?
READERS CHANGE
15,231 9.52%
Not:
Spk-l c save space, provi ctext
34. 3. ANALYSIS OF A PERIOD
“Show me a key momts m”
Examps:
Lkg f ptns lg da sets
Lkg aad b cut da
Comp wh pvus pd
35. 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
Wk bt wh pse da (e.g. day day)
W o r k s b e st w i t h p r e c i s e u n i ts ( e . g . d a y s )
36. BA D L I N E C H A R T
50
40
30
20
10
Jan Feb Mar Apri May
L i n e c h a r ts fo r l a r g e p e r i o d s c a n m i s l e a d
37. BA R C H A R T
50
40
30
20
10
Jan Feb Mar Apri May
T h i s i s t h e s a m e d ata b ut o n l y s h o w s fa ct
38. 4 . A N A L Y S I S O F P E R I O D , W I T H T A RG E T
Did we h r sas figus? A we fulfig r five n quota?
Examps:
A sas we y shld be?
A a r employs pfmg okay?
Is r spse me be dustry std?
39. BA D L I N E C H A R T
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
Actual Tget
T h i s g u y i s m e et i n g h i s ta r g et, r i g h t ?
40. A co r vualn avg a
procsg ar. At a ge
lks like we’ dog okay .
In ce, we’ talkg abt a lta, but
we’ not showg lta...
41. F O C U S O N T H E D E LT A
20%
10%
0%
-10%
-20%
-30%
-40%
Jan Feb Mar April May June July August September October November December
S a m e g u y . S a m e d ata . H e ’s g et t i n g f i r e d .
42. 4 . B R E A K D O W N O F A VA R I AB L E
“Wt age grps e buyg r stuff? Wt cri e we
big ?”
Examps:
Who e r customs?
Wts r aws like ch mographic?
Wt browss e peop usg se days?
43. BA D P I E C H A R T
Amica
I
U.K.
Cada
Austral
Spa
Frce
W h e r e a r e w e m o st r e l e v a n t ?
44. Y O U C O U L D A D D T H E DATA . . .
Amica
9% 15% I
15% U.K.
23%
Cada
9%
Austral
11%
18%
Spa
Frce
A h , n o w I s e e , S p a i n & A m e r i c a a re e q u a l . . .
45. S O R T E D BA R C H A R T
30.000%
22.500%
15.000%
7.500%
0%
Ireland U.K. America Spain Canada Australia
W e l l t h at ’s a g o o d b i t c l e a r e r : )
46. L Y I N G W I T H G RO U P I N G S
T h i s c h a r t s h o w s t h at $ 1 0 0 - 2 0 0 K i s h u g e
47. L Y I N G W I T H G RO U P I N G S
A s e c o n d g r o u p i n g s h o w&%? 2 0 0 K i s m a s s i v e .
O* /("1 s
48. L Y I N G W I T H G RO U P I N G S
h t tp : / /m ot h e r j o n e s . c o m / k e v i n - dO* / /("15 &%?n -c h a r ts - m a k i n g - r i c h - l o o k -p o o r
r u m 2 0 1 1 / 0 / fu
49. L Y I N G W I T H RO T A T I O N S
B y p ut t i n g A p p l e at f r o n t a n d t i l t i n g b a c k ,
y o u s e e m o re g re e n p i x e l s
51. BA D : A R E A P L O T
B
A
E
D
C
B u b b l e p l ots a r e t r i c k y to w o r k w i t h .
52. BA D : A R E A P L O T
B
A
E
D
C
I f y o u c o u l d h a v e ‘a ’ o r a l l t h e r e st. . .
53. BA D : A R E A P L O T
B
A
E
D
C
Which would you pick?
54. BA D : A R E A P L O T
A
- B
=
How “big” ?
W e c a n ’ t m e a s u r e t h e d i f fe r e n c e
55. BA D : A R E A P L O T
B
A
E
D
C
A i s b i g g e r t h a n a l l t h e r e st. Y e a h : )
56. BA D U N I T P L O T
So 3 x 8 minus 1 = 23. 8 + 1 is 9....
57. BA D U N I T P L O T
W h y a m I d o i n g m at h s to w o r k t h i s o ut ?
58. 4 . B R E A K D O W N O F A VA R I AB L E
“B cs ’t sexy, but y ly ne ski,
foowg a le. ”
W e c a n fo l l o w l i n e s . I t ’s a s u r v i v a l t h i n g : )
59. I f y o u h a d to f i g h t o n e o f t h e m . . .
60. 4. BREAKDOWN OVER TIME
“How s compn cng ov st yr?”
Examps:
How s brows mket cng?
H r v src shift ctly?
61. S T A C K E D BA R C H A R T
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
I U.K Amica
62. S T A C K E D BA R C H A R T
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
A-"*&,# p e a k e d &$nJ789? ?
America 6"34"/ i J u l y
63. S T A C K E D BA R C H A R T
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
A-"*&,# a s U . K . &$oJ789?
How h 6"34"/ d n e ?
64. LYING WITH DIMENSIONS
70000
52500
35000
Jan
Feb 17500
Mar
April
May
June
July
August
September
October 0
November
December
L ots m o r e y e l l o w p i x e l s h e r e n o w . . .
65. LET ’S TRY A LINE CHART
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
I U.K Amica
66. L I N E C H A R T O F S A M E DATA ?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
A-"*&,# ($ata . :6.f;K r$"."*sto r y .
Same d 2!" D i fe e n t <!#$)"/?
67. LETS TRY A LINE CHART
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
U.k. A-"*&,#h($ 2!"d :6.r e l a n d p e a k e d i n J u l y .
Never c ange . I ;K $"."* <!#$)"/?
68. BA R C H A R T S A G A I N ?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
I U.K Amica
69. BA R C H A R T S A G A I N ?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
I U.K Amica
70. BA R C H A R T S A G A I N ?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
I U.K Amica
71. BA R C H A R T S A G A I N ?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
I U.K Amica
73. S T A C K E D BA R C H A R T
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
W h y i s i t s o h a rd to fo l l o w t h e U . K h e r e ?
74. S T A C K E D BA R C H A R T
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
BW h y ui s e i tm e a s h a irdg to h fo lcl o n s itste n U .yK ohfe rteh?e
eca s ur n t e ow he c
s o a n a n g l e d l i n e i s v e r y h a rd .
width of
75. I f i t w a s e a s y , w e ’d a l l b e g r e at s n o o k e r/
p o o l p l a y e rs
78. Le ng Le wid Colr tsy
WAYS T O V I S UA L I S E Q UA N T I T Y
Size Quty Spd
T h i s i s h o w y o u c o m m u n i c ate “ H o w m a n y ? ”
79. Le type Colr Spe
HOW TO VISUALISE CATEGORY
Locn
T h i s i s h o w y o u c o m m u n i c ate “ W h at ty p e ? ”
80. HOW TO USE ALL THIS?
Y’ve just tak ov a hot. Y’ as.
Exc . W do we stt?
81. Q: A we makg y mey?
Pr dtce betwn cts v. Let’s s
f yr.
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
V i s u a l i s e t h e d e l ta
82. Q: Wt s do mey come from?
Let’s compe pctage v g by ch
cegy.
50%
40%
30%
20%
10%
Rms Wdgs B Gym/Spa Rtaurt Buss Cfc
C o m p a r i s o n o f q u a n t i ty b a s e d o n c ate g o r y
83. Q: Wt st pric do we crge p rm?
Let’s lk price rge mn val
€175
€150
€100
€75
€50
King suite Junior Suite Deluxe Room Standard Room Hostel
W h y a r e j u n i o r s u i te s a v e r a g i n g s o l o w ?
84. Dign sut alyst qri...
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
93. 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
94. 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
L et ’s u s e t h i s st r a w m a n
Product Orders $ Revenue
101. 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 ts , s h a d o w s , c o l o r s , g r i d l i n e s . A l l n o n -c o n te n t
Inception 9 72.50
The girl who kicked the hornet's nest 15 54.05
102. 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 et ’s k i l l t h e g r a d i e n 9ts 72.50
The girl who kicked the hornet's nest 15 54.05
103. 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 et ’s k i l l t h e c o l o u r s9 72.50
The girl who kicked the hornet's nest 15 54.05
104. HTML doesn’t 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
105. 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 et ’s a d j u st t h e s h a d i n g .
9 72.50
The girl who kicked the hornet's nest 15 54.05
106. 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
The girl who kicked the hornet's nest 15 54.05
107. 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
108. L et ’s c o m p a r e w i t h w h e r e w e c a m e f r o m .
109. 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
W e c a n taInception h i s fu r t h e r. B ut t h i s i s n ’ t72.50 b o ut v i s u a l
ke t
The girl with the dragon tattoo
a 11 88.50
design. 9
The girl who kicked the hornet's nest 15 54.05
122. INSIGHTS INTO BUSINESS MODELS
H o w s t h at F r e e m i u m m o d e l w o r k i n g o ut fo r u s ?
123. 3 . P R E S E N T I N G A N A RG U M E N T
It’s okay a vuals if yr goal me htly psng fo
124. 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
125. 15
10
5
0 J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec
G et y o u r d ata f i r st.
126.
127. B r i n g t h e fa n c y s h i t a f te r w a rd s .
128. 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
129. 4. THEY’RE NOT ALL FIRST TIMERS
Like c pys ust cbods, peop c n
ust vualns
130. T h i s i s n ’ t i m m e d i ate l y u n d e r sta n d a b l e fo r e v e r y o n e .
131. F o r t h o s e u s e d to i t, i t ’s p e r fe ct.