Datadesignmeaning

1. DATA DESIGN MEANING

2. DATA ? PROFIT MEANING!

3. acquire parse filter mine represent refine interact

4. acquire parse filter mine ENGINEERING represent DESIGN refine interact

5. DATA ? PROFIT MEANING!

6. VISUALIZATIONS CHARTS

7. 0 0.25 0.5 0.75 1

9. HTTP://FLIC.KR/P/967DVR

10. http://bit.ly/vYZgQb

11. Group 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Period 1 2 1 H He 3 4 5 6 7 8 9 10 2 Li Be B C N O F Ne 11 12 13 14 15 16 17 18 3 Na Mg Al Si P S Cl Ar 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 4 K Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 5 Rb Sr Y Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I Xe 55 56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 6 Cs Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn 87 88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 7 Fr Ra Rf Db Sg Bh Hs Mt Ds Rg Cn Uut Uuq Uup Uuh Uus Uuo 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 Lanthanides La Ce Pr Nd Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 Actinides Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr

15. http://nyti.ms/z7n5Xg

17. I NCEPTION

18. acquire parse filter mine ENGINEERING represent DESIGN refine interact

19. first, DO NO HARM

20. OMIT NEEDLESS DATA

21. OMIT the NEEDLESS

22. DATA INK to ratio

23. from “Designing with Data” by Brian Suda http://www.designingwithdata.com/

29. CHARTJUNK

30. LIES, damn LIES, and STATISTICS

31. 2007 2008 2009 2010 2011

32. 2007 2008 2009 2010 2011 20% 20% 20% 20% 20%

33. first, DO NO HARM

34. IN TER ACT IVE

35. you can show MUCH MORE data

36. you can show TOO MUCH data

37. NARRATIVE

38. READER driven AUTHOR

39. NARRATIVE VISUALIZATION TELLING STORIES WITH DATA http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

40. figure 1 “THE MARTINI GLASS”

41. figure 1 “THE MARTINI GLASS” GUIDED START EXPLORE NARRATIVE

42. figure 1 “THE MARTINI GLASS” “THE TWIST” GUIDED WOW ADD LEDE DETAIL NARRATIVE

43. figure 2 “THE INTERACTIVE SLIDESHOW” ABC 123 *@! http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

44. figure 3 “THE DRILL-DOWN”

45. D3 DATA-DRIVEN DOCUMENTS d3js.org PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

46. a true VISUALIZATION TOOLKIT PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

47. map DATA onto MEANINGFUL VISUALS PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

48. map DATA onto THE DOM PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

49. VISUALIZATIONS DRAWING PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

50. CONVENIENCE d3 supplies the annoying-to-write parts PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

51. LOAD & MANIPULATE sometimes you don’t control the data JSON CSV, TSV PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

52. INTERPOLATE colors dimensions positions … every property. PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

53. SCALES linear logarithmic quantile ordinal time nice PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

54. // linear scale normal = d3.scale.linear() .domain([0, 1.0]) .range([0, 255]); normal(0.5); // == 127.5 PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

55. // round scale round = d3.scale.linear() .domain([0, 1.0]) .range([0, 255]); round(0.5); // == 128 PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

56. UGLY 12.973 39.144 PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

57. NICE 12 40 PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

58. // ugly scale ugly = d3.scale.linear() .domain([0.104, 0.95]) .rangeRound([10, 50]) // nice scale nice = d3.scale.linear() .domain([0.104, 0.95]) .rangeRound([10, 50]) .nice() PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

59. DATA JOINS marrying data to the DOM http://bost.ocks.org/mike/join/ PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

60. for (i=0; i<data.length, i++) { // create some elements // add them to the DOM PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

61. for (i=0; i<data.length, i++) { // create some elements // add them to the DOM PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

62. // svg is the DOM root of our // d3 visualization svg = d3.select(‘#mydiv’).append(‘svg’) svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", function(d,i) { return d;}); PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

63. BUT there are no circles to select!? PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

64. D3 MAKES THE DOM LIKE THE DATA PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

65. data DOM ENTER UPDATE EXIT PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

66. ANIMATION? ENTER fade-in UPDATE transition EXIT fade-out PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

67. SVG Scalable Vector Graphics PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

68. <body> <h1>My Awesome SVG</h1> <svg>...</svg> <p>Wasn’t that awesome?</p> </body> PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

69. HTML <svg> <circle r=“10” class=“special”> </svg> CSS .special { fill: red; stroke: black; stroke-width: 2px; } PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

70. CSS .special { fill: red; stroke: black; stroke-width: 2px; } .special:hover { fill: blue; stroke: white; stroke-width: 10px; } PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

71. JQUERY $(".station[data-id=216]"); D3 d3.selectAll('.station[data-id="216"]'); PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

72. PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @idangazit

Datadesignmeaning

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Datadesignmeaning

Ähnlich wie Datadesignmeaning (12)

Mehr von Idan Gazit

Mehr von Idan Gazit (10)

Datadesignmeaning