Your SlideShare is downloading. ×
DIBI Conference: Visualising Data
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

DIBI Conference: Visualising Data

1,199
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,199
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
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