Mapping Population in 3D

UK developers Parallel have released an interactive map which visualizes UK population density in 3D. Their ONS Population Estimates map shows the population density in each UK Lower Super Output Area (LSOA) and the age breakdown of the population in each LSOA.

The population density view on the map uses Mapbox GL's extrusion property to create 3D towers on the map. The height of the towers represents the population density of the LSOA. In other words the higher the tower then the greater the population density.

If you switch to the 'Age Profile' option then you can view a breakdown of the numbers in each age group of both the male & female population in each LSOA. In this 'Age Profile' mode the map still shows a choropleth view of the population density. However if you hover over an LSOA on the map then you can view a population pyramid chart which visualizes the area's age profile.


Mapbox has also used the extrusion property to visualize population density. Their Population Density Inspector allows you to view the number of people living in each census block in America as a 3D tower.

On The Population Density Inspector the height of each census block on the map represents the population density (based on census block population counts). You can read about how Mapbox created their map (with a little help from Turf.js and Tippecanoe) on the Mapbox blog.


You don't have to use Mapbox GL's extrusion property to map population density in 3D. Bjørn Sandvik has posted an interesting tutorial on how to use Three.js & D3.js to visualize population density in 3D. The tutorial includes a 3D map of Oslo's population density

The second tutorial in Mapping Grid-Based statistics using OpenLayers, Three.js and D3.js provides a 3d visualization of Oslo's population data, with each grid's population density shown as a 3D tower or block on the map. The tutorials in the post are in Norwegian but the source code is available on GithHub and should be easy to follow for anyone familiar with OpenLayers and D3.js.