CoVis20 is an interactive hyperlocal visualization tool of Covid-19’s impact on a hospital and its environment. The tool provides insight into how different areas of our daily life, as well as our health care system are affected by the pandemic and how these effects developed over the course of time.

As an interdisciplinary research project it has been developed by computer science and design students of the University of Applied Sciences Mannheim, in cooperation with the University Hospital Mannheim (UMM), and the public transit company RNV.

Fig. 1: Interactive dashboard with time-series showing the progression of COVID-19 cases (A), histograms visualising public transit utilisation, a map of the hospital and its environment (C), and charts showing ICU occupancy and capacity (D).

The idea

The coronavirus pandemic has spread rapidly across the globe, causing an almost complete halt in daily routines and a growth of public health concerns regarding the adequacy of resources to treat infected cases. Hospital beds, intensive care units (ICUs), and ventilators are vital for the treatment of patients with severe illness while public transport can be a vector for distributing the virus.

In this project we visualised the impact COVID-19 has on hospitals and their environment. We focused especially on Mannheim and its surroundings — visualising ICU loads of the University Hospital Mannheim among other comparable institutions in this area, as well as the utilisation of different public transit modalities: tram passengers, shared bikes, and car parking spaces around the hospital.

We aim to make hyperlocal data concerning COVID-19 accessible and comprehensible. With the help of the visualizations, users should be able to understand how the current situation and events affect their surroundings and how the healthcare system in Mannheim was prepared for such a pandemic.

The visualization system

The interactive dashboard consists of four views. A time-series showing the progression of COVID-19 cases, histograms visualising the utilisation of different transport modalities, a map of the hospital’s environment, and a bar chart and calendar heatmap showing ICU occupancy and capacity (Fig. 1). Users can select a timespan and navigate through the last months. All views are linked.

The four views

The time-series showing the progression of COVID-19 cases gives the user general information of the COVID-19 situation over time. Through a set of pre-selected events indicated as vertical gray lines, the user can analyze how a specific event might have affected the COVID-19 key indicators. Moreover, it supports understanding if and how the events and the subsequent numbers have affected the hospital capacity or the utilisation of transport modalities.

The histograms visualising the utilisation of different transport modalities around the University Hospital Mannheim show how the mobility behaviour around the hospital changed during COVID-19. It also shows if there was a lower demand on public transport during COVID-19. Here we focused especially on the utilisation of the public tram lines, the utilisation of parking spaces in two different parking areas, as well as the availability of rentable “nextBikes” at a bike sharing station in the area of the hospital. When selecting a time span in the time-series view the user can see to what extent the progression of COVID-19 cases in Mannheim have affected the utilisation of rentable bicycles, public transportation, or cars. If no time span has been selected the user gets an overall view of the COVID-19 situation.

With the help of the hospital and its environment map, users can orientate themselves around the area of the UMM. The hospital campus is marked on the map with a green contour. The tramline stops, parking spaces, and nextBike stations are marked with blue bubbles. Each transport modality has its own shade of blue. Moreover, the bubbles change sizes according to how high the utilisation is. The bigger the bubble the more people use the specific transport modality. The colour orientation of blue and green/turquoise helps the user to link the colours to the visualisations on the right and left. The public transport visualisation is on the left and the hospital visualisation on the right.

The bar chart and calendar heatmap on the right-hand side are displaying another area heavily affected by COVID-19: the hospitals in Mannheim. Here, we focused on visualising two sets of data to provide a comprehensive overview of the occupancy of the hospitals. In the bar chart users can see the general occupancy of beds in intensive care units (ICUs) of hospitals in the area of Mannheim, as well as the share of beds actually occupied by COVID-19 patients. The heatmap below goes more into detail. Here, the occupancy of the different types of care units (high, low, and ECMO) are visualised for three different hospitals in Mannheim. It shows which hospitals support care, in what kinds of units and whether the capacity in these units was “occupied”, “limited”, or “available” during the selected timespan in the top view.

Find more information on the views and their interactions in the Prototype section, below.


