Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webstock 2014 Workshop

Sha Hwang
February 12, 2014

Webstock 2014 Workshop

A workshop on data visualization given at Webstock in Wellington

Sha Hwang

February 12, 2014
Tweet

More Decks by Sha Hwang

Other Decks in Design

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

  17. None
  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

  22. None
  23. Data visualization is a lens for seeing the world.

  24. Maps, Infographics, Interactive Visualizations.

  25. None
  26. bit.ly/1iFnDXr

  27. aaronkoblin.com/work/flightpatterns

  28. None
  29. None
  30. None
  31. Infographics

  32. radicalcartography.net

  33. bit.ly/LPkND7

  34. None
  35. Interactive Visualizations

  36. None
  37. None
  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

  49. None
  50. None
  51. None
  52. None
  53. Pretty cool huh?

  54. None
  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

  63. None
  64. Simple questions. Simple strategies.

  65. Who? What? Where? When?

  66. Show everything Small multiples Highlighting outliers Linked views Micro /

    Macro
  67. Show everything

  68. None
  69. sta.mn/y5p

  70. flickr.com/photos/walkingsf/5560480146

  71. Small multiples

  72. elections.huffingtonpost.com/pollster

  73. None
  74. None
  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.

  87. None
  88. None
  89. trulia.com/local

  90. Okay, so.

  91. Exercise 3 Asking questions of a dataset

  92. None
  93. Photograph, name, age, military unit, hometown, details.

  94. Exercise 4 Photograph, name, age, military unit, hometown, details.

  95. None
  96. None
  97. Who were they?

  98. None
  99. How did they die?

  100. None
  101. Where were they from?

  102. None
  103. None
  104. None
  105. None
  106. None
  107. There is no one right answer.

  108. What are you trying to communicate?

  109. None
  110. None
  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
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. None
  119. Animation and Interactivity.

  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. None
  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

  132. None
  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.
  138. None
  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.

  143. None
  144. None
  145. Tilemill demo! mapbox.com/tilemill

  146. None
  147. None
  148. None
  149. None
  150. None
  151. d3.js d3js.org

  152. None
  153. None
  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.