Quantcast
Channel: maps for developers - Medium
Viewing all articles
Browse latest Browse all 2230

Dive into large datasets with 3D shapes in Mapbox GL

$
0
0

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.

Use the sidebar to find any U.S. city, or toggle between two- and three-dimensional views of the data. Right-click drag (or hold down control) to tilt and rotate the map. On mobile? Tap here to see extrusions for GL JS in action

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!


Viewing all articles
Browse latest Browse all 2230

Trending Articles