DIBI Conference: Visualising Data

  • 1,170 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,170
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Visualising DataBrian Suda Newcastle, Englandsuda.co.uk 54° 58 2.7876"June 8th -1° 36 9.9324"
  • 2. Todays focus
  • 3. Each Chart andGraph type tells a different story
  • 4. Bar Charts400300200100 1 2 3 4 5 6 7 8 9 10 11 12
  • 5. Area Charts800700600500400300200100 1 2 3 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. 3D
  • 9. 3D Charts! Vanishing Point
  • 10. 3D Charts! Vanishing Point
  • 11. 3D Charts! Vanishing Point
  • 12. 3D Charts!
  • 13. 3D Charts!http://www.guardian.co.uk/technology/blog/2008/jan/21/ liesdamnliesandstevejobs
  • 14. 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
  • 15. Data to Ink Ratio Data to Data Ink =ink Ratio Total Ink
  • 16. Reduce!!!
  • 17. Reduce!!!10075 50 25 0 Q1 Q2 Q3 Q4
  • 18. Reduce!!!58320 Q1 Q2 Q3 Q4
  • 19. Reduce!!!58320 Q1 Q2 Q3 Q4
  • 20. Reduce!!!58320 Q1 Q2 Q3 Q4
  • 21. Reduce!!!58320 Q1 Q2 Q3 Q4
  • 22. Reduce!!! 80% 80% 60% 60% 40% 40% 20% 20%
  • 23. Two Camps
  • 24. Chart Junkisn’t as bad as you thinkhttp://52weeksofux.com/post/963764999/chart-junk-isnt-as- bad-as-you-think
  • 25. GetColor()
  • 26. #36b0cf$hex = substr(md5(“13:00”),0,6);
  • 27. June = #688937 12:00 = #18940dNewcastle = #78e926 @dibiconf = #ac744f England = #64f607
  • 28. Needs a friend
  • 29. June = #688937 12:00 = #18940dNewcastle = #78e926 Dibi = #ac744f England = #64f607
  • 30. Accessibility
  • 31. Types of color blindness
  • 32. Deuteranopia
  • 33. Protanopia
  • 34. Tritanopia
  • 35. Monopoly Money
  • 36. Red shirt theory
  • 37. Deterministic Design
  • 38. 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>;
  • 39. d p ee S e r ag YAveAn gle X X = sin(Angle) * Average Speed; Y = cos(Angle) * Average Speed;
  • 40. http://visitnordkyn.com
  • 41. http://mitmedialab.heroku.com/logo?seed=Brian%20Suda
  • 42. http://hint.fm/projects/wired2008/
  • 43. 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>;
  • 44. http://mozillalabs.com/testpilot/
  • 45. Tell one story and only one story!
  • 46. Thanks@briansudahttp://suda.co.ukhttp://optional.ishttp://designingwithdata.com