Dive into large datasets with 3D shapes in Mapbox GL
By Peter Liu
Explore America’s population density down to the city block using this new visualization. We had fun using Mapbox GL JS’s new 3D features and data-driven styling to show the remarkable concentration of people in areas like New York, where an average of over 27,000 people live in each square mile.
At first glance, these images of Chicago, New Orleans, and Manhattan look like skyscrapers, but those aren’t building heights — these are maps of where people live.
Chicago
New Orleans
New York
3D is uniquely well-suited to this dataset because the height of each shape represents population density, and the volume is proportional to the raw count.
How we made the map
We started with Census block population counts and turned them into population densities using Turf.js’s area calculation. Then we used Tippecanoe to generate vector tiles from the 17 gigabytes of GeoJSON data, and uploaded those tiles to Mapbox.
We hooked up the new 3D features in Mapbox GL JS to show census blocks as extrusions, sized by density. To give address-level context for each highlighted block, we used our geocoder.
Build your own!
We would love to see your data-driven maps. If you have something to share, tweet us at @Mapbox!
