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

Maps, Lies and Storytelling | P04 & P05| Maps and Location

Andrew W Hill
September 26, 2014

Maps, Lies and Storytelling | P04 & P05| Maps and Location

Andrew W Hill

September 26, 2014

More Decks by Andrew W Hill

Other Decks in Education


  1. Maps, Lies & Storytelling Class 3

  2. Welcome!

  3. homework

  4. None
  5. Maps, Lies & Storytelling Guest presentation

  6. Michael Keller @mhkeller ajam reporter tow center fellow

  7. None
  8. None
  9. None
  10. None
  11. http://alj.am/1v3K9zk

  12. None
  13. Presentation URL bit.ly/itp-mhk-24

  14. bit.ly/itp-mhk-24

  15. Maps, Lies & Storytelling Section 4 - Digital maps fundamentals

  16. Web mapping

  17. Big thanks to Alan McConchie Beth Schechter & Maptime

  18. Google versus The open stack

  19. None
  20. None
  21. None
  22. How is a web map different than a digital map?

  23. Digital: involves a computer but may not be accessible by

    the internet
  24. A web map is a kind of digital map

  25. And both are very different from analog maps such as

    paper and atlases
  26. So specifically we are talking about maps you view in

    the browser
  27. None
  28. None
  29. None
  30. Digital globes are also quite different

  31. None
  32. None
  33. None
  34. What was so revolutionary about Google Maps?

  35. nope

  36. nope

  37. nope

  38. It was the tile!

  39. A tile is just an image (e.g. png)

  40. You can load an individual tile right in the browser

  41. A tile has a predictable address http://tile.stamen.com/toner/5/9/11.png

  42. A tile has a predictable address http://tile.stamen.com/toner/5/9/11.png Zoom

  43. A tile has a predictable address http://tile.stamen.com/toner/5/9/11.png Zoom X coordinate

  44. A tile has a predictable address http://tile.stamen.com/toner/5/9/11.png Zoom X coordinate

    Y coordinate
  45. Same address, same boundaries no matter what service is providing

    the tile
  46. None
  47. source: bing

  48. None
  49. Datalayers

  50. None
  51. How it comes together

  52. source http://maptime.github.io/anatomy-of-a-web-map/#84

  53. source http://maptime.github.io/anatomy-of-a-web-map/#84 We’ve actually seen all this before

  54. What did we do last week?

  55. 1. Uploaded data to a database

  56. 2. Styled those layers with CartoCSS

  57. 3. Layers were cut into tiles by CartoDB

  58. 4. Tiles were rendered via Mapnik

  59. 5. Tiles were assembled on by CartoDB.js

  60. 6. CartoDB.js made it interactive in Leaflet.js

  61. None
  62. http://bit.ly/d3-geo

  63. Important note about the tile

  64. A tile is just an image (e.g. png)

  65. A tile is just an image (e.g. png) That’s not

    really true!!!
  66. Today, it isn’t always an image

  67. And it isn’t always the same

  68. And it isn’t always the same

  69. In CartoDB, the tile can change 100% per request What

    you see What I see
  70. The fundamental difference between the maps of 2010 and the

    maps of 2016 will be that the maps of 2016 will be distinct to the viewer. Already in 2014, you may not be looking at the same map as the person sitting next to you.
  71. Maps, Lies & Storytelling Section 5 - Lies from location

  72. http://www.nyclu.org/node/930

  73. Location review

  74. 1973

  75. later

  76. later

  77. now

  78. None
  79. None
  80. What can you do with it?

  81. None
  82. None
  83. None
  84. Can other people do things with it?

  85. http://bit.ly/1obhVgW

  86. http://bit.ly/1rcnf7i

  87. Everyone is collecting your location! Some of them aren’t protecting

  88. More than SQL, more than apps

  89. None
  90. Altered realities

  91. http://bit.ly/disputed-gmaps

  92. Crimea What you see in Russia What you see in

    Ukraine We work to provide as much discoverable information as possible so that users can make their own judgments about geopolitical disputes
  93. http://bit.ly/1uP8tG4

  94. http://bit.ly/1uP8tG4 Every click draws a new map highlighting the things

    that matter most
  95. Location is good

  96. None
  97. https://www.youtube.com/watch?v=BwMM_vsA3aY

  98. http://vimeo.com/63922796

  99. http://newswatch.nationalgeographic.com/2012/07/02/crisis-mapping-haiti/

  100. Aurelia Moser Knight News Fellow Ushahidi / Internews http://aureliamoser.com/ Next

  101. Maps, Lies & Storytelling Discussion

  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. http://vimeo.com/41377618 What if Google Maps went live...

  110. http://vimeo.com/91880883

  111. None
  112. https://www.youtube.com/watch?v=fCrB1t8MncY

  113. https://www.mapbox.com/blog/video-of-beijing-from-space/

  114. Maps, Lies & Storytelling Technology aside

  115. Animated map demo

  116. http://spaceforgiants.org/?q=blog/2013/02/28/elephant- movement-in-a-human-landscape http://bit.ly/ZG0kIu

  117. https://viz2.cartodb.com/tables/ow

  118. Odyssey demo

  119. http://cartodb.github.io/odyssey.js/

  120. Maps, Lies & Storytelling Assignments

  121. Find three existing maps: One that shows an example of

    a lie told about space; Another that lies by the author probably didn't realize that it did; A third that is a clear distortion of the truth. Provide a writeup of each Assignment 1
  122. Next, create your own map that conceals a relevant truth.

    For example, a navigation map of New York that would lead a tourist to think only bikes and not cars were allowed in the city. Or be more creative. ! Use a mixture of data, color, and style to achieve your goal Assignment 2
  123. Assignment 3 Use odyssey.js to turn the map from your

    very first assignment (map your day) into a narrative story combined with the map
  124. Questions

  125. See you next week!