Slide 1
Slide 1 text
From Data To Insight
100
Slide 2
Slide 2 text
Des Traynor
@destraynor,
COO of @intercom
Slide 3
Slide 3 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
INTRO
Slide 4
Slide 4 text
We are drowning in data.
Slide 5
Slide 5 text
Useful
Readable
Meaningful
Better than text
Adaptable
IT’S HARD TO MAKE VISUALS
Slide 6
Slide 6 text
Be clear first and clever second. If
you have to throw one of those out,
throw out clever.
— Jason Fried
“
Slide 7
Slide 7 text
VISUALS CAN CONFUSE
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Visualising the Gulf Oil Spill...
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Okay, lets try with football...
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
The “anti-infographic
movement”
No data was harmed in
the making of these info-
graphics
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR AUDIENCE
Slide 23
Slide 23 text
WHO ARE WE DESIGNING FOR?
Slide 24
Slide 24 text
WHAT ROLE?
The role defines the level of abstraction required.
Slide 25
Slide 25 text
CEO Level Detail
•Strategic view
•Focus on the long term
•High level overview
•Simple summary
Slide 26
Slide 26 text
•Query driven analysis
•Precision required
•Emphasis on trend &
and correlations
Analyst role
Slide 27
Slide 27 text
Operations
Focus on current status
Issue & Event driven
e.g. Alerts, spikes, trouble
Slide 28
Slide 28 text
WHAT DEPARTMENT?
The department defines the domain knowledge
Slide 29
Slide 29 text
SALES DEPARTMENT
Leads, conversions, avg. value per sale, etc
Slide 30
Slide 30 text
MARKETING DEPARTMENT
Impressions, loyalty, awareness, share
Slide 31
Slide 31 text
NETWORK & IT
Issues, tickets, lead time, open cases, uptime
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR DATA
Slide 35
Slide 35 text
$ 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?
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
6 THINGS TO COMMUNICATE
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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 figures looking?
Notes:
Spark-lines can save space, and provide context
READERS
12,247
CHANGE
0.32%
READERS
15,231
CHANGE
9.52%
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
GOOD BAR CHART
Never imply precision you don’t have.
0
12.5
25
37.5
50
2001 2002 2003 2004 2005
Slide 44
Slide 44 text
GOOD BAR CHART
Never imply precision you don’t have.
2nd
Takeaway
0
12.5
25
37.5
50
2001 2002 2003 2004 2005
Slide 45
Slide 45 text
MANIPULATING LINE CHARTS
The cost of gas just keeps going up, right?
Slide 46
Slide 46 text
$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
Slide 47
Slide 47 text
$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
Slide 48
Slide 48 text
BAD BAR CHART
Always watch the axes.
If they don’t start at zero,
someone is up to something
dodgy
Slide 49
Slide 49 text
0
10
20
30
40
Now Jan 1 2012
SAME DATA, DIFFERENT STORY
Slide 50
Slide 50 text
4. ANALYSIS OF PERIOD+ 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?
Slide 51
Slide 51 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Actual Target
BAD LINE CHART
Slide 52
Slide 52 text
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...
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
-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
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
-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 fired.
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
How many stick around for a second month?
35%
30%
25%
20%
15%
10%
5%
January February March April
32.4%
Signed
up:
Slide 61
Slide 61 text
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
Slide 62
Slide 62 text
35%
30%
25%
20%
Signups in April 2011
26% Still Active in June
101 retained - 290 lost.
Slide 63
Slide 63 text
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?
Slide 64
Slide 64 text
America
Ireland
U.K.
Canada
Australia
Spain
France
BAD PIE CHART
Slide 65
Slide 65 text
America
Ireland
U.K.
Canada
Australia
Spain
France
YOU COULD ADD THE DATA...
9%
15%
9%
11%
18%
23%
15%
Slide 66
Slide 66 text
0%
7.500%
15.000%
22.500%
30.000%
Ireland U.K. America Spain Canada Australia
SORTED BAR CHART
Slide 67
Slide 67 text
LYING WITH GROUPINGS
The 100K to 200k is where we need to tax!
Slide 68
Slide 68 text
LYING WITH GROUPINGS
Or maybe not...
Slide 69
Slide 69 text
O! "#$% &'?
http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor
LYING WITH GROUPINGS
Slide 70
Slide 70 text
LYING WITH ROTATIONS
Slide 71
Slide 71 text
TRUTH AGAIN
Slide 72
Slide 72 text
BAD: AREA PLOT
D
C
B
A
E
Slide 73
Slide 73 text
BAD: AREA PLOT
D
C
B
A
E
Which would you pick?
Slide 74
Slide 74 text
BAD: AREA PLOT
A B
- =
How “big” is this?
Slide 75
Slide 75 text
BAD: AREA PLOT
D
C
B
A
E
Slide 76
Slide 76 text
BAD UNIT PLOT
Slide 77
Slide 77 text
5. BREAKDOWN OF A VARIABLE
“Bar charts aren’t sexy, but they rely on an innate skill,
following a line. ”
Slide 78
Slide 78 text
If you had to fight one of them...
Slide 79
Slide 79 text
If you had to fight one of them...
4th
Takeaway
Slide 80
Slide 80 text
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?
Slide 81
Slide 81 text
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
STACKED BAR CHART
Slide 82
Slide 82 text
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?
Slide 83
Slide 83 text
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?
Slide 84
Slide 84 text
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...
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
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.
Slide 87
Slide 87 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
BAR CHARTS AGAIN?
Slide 88
Slide 88 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
Slide 89
Slide 89 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
Slide 90
Slide 90 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
Slide 91
Slide 91 text
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
Slide 92
Slide 92 text
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?
Slide 93
Slide 93 text
If it was easy, we’d all be great at snooker
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
Credit: Andrew Abela http://extremepresentation.typepad.com
Slide 99
Slide 99 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR VISUALS
Slide 100
Slide 100 text
Visuals communicate 2 things.
Category Quantity
Slide 101
Slide 101 text
WAYS TO VISUALISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed
Slide 102
Slide 102 text
WAYS TO VISUALISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed
Slide 103
Slide 103 text
WAYS TO VISUALISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed 5th
Takeaway
Slide 104
Slide 104 text
HOW TO VISUALISE CATEGORY
Line type Colour
Location
Shape
Slide 105
Slide 105 text
HOW TO VISUALISE CATEGORY
Line type Colour
Location
Shape
6th
Takeaway
Slide 106
Slide 106 text
You’ve just taken over a hotel. You’re handed the
accounts. Excel hell.
Where do we start?
HOW TO USE ALL THIS?
Slide 107
Slide 107 text
Q: Are we making any money?
Profit 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
Slide 108
Slide 108 text
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.
Slide 109
Slide 109 text
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
Slide 110
Slide 110 text
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
Slide 111
Slide 111 text
Another example.
What the hell is going on in Europe?
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
Credit: S. Few & Tom Watkins
Slide 118
Slide 118 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR STYLE
Slide 119
Slide 119 text
A WORD ON CONTEXT
Slide 120
Slide 120 text
This is a car.
Slide 121
Slide 121 text
This is a Nuclear power station.
Slide 122
Slide 122 text
This is a space shuttle
Slide 123
Slide 123 text
This is none of those things...
Slide 124
Slide 124 text
Chances are this is where your user is
Slide 125
Slide 125 text
The point is, we’re not always
fighting for attention.
Slide 126
Slide 126 text
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
Slide 127
Slide 127 text
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
Slide 128
Slide 128 text
Let’s take 3 points from Tufte
Slide 129
Slide 129 text
Chart junk: the stuff that doesn’t change when the data changes
Slide 130
Slide 130 text
Data Ink Ratio: what percentage of your ink shows data
Slide 131
Slide 131 text
Smallest Effective Difference: the least you can do to highlight
Slide 132
Slide 132 text
Smallest Effective Difference: the least you can do to
highlight
These colours would get very loud.
Unnecessarily so.
Slide 133
Slide 133 text
Smallest Effective Difference: the least you can do to
highlight
These are far quieter.
Slide 134
Slide 134 text
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
Slide 135
Slide 135 text
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
Slide 136
Slide 136 text
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
Slide 137
Slide 137 text
HTML has a tag
but no tag.
As a result, we forget to
think about what’s less
important on the screen.
— Ryan Singer
Slide 138
Slide 138 text
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.
Slide 139
Slide 139 text
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
Slide 140
Slide 140 text
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
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
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%
Slide 143
Slide 143 text
40
Revenue per product
SALES REPORT MAY 2012
ORDERS
12,247
SITE
PAYMENT
FULFILLMENT
0.4%
ACCOUNTS
2,323 1.4%
Slide 144
Slide 144 text
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.
Slide 145
Slide 145 text
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
Slide 146
Slide 146 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
CLOSING POINTS
Slide 147
Slide 147 text
1. VISUALS SHOULD SAY SOMETHING
The worst visualisations are the ones you look at
just think “Heh.”
Slide 148
Slide 148 text
Looks great, but makes very little sense.
Slide 149
Slide 149 text
H$1 8&90,
I -.#: 1#4! )#(+*.1 &% 8#&.8
;*<-!4+' *." ,=0 1#4! %$!6$!%
*!$ "#:., ;4' 73$7- #4' 23$%$
%:$$' 8!*>3&)%...
Slide 150
Slide 150 text
2. DASHBOARDS & VISUALS EVOLVE
Revisit them as your data increases
Slide 151
Slide 151 text
VANITY DASHBOARDS
Slide 152
Slide 152 text
START WITH THE BASICS
Slide 153
Slide 153 text
ADD INSIGHT AS YOU NEED IT
Slide 154
Slide 154 text
YEARLY VIEW, AFTER A YEAR
Slide 155
Slide 155 text
INCLUDE INSIGHTS & ACTIONS
Slide 156
Slide 156 text
CONSIDER ADDING PROJECTIONS
Slide 157
Slide 157 text
GET INSIGHTS INTO ENGAGEMENT
What types of users do we have?
Slide 158
Slide 158 text
2 main clusters it appears.
GET INSIGHTS INTO ENGAGEMENT
Slide 159
Slide 159 text
INSIGHTS INTO BUSINESS MODELS
How’s that Freemium model working out for us?
Slide 160
Slide 160 text
3. PRESENTING AN ARGUMENT
It’s okay to add visuals if your goal is more
than the factual presentation of information
Slide 161
Slide 161 text
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
Slide 162
Slide 162 text
0
5
10
15
J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec
Get your data first.
Slide 163
Slide 163 text
No content
Slide 164
Slide 164 text
Bring the fancy shit afterwards.
Slide 165
Slide 165 text
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
Slide 166
Slide 166 text
4. THEY’RE NOT ALL FIRST TIMERS
Like chess players understand chessboards, people can learn to
understand visualisations
Slide 167
Slide 167 text
This isn’t immediately understandable for everyone.
Slide 168
Slide 168 text
For those used to it, it’s perfect.
Slide 169
Slide 169 text
No content
Slide 170
Slide 170 text
No content
Slide 171
Slide 171 text
5. IMPLEMENTATION TOOLS
HTML for the win.
Slide 172
Slide 172 text
Highcharts is excellent and worth the money
Slide 173
Slide 173 text
Flotr2 is new, but popular
Slide 174
Slide 174 text
D3 is Immense.
Slide 175
Slide 175 text
D3 is Immense.
Slide 176
Slide 176 text
Rickshaw (based on D3) is powerful
Slide 177
Slide 177 text
selection.datavisualization.ch
Slide 178
Slide 178 text
HTML Charting Libraries
1. Highcharts
2. D3
3. Rickshaw
4. Flotr 2
5. selection.datavisualization.ch
Slide 179
Slide 179 text
HTML Charting Libraries
1. Highcharts
2. D3
3. Rickshaw
4. Flotr 2
5. selection.datavisualization.ch
8th?
Takeaway
Slide 180
Slide 180 text
L!"#$%...
Slide 181
Slide 181 text
S3#: "*'* 23*'’% ($*.&.8?/0, .@ A4%' “$*%1 '# B."”
V&%4,0&%$ '# )#((4.&)*'$%, .@ '# +#%' #. D!CDDE0$
I. F3#G, &'( #)' *+,)( -!(!, #)'. &'( #)' -!(! *+,)(. R+,)(?
L!"#$%...
Slide 182
Slide 182 text
6. REFERENCES
Where can I read more?
Slide 183
Slide 183 text
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.
Slide 184
Slide 184 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
FIN
Slide 185
Slide 185 text
http://www.flickr.com/photos/dogfrog/4300381036/sizes/o/in/photostream/
Slide 186
Slide 186 text
@destraynor
http://www.flickr.com/photos/dogfrog/4300381036/sizes/o/in/photostream/