How to visualize COVID-19 data

Creating Covid-19 data visualizations that make sense

The COVID-19 virus has got a lot of us stuck at home while having a lot of free time on our hands. As a developer, this might be the perfect opportunity to teach yourself new skills. I’ve decided to create a data visualization which plots COVID-19 cases.

source: Brian McGowan, via Unsplash (CC0)

These last few weeks I have been looking through numerous COVID-19 visualizations and a lot of them present their data in almost the same way. They either use a Scatter plot or a Table for to visualize the COVID-19 cases.

Figure 2: COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)

As a Developer who has an interest in data visualizations I’m always trying to find new ways to get past showing purely raw data, I intend to also visualize it in such a way that it might inspire people to gain new insights. Anyone can create a table that spews out data, but what is the story behind the numbers? For example; data as “New Deaths today”.Just think about it, what does that really mean? Have all those people died today? Or are those deaths reported today? just adding the word “reported” can make a key difference in how the data is perceived by the user. A lot of visualizations tend to not disclose these these minor details which quite frankly could result in people being misinformed by seeing these numbers instead of getting the right insights.

Figure 2: Number of reports of Coronavirus (COVID-19) in the Netherlands from nu.nl

The absence of the disclaimers for the data is just the beginning. Even when accurate numbers are presented, they can still be misleading. For example, combining deaths and cases in the same graph even though their data range is completely different. In the example of figure 2 a graph from nu.nl, a prominent Dutch news site. It appears that the total number of deaths(line depicted as light blue) in this graph is hardly growing compared to the total number of cases(red line), while in reality this is not the case. Below we see the same data separated into two graphs. By putting the graphs side by side the similarities become way more apparent. This gives the reader new insights which were not visible in the graph above.

Figure 3: Charts made in React-VIS showing total accumulated deaths and active cases in two separate graphs

Scatter plots on a map

Figure 4: COVID-19 scatter plot by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)

As shown in figure 4 Scatter plots can be used to plot data on a map to easily show users how each country is affected by the virus. The size of the circle shows to what degree the location has been impacted. In theory this works great but in practice we quickly notice some issues. For example as the circles increase in size they take up more space on the map hence invading space of another circle. This problem becomes clear in the example below in the US.

(Figure 5: Scatter plots by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)

What you see happening on figure 5 is that the bigger circles such as New York and New Jersey spill over areas around them which results in blocking information about those states. What was meant to be a simple visualisation has now become a clutter of data which can be overwhelming for the user to read. While the graph does show which areas the spread is mostly concentrated, it fails to show the basic information I want as a user. For example if I wanted to get information about the cases in Main where do I click? At this point I can only make a guess where to click and hope I will select Main, and while zooming in on the map I get info about the counties which might not even be relevant for me.

There are a couple of alternatives to Scatter plots to display data on a map. We will discuss two of them Choropleth and 3D Surface.

Choropleths

Choropleths Are ideal since every location is clearly visible and they don’t overlap. In figure 6 we can see an example on how to display COVID-19 cases and deaths by state.

(Figure 6: Coronavirus USA Map — the COVID-19 Outbreak by Coronavirususamap)

Now every state gets equal recognition,even if the impact of the virus is way less. However just because the outbreak is way less in some states doesn’t mean they don’t require any attention, but if you look at the Scatter plot above at figure 5 by JHU(Johns Hopkins University) that is what it is telling us. The developer probably never intended this to be the case, therefore it is very important to note that your intentions might not always translate into a preferred outcome which is especially the case in data visualizations.

3D Surface

Within the world of data visualization, 3D graphics are widely used to add an extra dimension to visualization. In some cases, such as maps, a 3D representation can work well because it already works in a 3D environment, think of Google Maps. But often in other cases a 3D representation can create confusion by unnecessarily adding an extra dimension. This makes some of the data difficult to see and therefore interpret. Figure 7 below shows an example of such a 3D graph.

Figure 7: From data to viz, 2019, 3D graph example).

Figure 7 shows that the last row is difficult to see because of the rods in the front row. It is also difficult to see how big the bars are in comparison to the others when the difference is small. This is because of the fact that people have difficulty interpreting graphs that have different perspectives. This problem can easily be solved by using a group of bar graphs as shown
in figure 8.

(Figure 8: Improved graph from figure 7 translated to a group bar graph made in Recharts)

This graph uses three different bars per category without using a third dimension. By putting the rods per category in groups next to each other, it is easier to get a picture of how each employee scores per day without spilling into each other. This makes it easy to compare the performance of the employees with each other.

3D objects on a map

When 3D objects are shown on a 3D map the disadvantages we saw on figure 8 are less apparent, because on a 3D map objects can be viewed from different angles. Figure 9 below shows an example of how bar charts can be applied in a 3D environment.

Figure 9: NCOVID19UPDATE web-app that uses 3D Columns made with Deck.GL and Mapbox GL

The disadvantage of 3D graphs where objects are drawn in front of each other as in figure 7 disappears because a map can be viewed from all sides. By rotating the map, objects can be seen from different perspectives. Furthermore, instead of numbers we can use the height of the column to indicate the value. In this case, the value of the column is only shown when the user hovers the mouse over the bar.

Conclusion

We have looked at various forms to visualize data on a map each has their advantages and disadvantages. I hope this article helped you to get a better understanding of how to use certain visualizations techniques to enhance your own graphs. It’s important to note that there is not one graph that fits all. At the end of the day the goal of your graph determines which technique suits you best but be sure to keep in mind the caveats you might face for each graph you are planning to use.

Resources used in this article…

• Johns Hopkins University(JHU) - COVID-19 Map
• nu.nl - 43 doden op een dag, nu 4.204 bevestigde besmettingen in Nederland.
• Healy, Y. H. A. C. (n.d.) - Choropleth map
• Deck.GL - 3D Columnlayer
• Data2Viz - The Issue With 3D In Data Visualization
• Coronavirususamap - the COVID-19 Outbreak
• Ugur Ertas - NCOV19UPDATE