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
   

   View Slide

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…
   

   View Slide

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
   

   View Slide

4. Custom Mapboxstyles by Rasagy, including Heads Up & Moonlight
   

   View Slide

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

   View Slide

6. Part of research collaboration with Jennings Anderson
   

   View Slide

7. Collaboration with Harsha (Mint team)
   

   View Slide

8. Tableau Dashboard for MADTA hackathon
   

   View Slide

9. View Slide

10. This was once home
    

    View Slide

11. Visualizing trains, exhibited at NGMA, Bengaluru
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

15. Babylonian Map of the World (~600 BC), Anaximander’s Map (~600 BC vs today) , Leonardo da Vinci, “Town plan of Imola” 1502
    

    View Slide

16. “Whale Chart” (1851), Map of Hindoostan(1822)
    

    View Slide

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
    

    View Slide

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…
    

    View Slide

19. Data that you can show on a map: nodes, ways, relations Created using
    Geojson.io using
    OpenStreetMap
    

    View Slide

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
    

    View Slide

21. Xkcdon Map Projections
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Maps as visualization: Traffic Visualizing traffic in Delhi
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Selecting a base map Created using MapboxStudio
    

    View Slide

31. Adding data as dots Bus stop Data from OpenStreetMap
    

    View Slide

32. Dots + opacity
    

    View Slide

33. Dots + opacity + color
    

    View Slide

34. Dots + opacity + color + size
    

    View Slide

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

    View Slide

36. Where is Ukraine: dots + opacity + color Where Americans think Ukraine is
    

    View Slide

37. Racial segregation: dots + color Demographics Research Group, U of Virginia
    

    View Slide

38. Mapping homeless population: dots + color Understanding Homelessness
    

    View Slide

39. Earthquakes: symbols + opacity + size + color + time Volcano map using Axis Maps
    

    View Slide

40. 2019 Lok Sabha verdict: dots + size + color Mint Article
    

    View Slide

41. Jobs gained vs lost: dots + size + color + time Geography of job loss
    

    View Slide

42. Potholes in New Jersey: too many dots? Pothole map
    

    View Slide

43. Clusters: Easy to read + Interactive Cluster demo
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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

    View Slide

48. Paddy crop farming in India: Area & Production India Data Portal by Gramener
    Production (tonnes) across states & districts
    Crop area (hectares) across states & districts
    

    View Slide

49. BJP votes by turnout, Type of employers of women Mint
    

    View Slide

50. Color progressions in Choropleths Mapboxblogpost
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

54. Hex bins: South Africa, Nebraska, and Kenya Hex bins in Mapbox
    

    View Slide

55. Germany in circles: Income & Agriculture Zeit Magazine
    

    View Slide

56. Deficient rainfall in India Mint
    

    View Slide

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
    

    View Slide

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
    

    View Slide

59. Map of the world: Population to skew Big think article
    

    View Slide

60. Interactive Cartogram: Varying data fields WorldMapper
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

68. Interactive heatmap: Clustering for attention https://blog.mapbox.com/mapbox-helps-power-snap-map-
    4ced4fb3176a
    

    View Slide

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
    

    View Slide

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
    

    View Slide

71. Contour maps/Isopleths: Distances you can cover in x time
    https://www.mapbox.com/bites/00156/
    

    View Slide

72. Metro connectivity in Delhi Mint
    

    View Slide

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
    

    View Slide

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
    

    View Slide

75. Flow: Slave trade from Africa http://yalebooks.yale.edu/book/9780300212549/atlas-transatlantic-slave-trade
    

    View Slide

76. Migration in Indian metros Mint
    

    View Slide

77. Flow: Where students go to study NY Times
    

    View Slide

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
    

    View Slide

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
    

    View Slide

80. Colored buildings: Zoning map for Vancouver • http://maps.nichols
    onroad.com/zones/
    

    View Slide

81. Density & count: Height for density, volume for count • https://www.m
    apbox.com/bit
    es/00273/
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

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…
    

    View Slide

85. Indian choropleths using Excel https://gramener.com/map/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

91. “Nothing is certain in this life but death, taxes
    and requests for geographic data to be
    represented on a map.”
    — Danny DeBelius (NPR)
    

    View Slide

92. Twitter: @rasagy
    Instagram: @rasagy.sharma / @data.n.coded
    

    View Slide