How to Visualize Urban Transformation

Lisa Stähli
8 min readJan 8, 2020

Often, urban transformation over time is shown and visualized using satellite images and looking at the world from a bird’s-eye view. In order to increase the understanding of settlement development and it’s impact, such visualizations could benefit from two things added: a third dimension and interactivity.

Recently, I picked up and improved an old student project of mine that visualizes the growth of my hometown Zurich, Switzerland.

Zurich, Switzerland in 1850 vs. 2015.

I was mainly inspired to pick it back up by the recent New York Times article ‘A Decade of Urban Transformation, Seen From Above’ by Emily Badger and Quoctrung Bui, and the release of an openly available data set of the city of Zurich that included the construction year of all buildings and could be joined with their beautiful 3D city model.

Additionally, the mapping and rendering API that I have used to implement this project (ArcGIS API for JavaScript) has made extensive progress since I last worked on this application (v 4.3), which was another good reason to upgrade to the latest version (v 4.13) and review the use case.

While bringing the application up to speed, I started thinking about why visualizing urban growth seems to resonate so much with people. I believe it has to do with our fascination for what we can achieve over time. When looking at satellite images that show how much a part of the world has changed, we realize that we as humans collectively have quite a big impact. This is both shocking and in a way satisfying. It means that we do have the power and ability to make change happen.

I believe that visualizations of urban transformations are both beautiful and insightful if not eye-opening — all in all definitely worth looking into. As a software developer with a background in cartography and urban planning, I have seen quite some spatio-temporal visualizations depicting urban growth such as the following:

  • The Urban Population Map by UNICEF
    A simple map showing global population change as dot density per country animated over time including prospected growth. This visualization shows where most growth has happened and will continue to happen in the future. It convinces with simplicity and a clear focus on the message to deliver.
A screenshot of the Urban Population Map. © UNICEF
  • The World City Populations Interactive Map 1950–2035 by Duncan Smith
    An interactive global map depicting the world’s largest cities in 2D and how they have grown over time with a radial cartographic symbol. Additionally, users can hover over cities to see the data visualized in graphs and to learn more about the city’s global ranking.
World City Populations from 1950 to 2035. © Duncan Smith
  • The Atlas of Urban Expansion by New York University (NYU)
    This research effort concluded in a global overview of how 200 cities have developed over time. For every city, there are 2D maps and charts available of different content and depth.
The urban development of the city of Taipei, Taiwan. © NYU
  • Hotspot Cities by the Atlas for the End of the World
    This selection of global cities has an emphasis on the impact of urban sprawl on biodiversity. In a collection of beautifully crafted, high-resolution 2D maps (that load quite slowly), the user can understand where conflicts between urban development and vegetation will occur in the future.
Hotspot cities Sydney and Cape Town where urban growth endangers biodiversity. © Atlas of the End of the World
  • Human Terrain by Matt Daniels (Pudding)
    An interactive 3D map showing global population in large cubes and with an intuitive color-scale. It shows not only population distribution but also visualizes the population change. As it has a global scale, the biggest challenge is to find the right balance between visualizing large cities (like Mexico City) and smaller cities with the same symbology so that the user understands both sides of the spectrum.
Human Terrain, an interactive 3D population map published on The Pudding. © Matt Daniels
  • A Decade of Urban Transformation, Seen From Above by Emily Badger & Quoctrung Bui (New York Times)
    This article highlights a variety of urban transformations, from settlement development over how tech companies are changing the urban landscapes as well as how areas affected by disaster are being rebuilt. The examples are well chosen and illustrated with vivid satellite images. Especially the animation of blending over two images of the same place at different times is compelling and eye-opening.
A bird’s-eye view of Katy, Texas between 2012 and 2018. © New York Times

As you can see from this short selection of visualizations, there are many ways to tell the stories about urban transformation in different places in the world. However, most of those visualization are still mainly using static information and spatial data is mostly mapped in 2D. In the following, I want to illustrate why interactivity and a third dimension are so important when visualizing urban growth. I believe we can break it down to four main benefits: density, perspective, the combination of realism & abstraction, and relatability.

