WanderVis is an interactive visualization tool for urban administration and city planners to explore and better understand population movement. WanderVis is an interdisciplinary research project developed by computer science and design students of the University of Applied Sciences Mannheim, in cooperation with the City of Kaiserslautern, and the German Research Center for Artificial Intelligence.

The visualization system

The main view of the prototype consists of an interactive matrix showing population change. Each cell visualizes people moving to and from urban districts, separated by their citizenship.

Fig. 1: Interactive matrix with with bar glyphs in each cell showing movement to and from districts (rows), subdivided by citizenship (columns). Marginal bar graphs show population, area, and migration delta for each district / country.

Supporting basic insights. Through the simple visualization in the form of a matrix three basic visual shapes stand out easily: horizontal patterns, vertical patterns, and single cells (Fig. 3).

Fig. 2: Basic visual shapes which can emerge in the matrix

Horizontal patterns draw attention to districts with notable movement characteristics, e.g. Innenstadt-Südwest, in which most persons from the top 3 citizenships move to or from (Fig. 2a). Vertical patterns point to citizenships with unusual movement characteristics, e.g. many Syrians move to Kaiserslautern, see Fig. 2b. The glyph of a single cell is noticeable particularly when it differs from their neighboring cells. For instance, in Fig 2c it becomes apparent that in contrast to people with other citizenships, more Bulgarians move to Bännjerrück.

To ease investigating the data further, we provide a set of interactions such as sorting, filtering and details-on demand (See Findings section below.)

Design process

The goals of the project were to get an overview of visualization possibilities, to discuss various ideas for the display of population movement data, and to develop and informally evaluate a first interactive prototype. For this, we applied an iterative design process.

Resarch. After an introduction to the topics mobility, migration, and population movement, we began our research on visualizations in these areas. Our goal was to gather best practices and inspirations both from design and academia. We surveyed existing approaches, and analyzed them critically in order to get a better understanding of the challenges at hand.

Fig. 3: Subset of our visual survey (here: flow maps).

Questions. Together with our partners from the city administration and DFKI, we identified a set of questions based on discussions with the experts. These ranged from basics such as “To which districts people migrate in higher numbers?”, to medium ones such as “How many people move away in relation to the district’s population?”, to complex questions such as “From which countries do people originate, who show extraordinary numbers of movement in a specific time range?” We aimed to support investigating some of these with our prototype.

Sketches. Along the way we did small exercises on paper in which we tried to depict population movements. While the first experiments were pretty rudimentary, we each went on to create our own ideas. Many of our individual ideas involved rather abstract depictions of movements. However, we also incorporated rather established techniques like bar graphs and choropleth maps.

Time series Radial bars showing movement from and to their angular origin Wireframe showing filter interactions in the matrix
Fig. 4: Slide through a selection of our sketches to investigate time series, radial bars showing movement from and to their angular origin, and filter interactions in the matrix.

Ideation workshops. A vital part of the design process were the ideation workshops we participated in. One goal was to create important questions that we might try to answer with our visualization. After each participant wrote down a couple of hypotheses, we discussed them in the group, and marked the ones we found most interesting.

Fig. 5: Team members discussing questions and visualization ideas

Our visualization sketches where laid out across many tables and sorted by similarities regarding what they were trying to depict and which questions they were trying answer. Each of us gave feedback to all ideas - hypotheses and visualizations - and we reflected on the diverse set of exciting and interesting ideas. In the end we had a good understanding of our goals and the project as a whole.

Exploratory Data Analysis

Next, we visually explored the data. For this early stage, our partners from the German Research Center for Artificial Intelligence (DFKI) provided us with a subset of real world data consisting of migration to and from Kaiserslautern.

After importing the example CSV file, we thoroughly investigated various aspects of the data set. An important part of the iterative design process was trying to understand the data ourselves. After exploring data syntax and semantics, we began creating some first visualizations. Goal here was to find candidates of interesting patterns, trends and outliers. Throughout, we kept in touch with the experts from city administration in case any questions arose during the exploration.

For these early visual experiments we used Tableau, a handy tool to quickly and easily produce a variety of data visualizations. As all members of our team created their visualizations in parallel, we collected a rather wide set of promising results. Some of them are shown below.

Fig. 6: Three choropleth maps of Kaiserslautern, each depicting a different type of movement: migration to (top-left), from (bottom-left) and within the statistical district (right), with color saturation indicating number of movements.
Fig. 7: Experimental visualization exploring different origin countries.
Fig. 8: Visualizing the year of birth for different districts, grouped by births, deaths, movements within, from and to the city.
Fig. 9: Matrix showing recently moved male (blue) and female (red) population.

