Slide 1
Slide 1 text
Maps♥ Data
A voyage across the world of geo-visualization
Rasagy Sharma
Information Designer & Data Artist
Slide 2
Slide 2 text
What does the term map mean?
Mapping data/information vs making a map: Verb vs noun
As a noun: conceptual, geographic, schematic, contextual, fantasy…
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Custom Mapboxstyles by Rasagy, including Heads Up & Moonlight
Slide 5
Slide 5 text
Traffic Fatalities in Washington D.C., exhibited in Berlin
Slide 6
Slide 6 text
Part of research collaboration with Jennings Anderson
Slide 7
Slide 7 text
Collaboration with Harsha (Mint team)
Slide 8
Slide 8 text
Tableau Dashboard for MADTA hackathon
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
This was once home
Slide 11
Slide 11 text
Visualizing trains, exhibited at NGMA, Bengaluru
Slide 12
Slide 12 text
WHAT
can I do with this data? can I visualize this well?
HOW
Slide 13
Slide 13 text
1. Introduction
2. Maps as viz
3. Dots
4. Choropleths
5. Bins
6. Cartogram
7. Heatmap
8. Isopleths
9. Flow maps
10.3D
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Babylonian Map of the World (~600 BC), Anaximander’s Map (~600 BC vs today) , Leonardo da Vinci, “Town plan of Imola” 1502
Slide 16
Slide 16 text
“Whale Chart” (1851), Map of Hindoostan(1822)
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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…
Slide 19
Slide 19 text
Data that you can show on a map: nodes, ways, relations Created using
Geojson.io using
OpenStreetMap
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
Xkcdon Map Projections
Slide 22
Slide 22 text
Figure & ground Visualizing bus stops &
telemetry data by Rasagy
Slide 23
Slide 23 text
Layers to visualize on top of: Streets, Light, Dark Mapboxbasemap styles
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Maps as visualization: Traffic Visualizing traffic in Delhi
Slide 27
Slide 27 text
Maps as visualization: Popular areas Delhi on Google Maps
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
Selecting a base map Created using MapboxStudio
Slide 31
Slide 31 text
Adding data as dots Bus stop Data from OpenStreetMap
Slide 32
Slide 32 text
Dots + opacity
Slide 33
Slide 33 text
Dots + opacity + color
Slide 34
Slide 34 text
Dots + opacity + color + size
Slide 35
Slide 35 text
Visual encoding: Mapping data to visual properties Visual Encoding by Noah Iliinsky
Slide 36
Slide 36 text
Where is Ukraine: dots + opacity + color Where Americans think Ukraine is
Slide 37
Slide 37 text
Racial segregation: dots + color Demographics Research Group, U of Virginia
Slide 38
Slide 38 text
Mapping homeless population: dots + color Understanding Homelessness
Slide 39
Slide 39 text
Earthquakes: symbols + opacity + size + color + time Volcano map using Axis Maps
Slide 40
Slide 40 text
2019 Lok Sabha verdict: dots + size + color Mint Article
Slide 41
Slide 41 text
Jobs gained vs lost: dots + size + color + time Geography of job loss
Slide 42
Slide 42 text
Potholes in New Jersey: too many dots? Pothole map
Slide 43
Slide 43 text
Clusters: Easy to read + Interactive Cluster demo
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
Trade with China: Light to dark https://qz.com/950261/trump-xi-meeting-the-us-
states-that-rely-the-most-on-trade-with-china/
Slide 47
Slide 47 text
Unemployment rate: Hue + Brightness https://bl.ocks.org/mbostock/4060606
Slide 48
Slide 48 text
Paddy crop farming in India: Area & Production India Data Portal by Gramener
Production (tonnes) across states & districts
Crop area (hectares) across states & districts
Slide 49
Slide 49 text
BJP votes by turnout, Type of employers of women Mint
Slide 50
Slide 50 text
Color progressions in Choropleths Mapboxblogpost
Slide 51
Slide 51 text
NYC Tree map: Interactive choropleth → dot map https://tree-map.nycgovparks.org
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
Hex bins: South Africa, Nebraska, and Kenya Hex bins in Mapbox
Slide 55
Slide 55 text
Germany in circles: Income & Agriculture Zeit Magazine
Slide 56
Slide 56 text
Deficient rainfall in India Mint
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
Map of the world: Population to skew Big think article
Slide 60
Slide 60 text
Interactive Cartogram: Varying data fields WorldMapper
Slide 61
Slide 61 text
Dorling Cartogram: Obesity in USA (count & percentage) D3 example
Slide 62
Slide 62 text
Square cartogram: Size for policies, color for status New York Times
Slide 63
Slide 63 text
2019 Indian Elections: Choropleth vs Cartogram General Election Results Explorer
Slide 64
Slide 64 text
Choropleth vs Tiled grids: States with nondiscrimination laws NPR Blog
Slide 65
Slide 65 text
Tiled grid + small multiples: Obesity over the year http://flowingdata.com/2016/09/26/the-spread-of-obesity/
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
Interactive heatmap: Clustering for attention https://blog.mapbox.com/mapbox-helps-power-snap-map-
4ced4fb3176a
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
Contour maps/Isopleths: Distances you can cover in x time
https://www.mapbox.com/bites/00156/
Slide 72
Slide 72 text
Metro connectivity in Delhi Mint
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
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
Slide 75
Slide 75 text
Flow: Slave trade from Africa http://yalebooks.yale.edu/book/9780300212549/atlas-transatlantic-slave-trade
Slide 76
Slide 76 text
Migration in Indian metros Mint
Slide 77
Slide 77 text
Flow: Where students go to study NY Times
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
Colored buildings: Zoning map for Vancouver • http://maps.nichols
onroad.com/zones/
Slide 81
Slide 81 text
Density & count: Height for density, volume for count • https://www.m
apbox.com/bit
es/00273/
Slide 82
Slide 82 text
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?
Slide 83
Slide 83 text
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
Slide 84
Slide 84 text
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…
Slide 85
Slide 85 text
Indian choropleths using Excel https://gramener.com/map/
Slide 86
Slide 86 text
Flourish templates https://flourish.studio/examples/
Slide 87
Slide 87 text
Tableau’s Story points https://public.tableau.com/
Slide 88
Slide 88 text
QGIS: Open source, great for print https://qgis.org/en/site/
Slide 89
Slide 89 text
Mapbox: Interactive geo viz on web https://demos.mapbox.com/scrollytelling/
Slide 90
Slide 90 text
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)
Slide 91
Slide 91 text
“Nothing is certain in this life but death, taxes
and requests for geographic data to be
represented on a map.”
— Danny DeBelius (NPR)
Slide 92
Slide 92 text
Twitter: @rasagy
Instagram: @rasagy.sharma / @data.n.coded