The Large Hadron Collider (LHC) is estimated to produce 15 petabytes of data per year. This is difficult to store let alone understand! With connected devices quickly out numbering connected people, we are soon going to be swamped with data. Visualising the constant stream of information we are collecting so that it can be better understood is going to be a critical task. In this presentation, I’ll walk you through a quick overview of some basic chart and graph design, then look at how easy it is to write some quick scripts in your favourite language to produce beautiful graphics. SVG is an under-​​rated technology, but it can be created programmatically and quickly to visualise data.

1. Visualising Data
Brian Suda London, England
suda.co.uk 51°30′N
May 26th 0°6′E
http://www.flickr.com/photos/fepigio/461422792/

3. Today's focus

8. Each Chart and
Graph type tells a
different story

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

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

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

12. Horizon Graphs
400
300
200
100
-100
-200
-300
-400
1 2 3 4 5 6 7 8 9 10 11 12 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

13. Attributes to signal change
How do we highlight just aspects of the design?

14. Attributes to signal change
In vitae facilisis nisl. Pellentesque
facilisis rutrum sem non viverra.
Curabitur tortor ipsum, sodales et
viverra nec, malesuada sed felis.
Nulla ornare velit diam, sit amet
imperdiet ligula. Pellentesque vel
dictum nunc. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Sun Mon Tue Wed Thu Fri Sat Donec suscipit venenatis feugiat.
Color

15. Attributes to signal change
In vitae facilisis nisl. Pellentesque
facilisis rutrum sem non viverra.
Curabitur tortor ipsum, sodales et
viverra nec, malesuada sed felis.
Nulla ornare velit diam, sit amet
imperdiet ligula. Pellentesque vel
dictum nunc. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Sun Mon Tue Wed Thu Fri Sat Donec suscipit venenatis feugiat.
Saturation

16. Attributes to signal change
Blueberries
Blue berries
2009 Q1 Q2 Q3 Q4
Position

17. Attributes to signal change
50
25
0
Jan Feb Mar Apr May Jun
In vitae facilisis nisl. Pellentesque facilisis rutrum sem non viverra. Curabitur tortor
ipsum, sodales et viverra nec, malesuada sed felis. Nulla ornare velit diam, sit amet
imperdiet ligula. Pellentesque vel dictum nunc. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec suscipit venenatis feugiat.
Weight

18. Attributes to signal change
Animation
Rotation
Others...

19. 3D

20. 3D
Hippo #1 Hippo #2
2 Units 4 Units

21. 3D
Hippo #1 Hippo #2
2 Units 4 Units

22. 3D
Hippo #1 Hippo #2 Hippo #1 Hippo #2
2 Units 4 Units 2 Units 4 Units

23. 3D
Hippo #1 Hippo #2
2 Units 4 Units

24. 3D Charts!
Vanishing Point

25. 3D Charts!
Vanishing Point

26. 3D Charts!
Vanishing Point

27. 3D Charts!

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

32. 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

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

34. Reduce!!!

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

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

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

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

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

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

41. Smallest Effective
Difference

42. Two Camps

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

45. GetColor()

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

47. May = #195fbb
12:00 = #18940d
London = #59ead8
AtMedia11 = #d7dcc4
England = #64f607

48. Needs a friend

50. May = #195fbb
12:00 = #18940d
London = #59ead8
AtMedia11 = #d7dcc4
England = #64f607

51. Accessibility

56. Types of color
blindness

58. Deuteranopia

59. Protanopia

60. Tritanopia

64. Telling a story

65. 7 Stages of
a mythic
journey

66. Call to
Adventure Supernatural
Return aid
(Gift of Threshold
the Godess) KNOWN Guardian(s)
UNKNOWN Threshold
(beginning of
transformation)
Atonement
The Mentor
Helper
Hero's
Journey
Transformation
Helper
Abyss
death & rebirth
http://en.wikipedia.org/wiki/Monomyth

67. The Image

68. The Embarkation

69. The Labyrinth

70. The Draw

71. The Payoff

72. The Return

73. The Memento

75. What does this
have to do with
visualizations?

79. Red shirt theory

83. Deterministic
Design

88. echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">';
$arm_pos = 0;
foreach($dirs as $k=>$v){
$length = (($v/$counter)*$scaler);
$x = 100+(sin(deg2rad($k)) * $length);
$y = 100+(cos(deg2rad($k)) * $length);
$arm_pos = $k+10;
if($arm_pos > 360) { $arm_pos = 10; }
$length = (($dirs[$arm_pos]/$counter)*$scaler);
$x1 = 100+(sin(deg2rad($arm_pos)) * $length);
$y1 = 100+(cos(deg2rad($arm_pos)) * $length);
echo '<polygon points="100,100 '.$x.','.$y.' '.$x1.','.$y1.'" fill="#'.stepper($k).'"/>';
}
echo '</svg>';

89. d
p ee
S
e
r ag Y
Ave
An gle
X
X = sin(Angle) * Average Speed;
Y = cos(Angle) * Average Speed;

90. http://visitnordkyn.com

92. http://mitmedialab.heroku.com/logo?seed=Brian%20Suda

93. http://mitmedialab.heroku.com/logo?seed=AtMedia11

97. http://hint.fm/projects/wired2008/

98. echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">';
$c = (int)(($x*$y)/$scaler);
$prev = 0;
foreach($rgb as $k=>$v){
if($v > 0) {
$r = ($k >> 16) & 0xFF;
$g = ($k >> 8) & 0xFF;
$b = $k & 0xFF;
$hex = str_pad(dechex($r),2,'0',STR_PAD_LEFT).str_pad(dechex($g),
2,'0',STR_PAD_LEFT).str_pad(dechex($b),2,'0',STR_PAD_LEFT);
echo '<circle cx="'.$c.'" cy="'.$c.'" r="'.($c-$prev).'" fill="#'.$hex.'" />';
echo "n";
$prev += (int)($v/$scaler);
}
}
echo '</svg>';

106. http://mozillalabs.com/testpilot/

109. Tell one story and
only one story!

110. Thanks
@briansuda
http://suda.co.uk
http://optional.is
http://designingwithdata.com