Maps, Map Projections & Cartographic Design
Mon Mar 31, 2025
Interactive Data Visualization & Society
It's Map Week!
Types of Maps
General-reference
Multi-purpose maps. Used to emphasize the location of spatial phenomena. Focus on accuracy for sake of navigation and location. Can contain many different elements and be used for many different purposes.
Thematic
Single purpose maps. Show a particular theme. Used to emphasize spatial pattern of one or more geographic attributes, such as population density, family income, or daily maximum temperatures.
General-reference Map
General-reference Map
General-reference Map
Isochrone Map
From Wikipedia: An early isochrone map
of Melbourne rail transport travel times, 1910-1922
Thematic Map > Isochrone Map
Isochrones
When applied to transportation, they are called travelsheds.
You will be making these in lab this week!
Extra Maps Workshops
with Eric Huntley!
Mapbox GL JS 1: Getting Started, Vector Tiles, Styling
Thu, 4/10, 5–6:30 PM, Room 9-217
Mapbox GL JS 2: Interaction and State Management
Thus 4/17 5–6:30 PM, Room 9-217
Thematic Map > Choropleth Map
Choropleth map
Why does it have this silly name? A British cartographer wanted to sound fancy in 1938 and so looked to ancient Greek for a complicated name.
Choros - region, Plethos - multitude
First known choropleth (carte teintée) - Charles Dupin's 1826 map of literacy in France.
Thematic Map > Choropleth Map
Thematic Map > Variations on the Choropleth Map
Geographic units
What geographic units are being used?
How are variables are being mapped onto those units?
How to choose the right geographic units for your map
Thematic Map > Cartograms
Maps - encoding channels
The cartogram tries to make size and shape available as channels to encode information while keeping position & orientation relatively the same.
Thematic Map > Dot Map
Where Americans Live (FlowingData.com)
Thematic Map > Dot Map
Thematic Map > Heat Map
LA Times
Thematic Map > Heat Map
LA Times
Thematic Map > Flowline Map
Thematic Map > Flowline Map
French wine exports, 1864
Thematic Map > Proportional Symbol Map / Bubble Map
Thematic Map > Combining map types
The most common error with choropleth maps…
We often need to normalize our choropleth maps to make apples-to-apples comparisons
Q: If we are depicting something related to people (COVID cases, car crashes, air pollution, babies born, etc), which states would have MORE cases and which states would have FEWER?
Q: If we are depicting something related to people (COVID cases, car crashes, air pollution, babies born, etc), which neighborhoods would have MORE cases and which neighborhoods would have FEWER?
Normalized vs Unnormalized maps tell wildly different stories
Counts – # motor vehicle deaths
Rates – motor vehicle death rate (probably something like # motor vehicle deaths in that county / total population of that county)
RATES not COUNTS
Normalized Data
Examples of Normalized Maps
Mercator projection
Universal Transverse Mercator projection
From Sphere to Plane
Latitude/longitude are spherical - they are measured in degrees.
MIT = 42.36020988813414 (lat), -71.09470717313962 (long)
But we often need to represent maps on planar surfaces
From Mike Foster
Even harder.
This much earth...
...has to fit onto this surface.
Geographic versus Projected Coordinate Systems
http://branigan.net/maps/projection-overlays/contiguous-usa.html
http://mjfoster83.github.io/projections/#/10
Map Projections
Tissot's Indicatrix
Stereographic projection
Mercator projection
Fuller projection
Neil Kaye/@neilrkaye
Projections are tradeoffs between the preservation of...
Conformal - Shapes are preserved | Equal Area - Areas are preserved |
Equidistant - Distance from single location to other locations preserved. | Azimuthal - Direction from single location to other locations preserved. |
Mercator
Gall-Peters
Azimuthal equidistant
Equidistant conic
Web Mercator - How did we get here?
Google selected Web Mercator as the projection of choice when launching Google Maps.
Variant of Mercator that ignores Earth's ellipticity for fast calculation, and clips latitudes to ~85.05° for square presentation.
Now it's the web map standard projection. Default projection in MapBox.
The web mercator projection is great for street-scale navigation! It preserves angles between lines, avoids stretching of shapes, and north is always up at any point.
Open street map tiles in Mollweide projection on zoom 11
Map Design and Cartography
Cartography is the study and practice of making maps.
Map design, or cartographic design, is the mindful creation and intentional organization of map elements to create meaningful visuals that convey a story to the map audience.
When you are making a map, you are architecting attention – designing visual cues for where to look when, what to pay attention to, and how to make meaning from it.
Interactive web mapping platforms
Code (Javascript)
No code
Web Map Design Fundamentals
Web Map Design Fundamentals
Locator map
Map extent
Web Map Design Fundamentals
Where is your map centered? What is the area of interest?
Can users pan to move around the map?
Can they zoom in/out of the map?
Web Map Design Fundamentals
Visual Hierarchy
Choose a Visual Hierarchy that represents the conceptual hierarchy.
Figure/Ground
Figure/Ground is a type of perceptual grouping in which one can distinguish ‘figure’ from the ‘background’. It is important on maps.
Visual Hierarchy
Making Maps by Krygier and Wood, 2011
Web Map Design Fundamentals
BaseMap
Web Map Design Fundamentals
Color on your Maps
Divergent
Sequential
Qualitative/Categorical
Web Map Design Fundamentals
Interaction Design - Web maps are apps!
MapBox GL interaction examples
Extra Maps Workshops
with Eric Huntley!
Mapbox GL JS 1: Getting Started, Vector Tiles, Styling
Thu, 4/10, 5–6:30 PM, Room 9-217
Mapbox GL JS 2: Interaction and State Management
Thus 4/17 5–6:30 PM, Room 9-217