We settled on showing the data in a simple matrix. A matrix visualizes a large amount of the data at once which allows the viewer to get an overview, and to quickly see anomalies in comparison to the rest of the data. We aimed to provide a useful level of simple interactions for people who are not accustomed to more complex data visualizations to easily drill down the data by sorting and filtering.

Designing the Matrix

After this major design decision, we started working on the details of the matrix visualization.

Sketch of matrix view Early mock-up of the matrix view
Fig. 10: Sketch of the matrix view. Swipe to see an early mock-up.

During this stage, we realized how powerful a matrix could be when visualizing many different aspects of information. However, we also realized how complex it could turn out to be. Our main design goals were to show all the important information in a complete overview, while incorporating simple interactions in order to create a good user experience. We aimed to reduce the visual complexity to not overwhelm users, while still supporting them to investigate a variety of their questions.

Glyphs

There was one particular aspect we concentrated on: The glyphs. They are the main information carriers showing incoming and outgoing movements and therefore are one of the vital parts of the visualization. They had to be carefully designed in order to be revealing and interesting.

Fig. 11: The idea of a percentage division from the first scribble was modified by combining the inner circle and the outer ring colour. This time we were trying out different shades of two chosen colours. The deeper the colour, the higher the percentage of the influx or exodus. In the third example the influx and exodus was simply splitted into two different coloured half circles. Number 4 shows more complex glyphs where the influx in green and exodus in blue is set in a diagramm, representing the change in a year. Another thought was to group the population movements into different age distributions an a glyph.

Baed on feedback from our partners, we settled on a simple glyph design consisting of two bars: The top one encoding migration to and the bottom one migration from a region. With these, users are able to compare the data more precisely by bar height, which would not be as easy by encoding the two values as half circles, for instance.

Fig. 12: Final glyph design with two opposite bars (left), and the legend explaining the data encoding (right, enlarged).

Graphic design

We aimed for a minimalistic graphic design, with a clear visual distinction between visualizations, interactive UI, and other elements such as labels or axis descriptions.

After testing several typefaces, we decided on Source Sans Pro for a couple of reasons. It is optimized for web and mobile interfaces, and has excellent legibility characteristics in its letterforms. A secondary, yet important factor was that it is an open source font with a rather complete set of weights and language support.

In the end, we created a design which does not only regard the overall look & feel but also the various interactions and displayed information.

Implementation

In the following, we briefly lay out some of the technical aspects in implementing the prototype.

Fig. 15: Technical infrastructure of the project (based on a diagram by Martin Memmel). We were responsible for the web prototype.

Data. The movement data comes from the official government source and has been provided in the KOSIS standard. The data has been aggregated and anonymized, and our partner City of Kaiserslautern pre-selected a subset of the data fields for our project. Next, this data has been integrated into an elasticsearch system by DFKI in order to provide easy access, as well as aggregation and analysis methods. Finally, our visualization prototype requests the elasticsearch API to visualize and filter data in the user interface 1. The provided movement data ranges from October 2016 to September 2017.

Frontend. For implementing the interactive visualizations we used D3.js. As we mostly focused on the frontend, we decided against developing a full backend. Currently, the prototype is a browser-based client-only application. For highly responsive interactions, we needed to design an custom data scheme in order to be able to prepare the data for the matrix and the different interaction functionalities.

Development process. We developed the prototype in an agile manner, without applying the full set of SCRUM methodology. Still, this helped us to iteratively improve our design, as well as to quickly discuss each milestone with the partners. For version control and issue management, we used github. The collaboration between the design and the development teams worked seamlessly using github also for design issues.

Visualization prototype

Besides the main view described above, the working prototype includes the following functionalities:

Marginal bar graphs. Due to the large number of matrix cells, it is beneficial to accentuate some important characteristics of the districts and countries and ease comparison between them. Thus, each row and column is accompanied by marginal bar charts representing population total, area of the region, and migration delta, i.e. the difference between incoming and outgoing migration. They also allow to quickly gather characteristic attributes of the respective country or region.

Fig. 16: Comparing China and Syria’s bar charts demonstrate how the selected three parameters can add context to the movement data. The number of Chinese citizens moving to Kaiserslautern appears to be very small in proportion to China’s total population, while the number of Syrian people moving to Kaiserslautern is strikingly high, especially compared to the country’s area and total population.

Sorting districts and countries. The prototype provides the ability to sort the matrix by population, area, and migration delta. After a user clicks on one of these properties in the side panel, all countries, respectively districts, are re-ordered, resulting in the full matrix including glyphs and marginal bar charts being newly rendered. By animating the new display with the help of transitions, users can follow this re-ordering.

