Revisiting Bertin’s vertical sections

Revisiting Bertin’s vertical sections

This visualization experiment is looking into how to visualize two-dimensional spatial data on a map. Normal visualization are limited to one dimension in addition to the spatial information. For this additional dimension one can use one of Bertins visual variables. Combining visual variables on maps can be tricky and often confusing as for example line-shading and colors are conflictual. The visualization presented here is inspired by Bertins “Vertical Sections & Chartmaps” (Bertin, 1983) (Fig. 1 & 2).

Bertin's Chartmaps

Fig. 1: Bertin’s Chartmaps (Bertin, 1983)

Bertin's vertical slices

Fig. 2: Bertin’s vertical slices (Bertin, 1983)

In our test-case we are visualizing population density information and the average building-height information (Fig. 3). By highlighting being able to identify correlations and even more interesting outliers we can learn more about which part of the city is used for which purpose, e.g. high building and low population density are commercial areas whereas high buildings and high population density are high-rise apartments. At the same time we can observe the general architectural structure of the city and its outliers for example the high rises in east Berlin, which lie on the outskirts of Berlin where you normally find smaller houses and less populated areas. In addition we visualize the maximum building height to highlight land marks, like e.g. the tv-tower at the Alexander Platz or the Control-Towers at both airports.

Visualization legend

Fig. 3: Visualization legend

The data for the visualization comes from the City of Berlin and we are using our HeatTile approach for clustering the data on the server-side and being able to generate the data for the visualization in real-time. By implementing the HeatTile approach we can furthermore add zoom levels with higher granularity and the possibility to just visualize a certain district of the city.

D3 Prototype of the visualization

Fig. 4: D3 Prototype of the visualization

A static prototype of the d3 generated visualization can be seen here.

The source for the visualization can be found on GitHub.


Bertin, J. (1983) Semiology of Graphics