DIBI Conference: Visualising Data

1,450 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,450
On SlideShare
0
From Embeds
0
Number of Embeds
324
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

DIBI Conference: Visualising Data

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

×