Webstock 2014 Workshop

A workshop on data visualization given at Webstock in Wellington

Transcript

1. Becoming a Data Visualization Superhero Webstock 2014
2. Hi, my name is Sha. postarchitectural.com or @shashashasha
3. Stamen
4. Movity
5. Trulia
6. Current
7. The Plan: Building blocks, Core principles, Simple strategies, Tools and resources.
8. Why is data visualization so important now?
9. Computers vs People
10. Computers are bad at things like gender, humor.
11. The Scunthorpe Problem.
12. The Scunthorpe Problem.
13. Data is for computers.
14. People are bad at things like scale and time.
15. Everything has become a giant fucking heap. Nick Kallen
16. shorturl
18. chris jordan
19. BILL MCKIBBEN
20. The differences in meaning between mammoth and gigantic are itty-bitty and small. Bill McKibben
21. BIG DAM BIG LUNCH
23. Data visualization is a lens for seeing the world.
24. Maps, Infographics, Interactive Visualizations.
26. bit.ly/1iFnDXr
27. aaronkoblin.com/work/flightpatterns
31. Infographics
32. radicalcartography.net
33. bit.ly/LPkND7
35. Interactive Visualizations
38. So, where do you begin?
39. Exercise 1 Fun with markers
40. Four Questions: 1. What’s your name? 2. Where are you coming from? 3. When are you the most productive? 4. What colors are you wearing?
41. What’s your name? # of letters in your name
42. Where are you from? east west north south
43. When are you productive? 12pm 6am 6am 6pm 12am
44. When are you productive? 12pm 6am 6am 6pm 12am
45. What colors are you wearing?
46. Let’s see what we’ve made!
47. Why is data visualization an effective tool?
48. Preattentive Processing
53. Pretty cool huh?
55. Color& Size& Shape& Position.
56. Exercise 2 Encoding numbers
57. Instructions: Four numbers. 41, 174, 34, 118. 1. Draw a way to represent the numbers. 2. Pass your paper to the right.
58. bit.ly/1dDvxey
59. Information visualization is a language. Santiago Ortiz
60. Data visualization is a language of scale.
61. Let’s build up our vocabulary.
62. bit.ly/1lsEnlI
64. Simple questions. Simple strategies.
65. Who? What? Where? When?
66. Show everything Small multiples Highlighting outliers Linked views Micro / Macro
67. Show everything
69. sta.mn/y5p
70. flickr.com/photos/walkingsf/5560480146
71. Small multiples
72. elections.huffingtonpost.com/pollster
75. Highlighting outliers
76. bit.ly/OMAurU
77. bit.ly/1gjr2dy
78. Linked views
79. trends.truliablog.com/strata
80. Micro and macro
81. nyti.ms/mDcrXY
82. guns.periscopic.com
83. Put a slider on it.
84. gapminder.org/world
85. nyti.ms/ckcJgq
86. Combine datasets.
89. trulia.com/local
90. Okay, so.
91. Exercise 3 Asking questions of a dataset
93. Photograph, name, age, military unit, hometown, details.
94. Exercise 4 Photograph, name, age, military unit, hometown, details.
97. Who were they?
99. How did they die?
101. Where were they from?
107. There is no one right answer.
108. What are you trying to communicate?
111. We’re so used to seeing emotionless, blurry images of rockets exploding that we disconnect the image from the reality. These are images of death. Doug McCune
119. Animation and Interactivity.
127. Some helpful principles to keep in mind.
128. Don’t tackle too much. Complex encodings get confusing fast.
129. eagerpies.com
130. Remove clutter. Visual decoration is fun but distracting!
131. wtfviz.net
133. Labels and Axes Getting things right is not a weakness.
134. wrd.cm/1aNuo9g
135. bit.ly/1biMrVt
136. bit.ly/1biMrVt
137. Give your data context. Don’t be afraid to add annotations or drill down.
139. Use color smartly. Color in datavis is not just an aesthetic decision.
140. Rob Simmon, bit.ly/1eM54jF
141. Cynthia Brewer, colorbrewer2.org, bl.ocks.org
142. Complex needs simple. Simple interfaces provide ways into complex data.
145. Tilemill demo! mapbox.com/tilemill
151. d3.js d3js.org
154. Tools and Resources
155. mapping designy cookie cutter non-technical technical tilemill leaflet, d3 fusion tables google maps
156. charting highcharts designy cookie cutter non-technical technical illustrator d3 tableau
157. munging python designy cookie cutter non-technical technical google refine csvkit
158. d3 http://alignedleft.com/tutorials/d3/ https://github.com/mbostock/d3/wiki/Tutorials fusion tables http://bit.ly/OkFa7r leaflet http://leaflet.cloudmade.com/examples/quick-start.html illustrator http://flowingdata.com/2008/12/16/how-to-make-a-graph-in-adobe-illustrator/ tutorials
159. Data Visualization Blogs http://flowingdata.com http://datavisualization.ch http://thewhyaxis.info http://chartsnthings.tumblr.com http://datahacker.tumblr.com http://www.visualisingdata.com/index.php/resources/ Data Visualization Collections http://marijerooze.nl/thesis/graphics http://www.pinterest.com/arnicas http://pinterest.com/shashashasha/data-visualization more links
160. Edward Tufte The Visual Display of Quantitative Information http://www.amazon.com/The-Visual-Display-Quantitative-Information/dp/0961392142 Nathan Yau Visualize This! http://book.flowingdata.com/ Andrew Abela Advanced Presentation by Design http://www.extremepresentation.com/books/advanced_presentation_by_design/ printed stuff
161. Sweet as.