1. Webdagen 2014 Oslo, Norway
Designing with Data October 16th 10:15

4. @briansuda

7. Data Vizualizations

8. Difficulty
Charts
& Graphs
Infographics
Interactive
Simulations
3D Objects
User Engagement

10. Today's focus

14. jan
feb
mar
apr
may
jun
jul
aug
sept
oct
nov
dec
02014
w
s
s
t
t
s
t
f
m
w
s
m
t
s
s
w
f
m
w
s
t
t
s
t
f
m
m
t
s
t
t
s
w
f
m
w
s
t
t
f
s
w
f
m
t
s
t
t
s
w
w
s
m
t
s
t
f
s
w
f
m
t
t
s
t
f
s
w
s
m
t
s
t
f
f
m
w
s
m
t
s
t
f
s
4
11
18
25
3
10
17
24
31
2
9
16
23
30
1
8
15
22
29
6
13
20
27
5
12
19
26
7
14
21
28
jan
feb
mar
apr
may
jun
jul
aug
sept
oct
nov
dec
02015
t
s
s
w
f
m
w
s
t
t
s
t
f
m
m
t
s
t
t
s
w
f
m
w
s
t
t
f
s
w
f
m
t
s
t
t
s
w
w
s
m
t
s
t
f
s
w
f
m
t
t
s
t
f
s
w
s
m
t
s
t
f
f
m
w
s
m
t
s
t
f
s
w
s
s
t
t
s
t
f
m
w
s
m
4
11
18
25
3
10
17
24
31
2
9
16
23
30
1
8
15
22
29
6
13
20
27
5
12
19
26
7
14
21
28

15. Atomic Charts

17. Bar Charts
300
200
100
1 2 3 4 5 6 7 8 9 10 11 12
400

18. Area Charts
800
700
600
500
300
200
100
1 2 3 4 5 6 7 8 9 10 11 12
400

19. Tree Maps

21. Line Charts
1,000,000
800,000
600,000
400,000
200,000
June July Aug Sept Oct Nov Dec Jan Feb

22. Horizon Graphs
300
200
100
1 2 3 4 5 6 7 8 9 10 11 12
400
-100
-200
-300
-400
13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

23. 300
200
300
-100
200
100
1 2 3 4 5 6 7 8 9 10 11 12
400
-200
300
-300
-100
200
-200
300
-300
200
-100
-400
13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
100
1 2 3 4 5 6 7 8 9 10 11 12
400
-400
13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
100
1 2 3 4 5 6 7 8 9 10 11 12
400
-200
-300
300
-100
-400
13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
100
1 2 3 4 5 6 7 8 9 10 11 12
400
200
-200
-300
-400
13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
100
1 2 3 4 5 6 7 8 9 10 11 12
400
-100
-200
-300
-400
13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

24. Scatter Plots
Density
1,000 km
Area
0
0
30%

25. Matrix
Luxury
Commodity
Expensive
Inexpensive
Limos and
lounges
1p deals
No compeition for
expensive seats!
Hard to pay for
luxury with cheap
tickets
Competition
Competition

26. Maps
Edinburgh
Newcastle
Manchester
Cardiff LONDON

27. Attributes to signal change
How do we highlight just aspect of the design?

28. Attributes to signal change
Sun Mon Tue Wed Thu Fri Sat
Color

29. Attributes to signal change
Sun Mon Tue Wed Thu Fri Sat
Saturation

30. Attributes to signal change
2009 Q1 Q2 Q3 Q4
Position

31. Attributes to signal change
Weight
50
25
0
Jan Feb Mar Apr May Jun

32. Attributes to signal change
Shape
50
25
0
Jan Feb Mar Apr May Jun

33. Attributes to signal change
Animation: Yellow Fade Technique
Rotation
Others...

34. 3D

35. 3D Charts!
Vanishing Point

36. 3D Charts!
Vanishing Point

37. 3D Charts!
Vanishing Point

38. 3D Charts!

39. 3D Charts!
http://www.guardian.co.uk/technology/blog/2008/jan/
21/liesdamnliesandstevejobs

42. Data to Ink Ratio
A large share of ink on a graphic should
present data-information, the ink changing as
the data change. Data-ink is the non-erasable
core of a graphic, the non-redundant ink
arranged in response to variation in the
numbers represented.
!
Tufte, 1983

43. Data to Ink Ratio
Data to
ink Ratio
Data Ink
Total Ink
=

44. Reduce!!!

45. Reduce!!!
100
75
50
25
0
Q1 Q2 Q3 Q4

46. Reduce!!!
58
32
0
Q1 Q2 Q3 Q4

47. Reduce!!!
58
32
0
Q1 Q2 Q3 Q4

48. Reduce!!!
58
32
0
Q1 Q2 Q3 Q4

49. Reduce!!!
58
32
0
Q1 Q2 Q3 Q4

50. Reduce!!!
80%
60%
40%
20%
80%
60%
40%
20%

51. Two Camps

52. Chart Junk
isn’t as bad
as you think
http://52weeksofux.com/post/
963764999/chart-junk-isnt-as-bad-
as-you-think

54. GetColour()

55. #36b0cf
$hex = substr(md5(“13:00”),0,6);

56. October = #eca60a
14:00 = #13a07b
Oslo = #f48304
Webdagene = #991899
Norway = #d5b929

57. Needs a friend

59. October = #eca60a
14:00 = #13a07b
Oslo = #f48304
Webdagene = #991899
Norway = #d5b929

61. Accessibility

66. Types of color
blindness

68. Deuteranopia

69. Protanopia

70. Tritanopia

74. Monopoly Money

76. Vector vs.
Vector Raster Original
Raster

78. Retina High DPI

79. CHART FONTS
WEB FONTS

80. https://github.com/optional-is/PlayfairCharts
http://www.fivesimplesteps.com/products/creating-symbol-fonts

81. <<SSVVGG>>

82. http://www.svgeneration.com

83. Useful Skills for
Data Viz

84. Javascr ipt : jQuer y/Raphael

85. HTML/CSS
Javascr ipt : jQuer y/Raphael

86. Excel/Spreadsheets
HTML/CSS
Javascr ipt : jQuer y/Raphael

87. Any Programming Language
Excel/Spreadsheets
HTML/CSS
Javascr ipt : jQuer y/Raphael

88. SVG
Any Programming Language
Excel/Spreadsheets
HTML/CSS
Javascr ipt : jQuer y/Raphael

89. Hatching a data viz,
(social) media campaign

90. Launch
1
week
before
Blog Post
Shareable Graphics
2
weeks
before
3
weeks
before
4 weeks
before
Large Infographic
More teasers

91. Social Media

92. Keep a Blog
Social Media

93. Make it Sharable
Keep a Blog
Social Media

94. S tatic to Interactive
Make it Sharable
Keep a Blog
Social Media

95. Update Old Content
S tatic to Interactive
Make it Sharable
Keep a Blog
Social Media

96. Tools rat her t han pretty
Update Old Content
S tatic to Interactive
Make it Sharable
Keep a Blog
Social Media

97. Technique vs. Style

98. If you don't have a basis
on which to make a
choice, then you don't
have a style at all, you
have a series of accidents.
—Philip Glass

100. Create a style, NOT a
series of accidents!

101. Brian Suda
brian@suda.co.uk
@briansuda THANKS!