Fig. 17: GIF showing dynamic matrix sorting. First, the local districts are sorted by population, then by area, and finally by the migration delta.

Details on demand. The user can estimate the amount of people depicted in each glyph by comparing it with the legend. In order to give exact numbers, we implemented a tooltip, showing details for each cell including the name of the district, the citizenship, and the number of people moving from and to that district.

Fig. 18: Shows the hover effect

Scrolling. In order to balance the goals of showing as much data as possible to ease comparison, and employing glyphs large enough to be legible, we introduced standard scrolling functionality. The axes with their bar graphs adapt to stay in view at all time.

Fig. 19: At the beginning it shows the horizontal scrolling functionality, followed by the vertical one. Both directions are possible too.

Findings

The prototype aims to support gaining new insights as well as raising new questions. Two of such findings are shown below.

Fig. 20: The matrix is ordered by migration flow. Top countries such as Syria, Bulgaria and Romania become visible, and can be analyzed further by looking to and from which city districts people moved.
Fig. 21: Two outliers emerged, showing many people from China and India to the district of Lämmesberg/Uniwohnstadt. As one can assume based on the name, this district is the one closest to the university. This raises the follow-up question whether these are mostly students.

Outlook and future work

As explained before, we had many more visualization and interaction ideas. Due to the restriction of our one semester course, we were able to implement only the most important ones. In the following, we present two potential features for which we already designed some mock-ups.

Tile Grid Map

In order to investigate the relation between a country and a district even further, a modal dialog is planned to appear after selecting a glyph. In this detail window, the city districts are laid out as a tile grid map.

Fig. 22: Mockup of a tile grid map showing migration for each district over time.

Users can select an additional country to compare it to the previously selected one. The tile grid map visualizes the districts in a quasi-geographical grid and shows migration over time. After hovering over one of the districts, two age pyramids show the age structure of each country.

Hierarchical filtering

Another major idea was to allow the selection of the hierarchical level for the geospatial regions. These levels are based on common geographic classification systems used for statistical purposes.

The city of Kaiserslautern is divided in multiple administrative districts („Ortsbezirke“). These districts are subdivided in even smaller statistical sections („statistische Bezirke“). Users can drill down one hierarchical level by clicking on an administrative district. The rows of the matrix are updated to display the respective statistical sections and their movement data. For the horizontal axis, users can choose to either see movements of people from individual countries, or from a macro-geographical region according to the United Nations geoscheme.

Fig. 23: Combinations of hierarchy levels

These filter options would allow users to choose an aggregation level in order to suit their need of either a finer or coarser data granularity. Our ideas of future extensions include the option of differentiating international and national population migration. As the „KOSIS“ movement data used in the system contains the necessary fields, showing movements from different German states can be implemented without having to adjust the data source.

Presentation at the Lord Mayor’s office

We presented our ideas and results at the Lord Mayor’s office of Kaiserslautern. The prototype was well received by the mayor as well as by the experts from different departments, who found the tool insightful and expressed a clear interest in further development. The prototype was praised by Lord Mayor Klaus Weichel as an “easy-to-use and visually pleasing tool, which can bring an enormous relief to city council and administration” (Press release of the City of Kaiserslautern).

Conclusion

Methodically, we found the iterative design process, taking into account the needs of the different actors, to be beneficial to develop a usable and comprehensible visualization system. This was supported by the continuous exchange between population statistics experts and students of computer science and design. Overall, it has been shown that the functional prototype presented helps to answer some of the questions. In addition, numerous ideas for further developments and alternative applications were collected.

Credits

Patrick Domscheid
Evelina Husser
Marlene Jung
Marcel Klug
Lisa Rudolf
Dustin Noah Young

Supervision by Prof. Dr. Till Nagel

WanderVis is a student research project from the University of Applied Sciences Mannheim, in cooperation with the City of Kaiserslautern, and the German Research Center for Artificial Intelligence (DFKI). We especially thank Dirk Andres and Rainer Kadel from Kaiserslautern, and Martin Memmel from DFKI for the excellent collaboration and their tremendous support.

© 2018 Till Nagel and team, University of Applied Science Mannheim

Publication

Dirk Andres, Martin Memmel, Till Nagel. WanderVis - Interaktive Visualisierung von Bevölkerungsbewegungen. In: Planerin - Fachzeitschrift für Stadt-, Regional- und Landesplanung, vol. 2, pages 27-30, 4/2018.


Footnotes

  1. The version of the prototype presented at the mayor’s office used the previously provided CSV data. ↩