Density

One of the most difficult topics to visualize and understand in relation to urban sprawl is density. Appropriate and understandable visualizations of how density changes and might change over time is especially crucial for places where space is scarce. And if we are trying to minimize the amount of land covered by construction in order to conserve and protect as many natural landscapes as possible, this is true for every place on this planet.

At the same time, density and especially densification of urban areas is a trigger of discontent and even fear for a majority of the population — e.g., when it comes to new large redevelopment projects. Therefore, density is a delicate topic and visualizations of (prospected) urban transformation should be both honest as well as enlightening when it comes to density.

The same neighborhood shown in 2D (top-level perspective) and 3D (tilted view).

2D visualizations of urban areas from a top-level perspective often fail to give a good understanding of the density of a certain area. The missing third dimension is not represented and gives the impression of a lower than actually perceived density. Only by showing the vertical dimension of buildings, can we fully understand density patterns and open the path to a sustainable densification of our cities. By informing and educating citizens about densification, we can continuously increase its acceptance.

Perspective

Another reason for an interactive approach in 3D, is that the bird’s-eye view is often not enough to tell the whole story. In a 3D space, we can navigate and explore a visualization from different viewpoints which provides different perspectives. The street-view perspective is one of the most useful but also most difficult to get right when it comes to interactive 3D environments. Looking at the world from the ground up is what we are used to, so we can typically familiarize ourselves with such visualizations quicker.

Any 2D visualization requires our brain to map what we know from the real world to an unfamiliar 2D space. This is a cognitive load that can be avoided by showing the data in a way that people are familiar with, to free up more brain capacity for the message of the visualization.

A street-view perspective of the famous ‘Bahnhofstrasse’, the biggest shopping street in Zurich.

Realism & Abstraction

Of course, perspective especially makes sense in the case where real-world assets are visualized. However, urban transformation can both be visualized with a high level of realism (e.g., with satellite images) or more abstract (e.g, dot-density map). I believe that both visualization types have advantages and disadvantages and they are most powerful when combined. This is why I choose to visualize real-world buildings with an abstract color instead of textures (that were also not available, by the way). The seemingly exaggerated orange facade color is there for a reason: to increase the level of abstraction.

Why not visualize realistic, textured buildings? Textures still cause a number of issues on a technological level, e.g. they slow down rendering performance (FPS) and therefore cannot provide a reasonable resolution to look realistic at all. Additionally, realistic visualizations can be misleading or distract a user too much from the main message of your visualization. A 3D visualization of urban growth using real-world assets with an abstract symbology allows you to combine the best of both worlds. This can of course also be achieved e.g., by overlaying a satellite image with a hot spot analysis or similar.

Relatability

Have you ever noticed that a map, visualization or a simple news article from your own country touches you far more than something you cannot relate to?It is well-know that people can relate better to things and places that they know than to those they don’t know.

Visualizations with a high-level of interactivity lets users explore the data freely and navigate to those places that they can relate to. This does not necessarily need to be their hometown, it can also be places they traveled to or seen in movies. We seem to be more engaged with a visualization when we can make connections of what we see with what we have experienced. It’s far easier to tell a story with a visualization when the user is involved in some way. Like this, the user has the ability to appropriate a part of the visualization and becomes part of the story.

Looking back to how my own neighborhood looked like in 1920 and in 1976 when my building was built.

Thanks for tuning in ❤. Let me know what you think about visualizing urban transformation. Do you agree with the points I made? Have you made an interactive 3D visualization yourself before?

And please post in the comments if you know of any great visualizations of urban transformation that you can recommend and if you want, explain why they are so compelling to you.

Here you can find a live demo of the Zurich Time Travel app. You can also add your own data and visualize the urban transformation of your own city by manipulating the source code of the app. I have made the code available on GitHub. ❤

Animated urban growth of the city of Zurich from 1850 to 2015.

--

--

Lisa Stähli

Product-minded software engineer & UX designer, advocate for diversity in tech, and yoga teacher.