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

Maps ❤️ Data: A voyage across the world of geo-visualization

Fb35b29dfdf70000bb09777b531db5dc?s=47 Rasagy Sharma
August 01, 2017

Maps ❤️ Data: A voyage across the world of geo-visualization

A short introduction with examples of visualizing data on maps, from circles on a map, Choropleths, Hex Bins, Cartogram, Heatmap, Isopleths, Flow maps & 3D extrusions.

Conducted as part of Geo-Visualization workshops by Rasagy Sharma. Last updated in Jun, 2021 for a session for Plaksha Fellows.

This talk was first presented at Fifth Elephant (2017): https://www.youtube.com/watch?v=oF537asHhBA

Examples shared are © of respective creators (attributed in the slides).

Fb35b29dfdf70000bb09777b531db5dc?s=128

Rasagy Sharma

August 01, 2017
Tweet

Transcript

  1. Maps♥ Data A voyage across the world of geo-visualization Rasagy

    Sharma Information Designer & Data Artist
  2. What does the term map mean? Mapping data/information vs making

    a map: Verb vs noun As a noun: conceptual, geographic, schematic, contextual, fantasy…
  3. Mapping maps Detailed (Lot of Geographical data) Abstract (Less/No Geographical

    data) Accurate & real Imaginary or conceptual Geographic maps Schematic maps Mind mapping Charts Fiction or Fantasy maps
  4. Custom Mapboxstyles by Rasagy, including Heads Up & Moonlight

  5. Traffic Fatalities in Washington D.C., exhibited in Berlin

  6. Part of research collaboration with Jennings Anderson

  7. Collaboration with Harsha (Mint team)

  8. Tableau Dashboard for MADTA hackathon

  9. None
  10. This was once home

  11. Visualizing trains, exhibited at NGMA, Bengaluru

  12. WHAT can I do with this data? can I visualize

    this well? HOW
  13. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  14. 1. Introduction: Geo (map) + viz (data) 2. Maps as

    viz 3. Dots 4. Choropleths 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  15. Babylonian Map of the World (~600 BC), Anaximander’s Map (~600

    BC vs today) , Leonardo da Vinci, “Town plan of Imola” 1502
  16. “Whale Chart” (1851), Map of Hindoostan(1822)

  17. Maps as a representation of world’s data • Area covered

    by water vs land • Terrain type • Country borders • Buildings, land use • Transport network • Points of interest • & more
  18. How map data is stored: Raster vs Vector Raster: •

    Image/pixel • Data in bands • Ex: Satellite imagery (RGB & more), Elevation, Temperature etc. • Formats: GeoTIFF, JPEG2000 Vector: • Geometry: Point, line, polygon • Can have more attributes • Ex: Road network, Contour lines, Points of Interest, Building outlines & heights etc. • Formats: Shapefile, GeoJSON, TopoJSON*, KML, CSV…
  19. Data that you can show on a map: nodes, ways,

    relations Created using Geojson.io using OpenStreetMap
  20. Maps turn the real world into 2D • Projection: Equations

    to turn the earth into a 2D surface • Latitude & Longitude • Geocoding: Place à (long,lat) Illustrations from Map School, Transition by Mike Bostock
  21. Xkcdon Map Projections

  22. Figure & ground Visualizing bus stops & telemetry data by

    Rasagy
  23. Layers to visualize on top of: Streets, Light, Dark Mapboxbasemap

    styles
  24. 1. Introduction: Think about the basemap & the data 2.

    Maps as viz 3. Dots 4. Choropleths 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  25. 1. Introduction 2. Maps as viz: Visualizing data within layers

    of a map 3. Dots 4. Choropleths 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  26. Maps as visualization: Traffic Visualizing traffic in Delhi

  27. Maps as visualization: Popular areas Delhi on Google Maps

  28. 1. Introduction 2. Maps as viz: Subtle, layered in the

    map 3. Dots 4. Choropleths 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  29. 1. Introduction 2. Maps as viz 3. Dots: Showing your

    data on top of a map 4. Choropleths 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  30. Selecting a base map Created using MapboxStudio

  31. Adding data as dots Bus stop Data from OpenStreetMap

  32. Dots + opacity

  33. Dots + opacity + color

  34. Dots + opacity + color + size

  35. Visual encoding: Mapping data to visual properties Visual Encoding by

    Noah Iliinsky
  36. Where is Ukraine: dots + opacity + color Where Americans

    think Ukraine is
  37. Racial segregation: dots + color Demographics Research Group, U of

    Virginia
  38. Mapping homeless population: dots + color Understanding Homelessness

  39. Earthquakes: symbols + opacity + size + color + time

    Volcano map using Axis Maps
  40. 2019 Lok Sabha verdict: dots + size + color Mint

    Article
  41. Jobs gained vs lost: dots + size + color +

    time Geography of job loss
  42. Potholes in New Jersey: too many dots? Pothole map

  43. Clusters: Easy to read + Interactive Cluster demo

  44. 1. Introduction 2. Maps as viz 3. Dots: Visual encoding

    + controlling density 4. Choropleths 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  45. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths:

    Visualizing using geographical areas 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  46. Trade with China: Light to dark https://qz.com/950261/trump-xi-meeting-the-us- states-that-rely-the-most-on-trade-with-china/

  47. Unemployment rate: Hue + Brightness https://bl.ocks.org/mbostock/4060606

  48. Paddy crop farming in India: Area & Production India Data

    Portal by Gramener Production (tonnes) across states & districts Crop area (hectares) across states & districts
  49. BJP votes by turnout, Type of employers of women Mint

  50. Color progressions in Choropleths Mapboxblogpost

  51. NYC Tree map: Interactive choropleth → dot map https://tree-map.nycgovparks.org

  52. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths:

    Familiar, but is data based on area? 5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  53. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins: Splitting the map into small pieces 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  54. Hex bins: South Africa, Nebraska, and Kenya Hex bins in

    Mapbox
  55. Germany in circles: Income & Agriculture Zeit Magazine

  56. Deficient rainfall in India Mint

  57. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins: Best of clustering & choropleths 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  58. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram: Skewing map with data 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  59. Map of the world: Population to skew Big think article

  60. Interactive Cartogram: Varying data fields WorldMapper

  61. Dorling Cartogram: Obesity in USA (count & percentage) D3 example

  62. Square cartogram: Size for policies, color for status New York

    Times
  63. 2019 Indian Elections: Choropleth vs Cartogram General Election Results Explorer

  64. Choropleth vs Tiled grids: States with nondiscrimination laws NPR Blog

  65. Tiled grid + small multiples: Obesity over the year http://flowingdata.com/2016/09/26/the-spread-of-obesity/

  66. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram: Harder to create, more honest 7. Heatmap 8. Isopleths 9. Flow maps 10.3D
  67. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap: Smoother distribution on a map 8. Isopleths 9. Flow maps 10.3D
  68. Interactive heatmap: Clustering for attention https://blog.mapbox.com/mapbox-helps-power-snap-map- 4ced4fb3176a

  69. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap: High level overview, choose colors wisely 8. Isopleths 9. Flow maps 10.3D
  70. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths: Using lines to mark data as boundaries 9. Flow maps 10.3D
  71. Contour maps/Isopleths: Distances you can cover in x time https://www.mapbox.com/bites/00156/

  72. Metro connectivity in Delhi Mint

  73. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths: Dynamic, novel view of time-based data 9. Flow maps 10.3D
  74. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps: Connecting a map 10.3D
  75. Flow: Slave trade from Africa http://yalebooks.yale.edu/book/9780300212549/atlas-transatlantic-slave-trade

  76. Migration in Indian metros Mint

  77. Flow: Where students go to study NY Times

  78. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps: Connections lead to stories 10.3D
  79. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D: Using another dimension
  80. Colored buildings: Zoning map for Vancouver • http://maps.nichols onroad.com/zones/

  81. Density & count: Height for density, volume for count •

    https://www.m apbox.com/bit es/00273/
  82. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D: Do you really need to use another dimension?
  83. 1. Introduction 2. Maps as viz 3. Dots 4. Choropleths

    5. Bins 6. Cartogram 7. Heatmap 8. Isopleths 9. Flow maps 10.3D: Using another dimension
  84. The spectrum of tools Interactive tools: Tableau, Flourish, Mapbox Studio…

    Programming libraries: d3 (js), Mapbox GL (js), Deck GL (js), ggmap (R), basemap+matplotlib (Python) GIS tools: ArcGIS, QGIS…
  85. Indian choropleths using Excel https://gramener.com/map/

  86. Flourish templates https://flourish.studio/examples/

  87. Tableau’s Story points https://public.tableau.com/

  88. QGIS: Open source, great for print https://qgis.org/en/site/

  89. Mapbox: Interactive geo viz on web https://demos.mapbox.com/scrollytelling/

  90. Where to get Indian data • Datameet shapefiles (github.com/datameet/maps) •

    Open data portals (data.gov.in, indiadataportal.com etc.) • OpenStreetMap (openstreetmap.org, extract using overpass-turbo.eu) • Ask on Datameet group (datameet.org & google group)
  91. “Nothing is certain in this life but death, taxes and

    requests for geographic data to be represented on a map.” — Danny DeBelius (NPR)
  92. Twitter: @rasagy Instagram: @rasagy.sharma / @data.n.coded