Starting the project in midst of the outbreak of the pandemic, it was quickly decided that the visualisation would evolve around the topic of COVID-19 and how it affects different areas of our lives.

Whilst brainstorming different aspects that the virus touches on and researching the available data we became aware of the gravity and complexity of the pandemic. Realising that we could never visualise all of it we discussed where to set our focus.

As a common ground for the data sets we chose the location of the University Hospital in Mannheim, since this area would be of crucial interest during the pandemic. We included not only data from inside the hospital but also shifting our focus to the surroundings of the hospital. This gave us the opportunity to investigate whether the number of cases would correlate with mobility in public space and with the response of the healthcare system.

The dashboard is set up to explore how increasing or decreasing numbers of COVID-19 cases affect the transportation system as well as ICUs in hospitals in Mannheim. Does an increase of COVID-19 cases correspond with an increased number of COVID-19 patients occupying ICU beds? How would this affect the number of ventilated patients? With the aim of also taking a closer look at correlations between transportation and occupancy of ICU beds, we wondered how an increase of hospitalised patients and COVID-19 cases in general would reflect on transport modalities around the UMM. Questions we wanted to investigate were:

  • Does the use of public transportation decrease during the course of the pandemic?
  • Do people prefer using rentable bikes instead of public transportation around the UMM?
  • Are there less occupied parking spots as a result of the visitor ban?
  • Does a decrease of infected patients result in a higher utilisation of public transportation?

Designing the prototype, virtually

Not only did COVID-19 affect our daily life but also our project. We are a group of students that has never met each other face-to-face. This project was created fully virtual, supported by a wide range of online tools.

Working from home on something that was new to all of us brought its challenges. Clear communication and distribution of tasks proved to be more important than ever. Carrying over the ideas of design thinking into the virtual space surprisingly was easier than expected. We used miro. a tool for group brainstorming and communication, to collect ideas with post-its and build on them (Fig. 2).

Data collection and structuring process Post-Its and sketches
Fig. 2: Using a Miro Board for our virtual brainstorming and data classification process. (Swipe to slide through.)

Apart from many insights into the impact of COVID-19 in the area of Mannheim, we as a team got to experience a broad variety of collaborative tools, ranging from the learning management system Moodle, to communication tools Zoom and Discord, to project and source management tools Trello and Github. Some of them worked exceptionally well and made remote work throughout the course of the semester a lot easier, whilst others felt more like an additional chore than a relief. Reflecting on and learning from those experiences we established a workflow which helped collecting and exploring data, and developing the design of the dashboard at the same time – but never in the same room.

Wireframes and Mock-Ups

As one of the main objectives was to visually analyze the interplay between the different data sets, we needed to design a dashboard with multiple views. Each section displays a different area impacted by the pandemic. Whilst first drafts of the dashboard where developed, the analysis and research of data was still ongoing. Thus, the design and types of visualisation continued to evolve. At the end we decided on using time-based visualisations to provide a recurring theme throughout the various aspects the visualisation addresses.

Fig. 3: One of the first drafts of the dashboard. Later on we realised that a time based visualisation would suit best, since it makes data more easily comparable and accessible for the user.

Another decision that was made early on in the design process was the omnipresent time-series of the progression of COVID-19 patients in Mannheim. That visualisation should serve as an orientation system within the dashboard. This way the user can directly link new cases to the other phenomena they are interested in; whether it is change inside or outside the hospital. The map on the center bottom was chosen as a secondary orientation system, whilst at the same time providing information in the bubbles. The colour language here is crucial for context and local orientation, assuring that local stakeholders understand immediately at which part of Mannheim they are looking and which visualisation correlates with the area.

Fig. 4: Sketches of technique variations for visualizing different public transit modalities in a compact manner. Ranging from simple line charts, to horizon charts, to calendar heatmaps, and trying out continuous vs. diverging color schemas for absolute and relative changes.

A working group including designers and programmers further developed and discussed visualisation methods, colour schemes and placement of areas based on the weekly input of the whole team and the provided EDA. We continuously sought to improve the dashboard. Here the aspects of clear and legible communication of data, as well as a user-friendly and appealing interface were of crucial interest.

