Berliner Morgenpost

How Old is Berlin?

This interactive lets you scroll through the history of Berlin by visualizing the construction year of every single building.

Tasks
Frontend development
Data processing
Map styling
Performance optimization
Team
Christopher Möller
André Pätzold
Marie-Louise Timcke
David Wendler
Published
2018/05/23
During our long-term cooperation with the Berliner Morgenpost, we have worked on numerous interactive maps that visualize various indicators of the city. Some examples are a rental map, that shows how expensive it is to live in the city center, a noisemap that is generated from scientific data about noiselevels or an election map that visualizes how Berliners have voted in the latest election.
One of the reasons why it is possible to create all kinds of maps about Berlin is that the city is regularly publishing datasets as open data. One of the released datasets is a shapefile with all building blocks of Berlin and their average age. This geo-data was used as a basis for our interactive "How Old is Berlin?".
Overview of the interactive story
Overview of the interactive story
The general idea for the story was to give some historical context for the current cityscape of Berlin. The article should be easy to consume and understand to not bore the reader. We finally decided to develop a scroll-story which lets the user scroll through different epochs of Berlin's history. While scrolling, the map remains rather static and is animated between the individual layers.
23% of the Buildings in Berlin were built from 1920-1940
23% of the Buildings in Berlin were built from 1920-1940
In addition to the main story, the user gets the possibility to enter an adress or explore the interactive version of the map. That interactive version features a tooltip and lets the user get information for every building in Berlin.
New buildings in Berlin are mainly built in the eastern part of the city
New buildings in Berlin are mainly built in the eastern part of the city
For the technical implementation, the main challenge was to create a smooth transition between the different layers in the story. This was solved by using mapbox-gl with filters while scrolling through the story points. This seemed like the only option for a large-sized dataset like this one.
Technology Stack
QGIS
MapboxGL
Chroma.js
Are you interested in a collaboration?
Contact us
Featured Projects
webkid logo
webkid GmbH
Oranienstraße 19A
10999 Berlin
[email protected]
+49 30 983 227 20
Imprint
Privacy