PROPER USAGE OF DATA VISUALIZATION
IN DASHBOARDS AND BUSINESS
APPLICATIONS
Vladimir Milev
Telerik Corporation
AUTHOR BIO
Vladimir Milev
Data Visualization tools PM @ Telerik
Products: Silverlight, WPF, WP7, ASP.NET, Winforms
MCPD Enterprise Application Developer
Blog: http://blogs.telerik.com/vladimirmilev/posts.aspx
Twitter: @vmilev
ABOUT TELERIK
AGENDA
I. Why is proper data visualization so important?
II. Examples of poor usage of visualization and
guidelines for correct usage of data vis.
WHY IS DATA VIS SO
IMPORTANT?
• On May 1st, Osama has
been killed.
• How did the world react
to his death?
WORLD RESPONSE – RAW DATA
WORLD RESPONSE – VISUALIZATION
http://www.nytimes.com/interactive/2011/05/03/us/20110503-osama-response.html
ANSCOMBE’S QUARTET
•
•
•
•
Created in 1973 by Francis Anscombe
Statistical properties are identical:
Mean of X (9.0) and Y (7.5) values are constant
Nearly same variances, correlations and regressions
I
x
II
y
x
III
y
x
IV
y
x
y
10
8.04
10
9.14
10
7.46
8
6.58
8
6.95
8
8.14
8
6.77
8
5.76
13
7.58
13
8.74
13
12.74
8
7.71
9
8.81
9
8.77
9
7.11
8
8.84
11
8.33
11
9.26
11
7.81
8
8.47
14
9.96
14
8.1
14
8.84
8
7.04
6
7.24
6
6.13
6
6.08
8
5.25
4
4.26
4
3.1
4
5.39
19
12.5
12
10.84
12
9.13
12
8.15
8
5.56
7
4.82
7
7.26
7
6.42
8
7.91
5
5.68
5
4.74
5
5.73
8
6.89
ANSCOMBE’S QUARTET
DATA VIS AND DEVELOPERS
DATA-TO-INK RATIO
(EFFICIENCY OF GRAPHS)
• data to ink = data ink / total ink used for printing
• data-to-ink = proportion of a graphic’s ink
devoted to the non-redundant display of datainformation
• 1 – data-to-ink = ratio of redundant junk ink
used for visual flare. Can be erased and no
useful data information will be lost.
• An efficient graphic should have a data-to-ink
close to 1
CAREFUL WITH PIE CHARTS
Market Share
Market Share
US
18.70%
0.187
0.299
All others
54.00%
Competitor A
Competitor E
Competitor B
Competitor D
0.19
Competitor E
All others
0.54
12.70%
Competitor D
14.30%
Competitor B
19.00%
US
0.143
0.127
Competitor A
0.00%
29.90%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
Percentage of entire market
• Relative size of the pie slices is harder to determine
• Bar charts are just easier to read in general
CAREFUL WITH PIE CHARTS
• Because of its shape the pie chart wastes
precious screen space
COMPARING VALUES WITH PIES
Revenue
493782
Costs
Jan
756766
Jan
344626
Feb
301253
Feb
Mar
577648
Mar
266627
Apr
568975
May
538794
532425
230614
Jul
526350
Aug
309063
222854
Sep
Jun
Jul
310217
Aug
665722
Apr
May
235215
Jun
671201
390010
Sep
Revenue and costs by month
800000
700000
600000
500000
400000
Costs
300000
Revenue
200000
100000
0
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
IN DEFENSE OF PIE CHARTS
• Not all pie charts
are bad!
• Pie Charts are best
at visually
illustrating the
proportion of a part
in relation to the
whole
• Pie charts are also
good at showing
extremes
1400
F
A
E
1200
1000
D
800
A
600
400
B
C
C
D
200
E
F
B
0
0.10%
99.90%
CAREFUL WITH PIE CHARTS
• Worst pie chart in
the universe! 
CHOOSING THE RIGHT CHART
FOR THE JOB
• Do not show relationships that don’t exist!
Transportation costs
Transportation costs
$6,000.00
$6,000.00
$5,000.00
$5,000.00
$4,000.00
$4,000.00
$3,000.00
$3,000.00
$2,000.00
$2,000.00
$1,000.00
$1,000.00
$0.00
$0.00
Car
Train
Airplane
Transportation costs
Bus
Ship
Car
Train
Airplane
Transportation costs
Bus
Ship
CHOOSING THE RIGHT CHART
FOR THE JOB
Sales
$16
$14
$12
$10
$8
$6
$4
$2
$0
$16
$14
$12
$10
$8
$6
$4
$2
$0
• Show trends with lines, not bars
A WORD ABOUT BAR CHARTS
Revenue and costs by month
750000
650000
550000
Costs
450000
Revenue
350000
250000
150000
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
A WORD ABOUT BARS
Revenue and costs by month
Revenue and costs by month
800000
750000
700000
650000
600000
550000
500000
400000
450000
300000
350000
200000
250000
100000
150000
0
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Jan
Feb
Mar
Apr
May
Jun
• Bar graphs should always start at 0!
• Otherwise the visual ratio between bars is
skewed and incorrectly exaggerated.
Jul
Aug
Sep
A NOTE ABOUT 3D GRAPHS
16
16
14
12
10
8
6
4
2
0
14
12
10
8
6
4
1
2
0
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Series3
2
3
4
5
6
7
Series1
8
9
GAUGES VS BULLETGRAPH
•
•
•
•
Consider using bullet graphs instead of gauges.
Better readability
Higher data-to-ink ratio
Can be used inside a grid control
LINEAR VS QUADRATIC CHANGE
LINEAR VS QUADRATIC CHANGE
• The difference between Starbucks and KFC is n.
• The designer decided to stretch the graphic by n
• Since it is a logo he decided to stretch in two
directions…
LINEAR VS QUADRATIC CHANGE
• Scaling the area of a graph item results in a
quadratic (n2) difference in the data!
A=n2
• The solution? If you scale area, use
A=π*r2
n
CONCLUSION
RECOMMENDED MATERIALS
• Data Driven Consulting:
http://www.datadrivenconsulting.com/feed/
• Eager Eyes:
• http://feeds.feedburner.com/EagerEyes
• Perceptual Edge:
• http://www.perceptualedge.com/blog/?feed=rss2
• Juice Analytics:
• http://feeds.feedburner.com/JuiceAnalytics
• Junk Charts:
• http://junkcharts.typepad.com/junk_charts/atom.xml
QUESTIONS?
After the session please fulfil the questionnaire.
Questionnaires will be sent to you by e-mail and will be available in the profile section of the
NT Conference website www.ntk.si .
Thank you!