Visualizing macro-urban trends in cities across the world
By: Andrey Karmatsky
Andrey Karmatsky, CEO of Urbica.co, used the Mapbox GL JavaScript API to build elaborate 3D visualizations that answer these questions. You can read the full published research here. Below, Andrey explains how he and his team built an interactive data-exploration tool that allows stakeholders to compare trends in urbanization among 24 of the largest cities in the world.
According to Worldbank data, 54 percent of the world’s population lives in an urban environment. Urban agglomerations represent the concentration of people in developed areas that extend outward from cities. As this pattern unfolds, complex relationships develop between different parts of the city due to the movement of goods and people, including traffic and commuting patterns.
This effect brings many challenges for businesses and city administrations. For example, high population density requires better transportation infrastructure for improved urban mobility and control of the environmental footprint. The tool we built provides a strategic view for data-driven decision making.
How did you build these visualizations?
To visualize our data, we used the Mapbox GL JS API because it is an efficient way to map a large volume of data in the browser. It was intuitive for us as developers, and it allowed us to create amazing 3D fill-extrusions as well as take a data-driven design approach.
First, we designed base maps in Mapbox Studio and sketched designs for the analytical layers. Once we had a proof-of-concept, we moved the analytical layer styles into the code of the web-app. The challenge is always getting started, but as a small team of analysts, designers, and developers, the ability to write custom styles based on the properties of our data created an efficient work process.
Where did the data come from?
There were a lot of data sources, from national statistics orgs to open data from science and education groups. For example, to determine built-up areas by years, we used open data from the Atlas of Urban Expansion and then filled in the gaps by analyzing historical Landsat imagery. The data we collected was processed using QGIS, python, and PostgreSQL/PostGIS.
How should we interpret these models?
The territory of an agglomeration may be divided into two main parts: the core and the periphery. In order to delineate the core, we divided the urban territory into square kilometre blocks and filtered out those blocks with a population density of over 1,500 people. Enclaves with a lower population density were also included in the core.
The periphery of an agglomeration comprises municipalities where at least 15% of the employed population travels regularly into the core for work or study and then return back home again. Such journeys are referred to as pendulum migration or commuting. Using the tool you can compare agglomerations, commute patterns, and isochrones in 8 of the largest cities in the world based on 6 parameters: population density, employment density, workers/residents, carbon, education, and housing price.
What conclusions can we draw?
For example, the population in Tokyo is spread out very evenly. This is largely explained by the large proportion of residents who live in their own homes. The optimal density at such a size is one of the strong points of the Tokyo agglomeration.
The Moscow agglomeration, unlike Tokyo, is densely populated only within the boundaries of its core. Residents of the Moscow agglomeration primarily work in Moscow proper. This puts significant pressure on the transportation infrastructure both in the capital and in its suburbs.
The employment density in the center of London is one of the highest in the world. It is also very high in many of its second order cores. The structure of the London agglomeration is completely different from Moscow.
What’s next for you and your team?
We plan to keep moving forward using Mapbox GL JS. It is the best way to design a good map ever.
Want to try it for yourself? Create your Mapbox Studio account and explore the Studio Manual to start creating custom maps with your data. To learn more about what you can do with Mapbox GL JS, check out our API documentation and play with one of our tutorials.
Andrey Karmatsky (@karmatsky) | Twitter
How I built it: 3D agglomerations was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.