Early wireframe Ipsum Dolores
Fig. 5: Series of mockups and wireframes. (Swipe to slide through.)

In the second version the visualisations continued to evolve since more data was explored and was made available to us. We kept reflecting our colour scheme and decided to move away from a misleading traffic light color palette and chose more neutral colours like blue, green and orange.

The pre-final dashboard design was transferred to Adobe XD to create a clickable prototype. Here, we explored how crossfilters could work between the different views.

Data sources and preparation

Over the course of this semester we have collected a wide range of data. From the even larger set of potential data sets (see Fig. 3), we opted for general COVID-19 indicators (such as cases, or recovered), data on ICU availability, and three proxies for mobility around the hospital (passengers at near-by tram stations, car parking utilization, and bike sharing usage).

We also show some of the many visual data explorations we created while investigating the data, and identifying promising analysis ideas.

COVID cases. The first dataset is from the Robert Koch Institute and consists of positive cases, deaths, and recovered patients for each day. Positive corona cases are divided by sex and age. Age is binned in six groups (0-4 years, 5-14 years, 15-34 years, 35-59 years, 60-79 years, and over 80 years).

Fig. 6: Spatial exploration of cases and ICU beds.

Intensive Care Units. Another dataset was scraped from the German Interdisciplinary Union for Intensive Care and Emergency Medicine (Deutsche Interdisziplinäre Vereinigung für Intensiv- und Notfallmedizin e.V.). Since the corona pandemic, all hospitals in Germany with ICU stations must provide this data indicating availability of beds in different treatment levels. Beds are divided in Low Care, High Care and ECMO (Extracorporeal Membrane Oxygenation). The availability of beds is not shown in absolute values but in the categories Available, Limited and Occupied. We harvested this data from April on for all three hospitals in Mannheim on a daily basis.

Fig. 7: Availability of low-care, high-care and ECMO beds (green: available, orange: limited, red: not available). This EDA resulted in two first insights: While the availability of low- and high-care beds were mostly limited, ECMO beds were available in general. Secondly, none of the hospitals provides all three kinds of beds. While Universitätsklinikum provides high-care and ECMO beds, the other two hospitals provide low- and high-care beds, only.

Bike Sharing. Data for the usage of bike rental was directly scraped from the provider’s website For this purpose, we wrote a little app which fetches a JSON file once per hour with available bikes of all stations, and stores it with a timestamp. Although there are plenty of stations in Mannheim, we chose the single one in walking distance to the hospital as relevant.

Car parking. The parking situation around the hospital struck us as especially interesting. We implemented a Python application that scraped the amount of available parking spots from two car parks (the “Klinikum” underground car park, and the “P3”park deck) each hour. The script ran on AWS Lambda and stored the data in a S3 bucket.

Fig. 8: Available parking spaces for two car parks for a period of 12 days. Shows high availability on the weekend and on a public holiday (middle row, third cell), suggesting the car parks around the hospital were mainly used by staff members. Visitors to the hospital were limited in the shown time period.

Public transport passengers. As the analysis of the usage figures of the tram lines in the immediate vicinity of the university hospital was one of our priorities, a relied on the cooperation with the public transit company RNV as this data is not open, yet. We requested the data for the stops Universitätsklinikum, Bibienastraße, and Hauptfriedhof which are in close proximity to the UMM. For this study, we analysed data from January 1, 2020 on in order to be able to see the complete course of the effects of the corona crisis.

Fig. 9: Shows boarding and exiting passengers for tram stop "Universitätsklinikum" for downtown direction. Declines over time as corona measures were implemented. Since April 27, RNV went back to the regular time plan, however, passenger numbers did not return back to normal, immediately.

The provided CSV data was about 65MB, and consisted of various attributes (such as headway and vehicle composition). For us, the relevant properties were the date of the trip, line number, stop name, passengers entering, and leaving at each stop, as well as the occupancy.

