How We Visualized the Vividness of Geneva

Over the last few months we’ve been kept busy with designing visualizations for the project “Ville Vivante”. Based on the premise that the mobile phone has become the center of our everyday communication and main source of information, the City of Geneva, in cooperation with the Lift conference, decided to take the challenge to visualize the digital traces created by our mobile phones. As implied by the title “Ville Vivante” – “Living City” –, the goal of the project was to visualize the urban flow of everyday life and make it visible to passersby at the local trainstation.

Our assignment was to craft a given dataset into an animated visualization and a series of posters. While the general setup and goal were clear, we were very free in terms of the actual realization. In this post I want to show you our attempt to reveal the vividness of a city with a bunch of numbers and to bring a dataset to life.

The Dataset

The data was provided by the Swiss telecommunication company Swisscom. It contained the mobile-usage data of one week. The datapoints were not the actual phonecalls but the handovers between antennas that happen if you change your location during a phone call. Thanks to the analysis and great preparatory work by our collaborators at the Near Future Lab, we received a clean dataset containing the fields we decided to craft into the visualization. Each datapoint contained a starting- and an endpoint/-antenna and a time.

Fascinating or educating?

Since the general story we wanted to tell – the story of the Living City – was clear from the beginning, our task was to find the best way to tell it with the dataset at hand.
A very basic issue we had to discuss several times between kickoff and release was the level of detail of the visualization. How much of the actual dataset do we want to show to the viewer? How accurate should the datapoints be represented in the visualization? Should it educate or fascinate the viewer?

Showing more details like numbers and labels very quickly has a touch of a more technical and geeky visualization, whereas showing no quantitative information at all entails the risk of being squishy and dull. But showing less quantitative information also allows for a different approach, like using a more picturesque metaphor than barcharts to tell the story – a more accessible and attractive approach for the general public. Also a metaphor could be picked from the living world, like growing trees, moving grass, flying butterflies, which again would help us turn the dataset into a living thing.

Since the general public was our target audience, we decided to pack less quantitative information into the visualization to get their attention on a more emotional level by making it fascinating. In addition to the rather abstract animated visualization, we decided to give more educating insights of the dataset in a more detailed series of posters.

Steps to the visualization

Our goal was to show the vividness of the city, so we went looking for inspiration in the organic world. We looked at the aesthetics and behavior of living forms, so that we were able to distill a set of design patterns ranging from growth and interaction to dynamics and ebb and flow.

The first step of the visualization was as primitive as it could be. We drew simple connection lines representing the handovers between the antennas on a map.

To get an organic look and feel as we intended, we experimented with different simulation algorithms like swarm- and particlesystems and magnetism. Allthough the results were not as visually pleasing and fascinating as we expected, we gained valuable insights on the behavior and activity of the movements.

The initial visualization created by the particles and lines was too much defined by the locations of the antennas, rather than the actual movements and flow of mobile phone users. We also noticed that the lines defined by the dataset didn’t precisely match the movements of people, because it’s not necessary to move all the way from one antenna to the next to initiate an antenna handover: handovers also happen when you move a short distance in between or even when one antenna is overloaded.
So we tried to blur the visualization by applying a grid to the visualization which is generated by the amount of movements flowing through it.

We liked the visual look of the grid visualizations and also the additional information it conveyed. While the first swarm-based visualizations had their main focus on the direction of the movements, the deformation of the grid shows the amount of movements and the total activity, respectively.

But while the swarm had a slight touch of a living organism the grid was again very technical and non-organic. So we went for another approach using a fluid-simulation. From the beginning (well, after we made it work), we were fascinated by the movements generated by the interplay of the liquid and our dataset. The resulting animation had the appearance of a living thing like we intended. It surprised us with unforeseen movements but still followed the rules of the underlying data. By applying this liquid-simulation to the whole dataset, we were able to unify the movements and make it more homogeneous. The lines defined by the liquid algorithm did not pretend to represent the exact positions of the mobile phone user anymore, influencing a bigger area of the simulation instead. After rendering some test animations and a lot of parameter tweaking, we were able to create smoothly moving lines, which were influenced by the movements of the handovers.

Since the horizontal moving lines didn’t show the amount of activity in the same way the grid did, we made a second rendering in which vertical lines were generated by the movements flowing under it.

With this, we had the main part of our visualization. But what about additional information like a map, date, time? After several experiments we decided to reduce the extra information to a simple plain map and a sine-shaped progress bar indicating the course of the week. For the lines we defined day- and a night color ranges comprised of five colors.

Steps to the Posters

We wanted to support the animated visualization with additional, more quantitative information and insights. Since we had only one dataset, the difficulty here was to find interesting stories to tell from the dataset without becomming too redundant. The key to that was to put additional layers of information, like the districts or the center/periphery, on top of the data. Also we made different datapoints comparable by showing the course of the whole week or different snapshots at the same time. In this way we were able to make interesting static visualizations revealing stories you could not find by watching the linear animation.


Reflecting on the project after some time has passed since the publication of the project, I’m seeing our final result as one of many more to come iterations in the analysis of mobile usage data of urban flows. We look at it as a complete project in itself, but like “Realtime Rome” and other projects, it is one of many contributions to the question of how people move through urban environments.

How We Visualized the Vividness of Geneva This project was realized by Interactive Things. As publisher of we regularly give you insights into the development processes of our own work.

Wanna have your work featured here?
Submit a link!

Share this article

Subscribe for more

Give Feedback