designing data visualisations & dashboard in web applications
DESCRIPTION
Supporting blog post: http://blog.intercom.io/data-visualisation-in-web-apps/ This talk was most recently presented at WebVisions Portland #wvpdxTRANSCRIPT
![Page 1: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/1.jpg)
Data visualisations and Dashboard Design
![Page 2: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/2.jpg)
Des Traynor
@destraynor,COO of @intercom
![Page 3: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/3.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TRO
![Page 4: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/4.jpg)
We are drowning in data.
![Page 5: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/5.jpg)
UsefulReadable
Meaningful
Better than text
Adaptable
IT ’S HARD TO MAKE V ISUALS
![Page 6: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/6.jpg)
Be clear first and clever second. If you have to throw one of those out, throw out clever.— Jason Fried
“
![Page 7: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/7.jpg)
VISUALS CAN CONFUSE
![Page 8: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/8.jpg)
![Page 9: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/9.jpg)
![Page 10: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/10.jpg)
![Page 11: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/11.jpg)
![Page 12: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/12.jpg)
![Page 13: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/13.jpg)
![Page 14: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/14.jpg)
V i sua l i s i ng the Gu l f O i l Sp i l l . . .
![Page 15: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/15.jpg)
![Page 16: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/16.jpg)
O k a y , l ets t r y w i t h fo ot b a l l . . .
![Page 17: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/17.jpg)
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.
![Page 18: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/18.jpg)
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.
![Page 19: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/19.jpg)
The “anti-infographic movement”
No data was harmed in the making of these info-graphics
![Page 20: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/20.jpg)
![Page 21: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/21.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR AUDIENCE
![Page 22: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/22.jpg)
WHO ARE WE DES IGN ING FOR?
![Page 23: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/23.jpg)
WHAT ROLE?The role defines the level of abstraction required.
![Page 24: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/24.jpg)
CEO Level Detail
Strategic viewFocus on the long termHigh level overviewSimple summary
![Page 25: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/25.jpg)
Query driven analysisPrecision requiredEmphasis on trends, and correlations
Analyst role
![Page 26: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/26.jpg)
Operations/Logistics
Focus on current statusIssue & Event driven
e.g. Alerts, spikes, trouble
![Page 27: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/27.jpg)
WHAT DEPARTMENT?The department defines the domain knowledge
![Page 28: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/28.jpg)
SALES DEPARTMENTLeads, conversions, avg. value per sale, etc
![Page 29: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/29.jpg)
MARKET ING DEPARTMENTImpressions, loyalty, awareness, share
![Page 30: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/30.jpg)
NETWORK & ITIssues, tickets, lead time, open cases, uptime
![Page 31: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/31.jpg)
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
Ro le + Depa r tmen t = I n fo rma t i on needed
![Page 32: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/32.jpg)
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
Ro le + Depa r tmen t = I n fo rma t i on needed
1st Takeaway
![Page 33: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/33.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR DATA
![Page 34: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/34.jpg)
$ 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?
![Page 35: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/35.jpg)
WHICH OF THESE?
TOTAL SALES$12,240.65
CHANGE 5.32%
Top grossing items
% T
OTA
L RE
V.
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
Rev
enue
5
10
15
20
25
Uni
t sa
les
![Page 36: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/36.jpg)
6 TH INGS TO COMMUNICATE
![Page 37: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/37.jpg)
1 . COMMUNICATE A S INGLE F IGURE
Used when context is obvious, precision is required, and past/future is irrelevant to user.
BALANCE
$23.00BALANCE
$11.32BALANCE
$11.32
Examples: AA clerk with a waiting listChecking bank balanceSys admin checking current status
Notes: Single numbers can have states
![Page 38: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/38.jpg)
2 . S INGLE F IGURE 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 figures looking?
Notes: Spark-lines can save space, and
READERS12,247
CHANGE 0.32%
READERS15,231
CHANGE 9.52%
![Page 39: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/39.jpg)
3 . ANALYS IS OF A PER IOD
“Show me all the key moments this month”
Examples: Looking for patterns in longer data setsLooking ahead based on current dataComparison with previous period
![Page 40: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/40.jpg)
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)
G O O D L I N E C H A R T
![Page 41: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/41.jpg)
10
20
30
40
50
Jan Feb Mar Apri May
BA D L I N E C H A R T
![Page 42: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/42.jpg)
10
20
30
40
50
Jan Feb Mar Apri May
BA R C H A R T
Never imply precision you don’t have.
![Page 43: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/43.jpg)
10
20
30
40
50
Jan Feb Mar Apri May
BA R C H A R T
Never imply precision you don’t have.
2nd Takeaway
![Page 44: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/44.jpg)
4 . ANALYS IS OF PER IOD , 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?
![Page 45: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/45.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
ActualTarget
BAD L INE CHART
![Page 46: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/46.jpg)
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...
![Page 47: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/47.jpg)
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
![Page 48: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/48.jpg)
-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
![Page 49: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/49.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAD L INE CHART
This guy is getting a bonus
![Page 50: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/50.jpg)
-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.
![Page 51: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/51.jpg)
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 signupSign
Up
18% of January sign ups are still active in July
![Page 52: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/52.jpg)
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 signupSign
Up
18% of January sign ups are still active in July
![Page 53: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/53.jpg)
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 signupSign
Up
18% of January sign ups are still active in July
![Page 54: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/54.jpg)
How many stick around for a second month?
35%
30%
25%
20%
15%
10%
5%
January February March April
32.4%
Signed up:
![Page 55: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/55.jpg)
Retention using a cycle plot35%
30%
25%
20%
15%
10%
5%
0%Month 2 Retention
Month 3 Retention
Month 4 Retention
Month 5 Retention
![Page 56: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/56.jpg)
35%
30%
25%
20%
Signups in April 2011 26% Still Active in June101 retained - 290 lost.
![Page 57: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/57.jpg)
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?
![Page 58: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/58.jpg)
AmericaIrelandU.K.CanadaAustraliaSpainFrance
BAD P IE CHART
![Page 59: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/59.jpg)
AmericaIrelandU.K.CanadaAustraliaSpainFrance
YOU COULD ADD THE DATA . . .
9%
15%
9%
11%18%
23%
15%
![Page 60: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/60.jpg)
0%
7.500%
15.000%
22.500%
30.000%
Ireland U.K. America Spain Canada Australia
SORTED BAR CHART
![Page 61: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/61.jpg)
LY ING WITH GROUPINGS
The 100K to 200k is where we need to tax!
![Page 62: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/62.jpg)
LY ING WITH GROUPINGS
Or maybe not...
![Page 63: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/63.jpg)
O! "#$% &'?h t tp : / /mothe r j ones . com/kev i n -d rum/201 1 /05/ fun-cha r t s -mak ing- r i ch - l ook -poo r
L Y I N G W I T H G RO U P I N G S
![Page 64: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/64.jpg)
LY ING WITH ROTAT IONS
![Page 65: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/65.jpg)
LY ING WITH D IMENSIONS
![Page 66: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/66.jpg)
BAD: AREA PLOT
D
C
BA
E
![Page 67: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/67.jpg)
BAD : AREA PLOT
D
C
BA
E
Which wou ld you p i c k?
![Page 68: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/68.jpg)
A B
BAD: AREA PLOT
- =How “big” is this?
![Page 69: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/69.jpg)
BAD: AREA PLOT
D
C
BA
E
![Page 70: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/70.jpg)
BAD UNIT PLOT
![Page 71: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/71.jpg)
5 . BREAKDOWN OF A VARIABLE
“Bar charts aren’t sexy, but they rely on an innate skill, following a line. ”
![Page 72: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/72.jpg)
I f you had t o f i gh t one o f t hem. . .
![Page 73: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/73.jpg)
I f you had t o f i gh t one o f t hem. . .
4th Takeaway
![Page 74: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/74.jpg)
6 . BREAKDOWN OVER T IME
“How has the composition changed over the last year?”
Examples: How has the browser market changed?Has our revenue sources shifted recently?
![Page 75: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/75.jpg)
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
STACKED BAR CHART
![Page 76: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/76.jpg)
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
STACKED BAR CHART
A($!&)* +$,-$" &. J/01?Amer i ca peaked i n Ju l y ?
![Page 77: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/77.jpg)
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?
![Page 78: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/78.jpg)
0
17500
35000
52500
70000
JanFeb
Mar April
MayJune
JulyAugust
SeptemberOctober
November December
LY ING WITH D IMENSIONS
Lo t s mo re ye l l ow p i xe l s he re now . . .
![Page 79: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/79.jpg)
LET ’S TRY A L INE CHART
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
![Page 80: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/80.jpg)
L INE 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 da ta . D i f f e r en t s t o r y .
![Page 81: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/81.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
BAR CHARTS AGAIN?
![Page 82: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/82.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
![Page 83: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/83.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
![Page 84: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/84.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
![Page 85: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/85.jpg)
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
INTERACTIVE , REMEMBER?
You can adap t based on I n t e r c t i ons
![Page 86: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/86.jpg)
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
STACKED BAR CHART
Why i s i t so ha rd t o f o l l ow the U .K he re?
![Page 87: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/87.jpg)
I f i t was eas y , we ’d a l l be g rea t a t b i l l i a rds
![Page 88: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/88.jpg)
![Page 89: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/89.jpg)
![Page 90: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/90.jpg)
![Page 91: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/91.jpg)
![Page 92: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/92.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR VISUALS
![Page 93: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/93.jpg)
Visuals communicate 2 things.
Category Quantity
![Page 94: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/94.jpg)
WAYS TO V ISUAL ISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed
![Page 95: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/95.jpg)
WAYS TO V ISUAL ISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed
![Page 96: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/96.jpg)
WAYS TO V ISUAL ISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed5th Takeaway
![Page 97: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/97.jpg)
HOW TO V ISUAL ISE CATEGORY
Le type Colr
Locn
Spe
![Page 98: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/98.jpg)
You’ve just taken over a hotel. You’re handed the accounts. Excel hell. Where do we start?
HOW TO USE ALL TH IS?
![Page 99: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/99.jpg)
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
![Page 100: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/100.jpg)
Q: What makes us money?
Rms Wdgs CfcBussRtaurtB Gym/Spa
10%
20%
30%
40%
50%
Let’s compare the percentage of revenue generated by each category.
![Page 101: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/101.jpg)
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
![Page 102: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/102.jpg)
REPORT
REVENUE TYPE
ROOMS & EXTRASROOM TYPE
KING SUITESPERIOD
LAST YEAR Overview | AdvancedREPORT TYPE
MIDWEST HOTELZ
PROFITLOYALTYINCIDENTALSGUEST REPORTWEDDINGSCONFERENCES
GUEST TYPE
ALL GUESTS
Design to support analyst queries...
![Page 103: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/103.jpg)
Another example. What the hell is going on in Europe?
![Page 104: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/104.jpg)
![Page 105: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/105.jpg)
![Page 106: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/106.jpg)
![Page 107: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/107.jpg)
![Page 108: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/108.jpg)
![Page 109: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/109.jpg)
Credit: S. Few & Tom Watkins
![Page 110: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/110.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR STYLE
![Page 111: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/111.jpg)
A WORD ON CONTEXT
![Page 112: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/112.jpg)
This is a car.
![Page 113: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/113.jpg)
This is a Nuclear power station.
![Page 114: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/114.jpg)
This is a space shuttle
![Page 115: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/115.jpg)
This is none of those things...
![Page 116: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/116.jpg)
Chances are this is where your user is
![Page 117: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/117.jpg)
The point is, we’re not always fighting for
attention.
![Page 118: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/118.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
![Page 119: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/119.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
Le t ’ s u se t h i s s t r awman
![Page 120: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/120.jpg)
Le t ’ s t a ke 3 po in t s f r om Tu f t e
![Page 121: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/121.jpg)
Chart junk: the stuff that doesn’t change when the data changes
![Page 122: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/122.jpg)
Data Ink Ratio: what percentage of your ink shows data
![Page 123: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/123.jpg)
Smallest Effective Difference: the least you can do to highlight
![Page 124: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/124.jpg)
Smallest Effective Difference: the least you can do to highlight
These co l ou r s wou ld ge t ve r y l oud . Unnecessa r i l y so .
![Page 125: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/125.jpg)
Smallest Effective Difference: the least you can do to highlight
These a r e f a r qu i e t e r .
![Page 126: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/126.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
Grad i en t s , shadows , co l o r s , g r i d l i nes . A l l non-con ten t
![Page 127: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/127.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
Le t ’ s k i l l t he g rad i en t s
![Page 128: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/128.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
Le t ’ s k i l l t he co l ou r s
![Page 129: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/129.jpg)
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
![Page 130: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/130.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
Le t ’ s ad ju s t t he shad ing .
![Page 131: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/131.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
Le t ’ s add the necessa r y d i f f e r ences
![Page 132: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/132.jpg)
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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS12,247
CHANGE 0.32%
ACCOUNTS7,343
CHANGE 4.32%
SITE LIVEPAYMENT LIVEFULFILLMENT ON
F rom he re we cou ld beg in t o s t y l e
![Page 133: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/133.jpg)
Th i s i sn ’ t abou t v i sua l des ign
![Page 134: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/134.jpg)
Top productsProduct 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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics MagazinesAppliancese-goods Other
10
20
30
40
Revenue per product
SALES REPORT MAY 2012
ORDERS
12,247SITE
PAYMENT
FULFILLMENT
0.4%ACCOUNTS
2,323 1.4%
![Page 135: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/135.jpg)
Top productsProduct 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
Iron Man 2 8 45.25
Max Payne 2 6 32.75
Books Electronics MagazinesAppliancese-goods Other
10
20
30
40
Revenue per product
SALES REPORT MAY 2012
ORDERS
12,247SITE
PAYMENT
FULFILLMENT
0.4%ACCOUNTS
2,323 1.4%
![Page 136: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/136.jpg)
4 Points on Visual Design
1. Remove Chart Junk2. Maximise your data ink ratio3. Use the “least effective difference” to highlight4. Remember to quieten down less important parts.
![Page 137: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/137.jpg)
4 Points on Visual Design
1. Remove Chart Junk2. Maximise your data ink ratio3. Use the “least effective difference” to highlight4. Remember to quieten down less important parts.
6th Takeaway
![Page 138: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/138.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
CLOSING POINTS
![Page 139: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/139.jpg)
1 . V ISUALS SHOULD SAY SOMETHING
The worst visualisations are the ones you look at just think “Heh.”
![Page 140: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/140.jpg)
Looks great, but makes very little sense.
![Page 141: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/141.jpg)
2 . DASHBOARDS & V ISUALS EVOLVE
Revisit them as your data increases
![Page 142: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/142.jpg)
VANITY DASHBOARDS
![Page 143: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/143.jpg)
START WITH THE BAS ICS
![Page 144: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/144.jpg)
ADD INS IGHT AS YOU NEED IT
![Page 145: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/145.jpg)
ADD A YEARLY V IEW, AFTER A YEAR
![Page 146: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/146.jpg)
INCLUDE INS IGHTS & ACT IONS
![Page 147: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/147.jpg)
CONSIDER ADDING PROJECT IONS
![Page 148: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/148.jpg)
GET INS IGHTS INTO ENGAGEMENT
What t ypes o f u se r s do we have?
![Page 149: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/149.jpg)
INS IGHTS INTO ENGAGEMENT
2 ma in c l u s t e r s i t appea r s .
![Page 150: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/150.jpg)
INS IGHTS INTO BUS INESS MODELS
How ’ s t ha t F reem ium mode l wo rk i ng ou t f o r u s?
![Page 151: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/151.jpg)
3 . PRESENT ING AN ARGUMENT
It’s okay to add visuals if your goal is more than the factual presentation of information
![Page 152: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/152.jpg)
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
![Page 153: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/153.jpg)
0
5
10
15
J! Feb M" Apr May Jun Jul Aug Sep Oct Nov Dec
Get you r da ta f i r s t .
![Page 154: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/154.jpg)
![Page 155: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/155.jpg)
Br ing the f ancy sh i t a f t e rwa rds .
![Page 156: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/156.jpg)
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
![Page 157: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/157.jpg)
4 . THEY ’RE NOT ALL F IRST T IMERS
Like chess players understand chessboards, people can learn to understand visualisations
![Page 158: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/158.jpg)
Th i s i sn ’ t immed ia t e l y unde r s t andab l e f o r e ve r yone .
![Page 159: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/159.jpg)
Fo r t hose used t o i t , i t ’ s pe r f ec t .
![Page 160: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/160.jpg)
![Page 161: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/161.jpg)
![Page 162: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/162.jpg)
5 . IMPLEMENTATION TOOLS
HTML for the win.
![Page 163: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/163.jpg)
![Page 164: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/164.jpg)
Highcha r t s i s e xce l l en t and wo r th t he money
![Page 165: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/165.jpg)
F lo t r2 i s new , bu t popu l a r
![Page 166: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/166.jpg)
D3 i s Immense .
![Page 167: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/167.jpg)
D3 i s Immense .
![Page 168: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/168.jpg)
R ickshaw (based on D3 ) i s powe r fu l
![Page 169: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/169.jpg)
HTML Charting Libraries
1. Highcharts2. D33. Rickshaw4. Flotr 2
![Page 170: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/170.jpg)
HTML Charting Libraries
1. Highcharts2. D33. Rickshaw4. Flotr 2
7th Takeaway
![Page 171: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/171.jpg)
6 . REFERENCESWhere can I read more?
![Page 172: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/172.jpg)
BooksStephen Few - “Dashboard Design” & “Now you see it”Brian Suda - “Designing with Data”Edward Tufte - The first two.
BlogsStephen Few -> http://perceptualedge.comIntercom (me) -> http://blog.intercom.io
![Page 173: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/173.jpg)
TOPIC
TIME R
EMA
ININ
G
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FINFIN
![Page 174: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/174.jpg)
![Page 175: Designing Data Visualisations & Dashboard in Web Applications](https://reader038.vdocuments.mx/reader038/viewer/2022103114/55627a27d8b42ad1688b48eb/html5/thumbnails/175.jpg)
Thanks everyone! – @destraynor