@media 11: visualising data

Download @media 11: Visualising Data

Post on 12-Jan-2015

1.409 views

Category:

Technology

7 download

Embed Size (px)

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, Ill 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

  • 1. Visualising Data Brian SudaLondon, England suda.co.uk5130N May 26th06Ehttp://www.ickr.com/photos/fepigio/461422792/

2. Todays focus 3. Each Chart andGraph type tells adifferent story 4. Bar Charts4003002001001 2 3 4 5 6 7 8 9 10 11 12 5. Area Charts8007006005004003002001001 23 4 5 6 7 8 9 10 11 12 6. Line Charts1,000,000800,000600,000400,000200,000 June July Aug Sept Oct Nov Dec Jan Feb 7. Horizon Graphs400300200100-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 8. Attributes to signal changeHow do we highlight just aspects of the design? 9. 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 10. 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 11. Attributes to signal changeBlueberriesBlue berries 2009 Q1 Q2 Q3 Q4 Position 12. Attributes to signal change 50 250Jan FebMar Apr May JunIn vitae facilisis nisl. Pellentesque facilisis rutrum sem non viverra. Curabitur tortoripsum, sodales et viverra nec, malesuada sed felis. Nulla ornare velit diam, sit ametimperdiet ligula. Pellentesque vel dictum nunc. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec suscipit venenatis feugiat. Weight 13. Attributes to signal change Animation Rotation Others... 14. 3D 15. 3DHippo #1 Hippo #2 2 Units4 Units 16. 3DHippo #1 Hippo #2 2 Units4 Units 17. 3DHippo #1 Hippo #2Hippo #1 Hippo #2 2 Units4 Units 2 Units4 Units 18. 3DHippo #1 Hippo #2 2 Units4 Units 19. 3D Charts! Vanishing Point 20. 3D Charts!Vanishing Point 21. 3D Charts! Vanishing Point 22. 3D Charts! 23. 3D Charts!http://www.guardian.co.uk/technology/blog/2008/jan/21/liesdamnliesandstevejobs 24. Data to Ink RatioA large share of ink on a graphic shouldpresent data-information, the inkchanging as the data change. Data-ink isthe non-erasable core of a graphic, thenon-redundant ink arranged in responseto variation in the numbers represented. Tufte, 1983 25. Data to Ink Ratio Data toData Ink=ink Ratio Total Ink 26. Reduce!!! 27. Reduce!!!10075 50 25 0Q1Q2 Q3Q4 28. Reduce!!!58320 Q1Q2 Q3Q4 29. Reduce!!!58320 Q1Q2 Q3Q4 30. Reduce!!!58320 Q1Q2 Q3 Q4 31. Reduce!!!58320 Q1 Q2 Q3 Q4 32. Reduce!!! 80% 80% 60% 60% 40% 40% 20% 20% 33. Smallest EffectiveDifference 34. Two Camps 35. Chart Junkisnt as bad as you thinkhttp://52weeksofux.com/post/963764999/chart-junk-isnt-as- bad-as-you-think 36. GetColor() 37. #36b0cf$hex = substr(md5(13:00),0,6); 38. May = #195fbb12:00 = #18940dLondon = #59ead8AtMedia11 = #d7dcc4 England = #64f607 39. Needs a friend 40. May = #195fbb 12:00 = #18940dLondon = #59ead8AtMedia11 = #d7dcc4 England = #64f607 41. Accessibility 42. Types of colorblindness 43. Deuteranopia 44. Protanopia 45. Tritanopia 46. Telling a story 47. 7 Stages of a mythicjourney 48. Call toAdventure Supernatural Return aid(Gift of Threshold the Godess) KNOWN Guardian(s) UNKNOWNThreshold (beginning of transformation)AtonementThe MentorHelper HerosJourneyTransformationHelper Abyssdeath & rebirthhttp://en.wikipedia.org/wiki/Monomyth 49. The Image 50. The Embarkation 51. The Labyrinth 52. The Draw 53. The Payoff 54. The Return 55. The Memento 56. What does thishave to do withvisualizations? 57. Red shirt theory 58. Deterministic Design 59. echo ;$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 ;}echo ; 60. d p eeSe r ag YAveAn gleXX = sin(Angle) * Average Speed;Y = cos(Angle) * Average Speed; 61. http://visitnordkyn.com 62. http://mitmedialab.heroku.com/logo?seed=Brian%20Suda 63. http://mitmedialab.heroku.com/logo?seed=AtMedia11 64. http://hint.fm/projects/wired2008/ 65. echo ;$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 ; echo "n"; $prev += (int)($v/$scaler);}}echo ; 66. http://mozillalabs.com/testpilot/ 67. Tell one story and only one story! 68. Thanks@briansudahttp://suda.co.ukhttp://optional.ishttp://designingwithdata.com