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).

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
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