After cleaning up the data (e.g. fixing a hard-coded encoding problem through regular expressions), we had to tackle a problem of rather practical nature: The sheer size of the data set. Since our technical approach for the functional prototype was a frontend-only concept, all data had to be delivered to the client. With 65MB this was not really impossible, but clearly impractical. Through pre-filtering the data to the time range of the other data sets available to us, and removing unused columns, we were able to reduce the size of the data to download to under 14MB. This seemed acceptable for this prototype and we took no further steps.

The interactive prototype

In the following, we describe selected aspects of the data-driven prototype. The prototype has been developed in d3, with the help of dc.js, and Crossfilter.js. We used Bootstrap as framework and Leaflet for the map.

Fig. 10: Dashboard with a selected time period. All bottom views show their data for the specified time span in the top view.

The time-series at the top of the dashboard shows the progression of COVID cases in Mannheim. The line chart visualizes four categories: The brown line shows the total number of confirmed cases (both currently infected as well as recovered persons). The orange line represents all patients who are currently infected. The dark yellow line shows all newly added cases and the light yellow one represents the numbers of all recovered patients.

Interactions. Users can select a date or a timespan. Users can get detailed information for a specific date by hovering over the line. A tooltip with a histogram shows age distribution and the proportion of male and female patients (Fig. 11).

Fig. 11: Prototypical tooltip with detailed view on age distribution by gender.

By checking the checkbox at the right, a brushing tool can be activated allowing to drill down the time axis for the bottom views. The selected time range will be reflected in all other views (Fig. 12 left and right).

Fig. 12: Bottom area with utilization of public transporation (left), and hospital capacity (right) for currently selected time range. Center map not shown.


With this project, we find we designed a good foundation for the specific use case of analysing the effects of the coronavirus on selected aspects of public life in Mannheim.

Due to the complex nature of the pandemic, and due to the unusual and changing environment of this semester we faced a couple of unexpected challenges. For instance, due to the different temporal periods of the data available, it was difficult or even impossible to investigate all of the identified questions. In particular, the period shortly before and after the start of the corona pandemic in Germany (i.e. February to April) would have been interesting for our investigations, since a possible impact on hospitals and public life might have been much more visible, here.


Finally, we presented our findings to our partners. We also presented the interactive prototype at the annual exhibition of the Computer Science department. As so many others, we needed to move this to a virtual event and opted to demonstrate our project in Mozilla Hubs.

Fig. 13: Visitors at our virtual exhibtion booth.

Outlook and future work

Within the scope of this project, only a small part of the ideas could be implemented. Besides the aforementioned data issues, one of these possible development options was to compare other cities with Mannheim in order to investigate which effects might be more general. We deem similar infection numbers and similar number of inhabitants as promising criteria for selection. With Mannheim’s population of around 300,000 inhabitants, the following cities in Germany would be candidates for a comparison: Wuppertal, Bielefeld, Bonn, Münster, Karlsruhe, Augsburg, Wiesbaden, Mönchengladbach, and Gelsenkirchen. For these German cities, data on COVID cases and ICU beds is available from the RKI, the DIVI, and RiskLayer. Data on mobility is not available nationwide and needs to be collected on a case-by-case basis.


Overall, bearing in mind the complex circumstances in the emerging pandemic situation and our work as a virtual interdisciplinary team, we have learned so much, and are very happy with the current state of the developed prototype.


Lena Bühn
Nina Dreher
Philipp Fruh
Leonard Hacker
Vanessa Hoffmann
Eugen Krizki
Elena Malkin
Alessia Stenzel
Benjamin Tuna

Supervision by Prof. Dr. Till Nagel

CoVis20 is a student research project from the University of Applied Sciences Mannheim, in cooperation with the University Hospital Mannheim (UMM), and the Rhein-Neckar-Verkehr (RNV). We especially thank Prof. Dr. Thomas Ganslandt for his guest lecture, Jan Scheer for his input, and Dr. Silvia Schacht and Dr. Benedikt Krams from the RNV for their quick and helpful support.

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