@media 11: Visualising Data
110
London, England 51°30′N 0°6′E Visualising Data Brian Suda suda.co.uk May 26th http://www.flickr.com/photos/fepigio/461422792/
-
Upload
briansuda -
Category
Technology
-
view
1.417 -
download
7
description
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.
Transcript of @media 11: Visualising Data
London, England51°30′N0°6′E
Visualising DataBrian Sudasuda.co.ukMay 26th
http://www.flickr.com/photos/fepigio/461422792/
Today's focus
Each Chart and Graph type tells a
different story
Bar Charts
100
300
200
1 2 3 4 5 6 7 8 9 10 11 12
400
Area Charts
100
300
200
1 2 3 4 5 6 7 8 9 10 11 12
400
500
700
600
800
Line Charts
200,000
400,000
600,000
800,000
1,000,000
June July Aug Sept Oct Nov Dec Jan Feb
Horizon Graphs
100
300
200
1 2 3 4 5 6 7 8 9 10 11 12
400
-400
-200
-300
-100
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
Attributes to signal changeHow do we highlight just aspects of the design?
Attributes to signal change
ColorSun Mon Tue Wed Thu Fri Sat
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.
Attributes to signal change
Saturation
Sun Mon Tue Wed Thu Fri Sat
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.
Attributes to signal change
Position2009 Q1 Q2 Q3 Q4
BlueberriesBlue berries
Attributes to signal change
Weight
0
50
25
Feb Mar Apr MayJan 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.
Attributes to signal change
AnimationRotationOthers...
3D
3D
Hippo #1
2 Units
Hippo #2
4 Units
3D
Hippo #1
2 Units
Hippo #2
4 Units
3D
Hippo #1
2 Units
Hippo #2
4 Units
Hippo #1
2 Units
Hippo #2
4 Units
3D
Hippo #1
2 Units
Hippo #2
4 Units
3D Charts!
Vanishing Point
3D Charts!Vanishing Point
3D Charts!
Vanishing Point
3D Charts!
3D Charts!
http://www.guardian.co.uk/technology/blog/2008/jan/21/liesdamnliesandstevejobs
Data to Ink RatioA 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
Data to Ink Ratio
Data to ink Ratio
Data InkTotal Ink
=
Reduce!!!
Reduce!!!100
0
75
50
25
Q1 Q2 Q3 Q4
Reduce!!!
0
58
32
Q1 Q2 Q3 Q4
Reduce!!!
0
58
32
Q1 Q2 Q3 Q4
Reduce!!!
0
58
32
Q1 Q2 Q3 Q4
Reduce!!!
0
58
32
Q1 Q2 Q3 Q4
Reduce!!!
60%
40%
20%
80%
60%
40%
20%
80%
Smallest Effective Difference
Two Camps
http://52weeksofux.com/post/963764999/chart-junk-isnt-as-
bad-as-you-think
Chart Junk isn’t as bad as
you think
GetColor()
$hex = substr(md5(“13:00”),0,6);#36b0cf
May = #195fbb12:00 = #18940d
London = #59ead8AtMedia11 = #d7dcc4
England = #64f607
Needs a friend
May = #195fbb
12:00 = #18940d
London = #59ead8
AtMedia11 = #d7dcc4
England = #64f607
Accessibility
Types of color blindness
Deuteranopia
Protanopia
Tritanopia
Telling a story
7 Stages of a mythic journey
http://en.wikipedia.org/wiki/Monomyth
ReturnCall to
Adventure Supernaturalaid
KNOWNUNKNOWN
ThresholdGuardian(s)
Threshold(beginning oftransformation)
Helper
Mentor
Helper
Atonement
Transformation
(Gift ofthe Godess)
Abyssdeath & rebirth
TheHero'sJourney
The Image
The Embarkation
The Labyrinth
The Draw
The Payoff
The Return
The Memento
What does this have to do with visualizations?
Red shirt theory
DeterministicDesign
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>';
X
YAve
rage Speed
Angle
X = sin(Angle) * Average Speed;Y = cos(Angle) * Average Speed;
http://mitmedialab.heroku.com/logo?seed=Brian%20Suda
http://mitmedialab.heroku.com/logo?seed=AtMedia11
http://hint.fm/projects/wired2008/
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>';
http://mozillalabs.com/testpilot/
Tell one story and only one story!
Thanks
@briansudahttp://suda.co.ukhttp://optional.ishttp://designingwithdata.com
