Customized Visualizations chased by COVID-19
How the pandemic situation and data availability shape the design
In early Feb, I designed and built a website for Lianhe Zaobao on zaobao.sg to track COVID-19 in Singapore and had been updating the data every day from then until Jun 2.
I’m going to discuss three of my visualization cases from that site.
Situation in Singapore
As of 20 May 2020, there are four stages that can be identified.
On Jan 24, the first imported from China has been confirmed and followed by 17 imported cases. The first local case happened on Feb 4 and the government announced to be on Orange Alert on Feb 7.
During the local transmission stage, there were less than 15 new cases per day. With the spread of the virus worldwide, there were around 20–60 new cases per day and most of them are imported cases.
On Apr 7, besides the country border closed, the government also took the domestic lockdown measure. Unfortunately, Covid19 surged among the cramped migrant worker dorms, and around 500–1000 cases are confirmed per day.
Case A: Journey timeline
The first customized visualization that I designed is the journey timeline. I created it in the very beginning when there are only a few, like 20 or fewer cases per day.
It shows individual case’s journey via a vertical timeline, as the date when the case had onset of symptoms, the date went to the clinic, the date confirmed, discharge, or died.
Data
The government releases a report in PDF format every night in text or paragraphs. And we fill the data into spreadsheets as below. Each row is one case, and the columns are the attributes for that case.
Information Code
For individual cases, I utilized different shapes and colors to code these attributes. A colored square indicates the nationality, and the circles indicate the key dates. The light background along with the path indicates the status of this case — discharged in blue, dead in black.
By clicking a case, the user can see the animated path of the journey which is followed by a popup to show more extra editorial text and news links.
In the beginning, this visualization was informative and engaging. People can compare cases and get some observations, such as some cases went to multiple clinics in multiple days. I even created a filter and a tag search for cases too.
However, with the daily cases dramatically increased, the detailed visualization became less effective.
Case B: Discharged cases
With more and more cases discharged, people have become interested in hospitalization information. So I built a second visualization for it.
Data
Information Code
From the dates, we can calculate the days from confirming to discharge, and days from onset of symptoms to confirm for each case.
I designed two bars to indicate the days. The length of the bar indicates the length of days. The color of the bar indicates the status of that case. The dotted lines are the median line.
At this point, people were curious about the questions such as whether someone got confirmed earlier will get discharged sooner.
I also added some filters. For instance, people not only can filter cases by a particular cluster or imported cases but also can group by age groups, gender, or hospitals. Furthermore, they can sort by days or case id to explore the patterns of data.
This visualization can answer some questions, such as whether the cases from a certain age group are more vulnerable, whether some hospitals can handle better, etc.
Layouts for different devices
Do something when the data not available anymore
Since the end of Apr, as the government no longer provides case id for discharged cases, we only know the number of people are discharged every day but don’t know their case id. So I designed a summary chart for the 1,136 known cases.
A green bar chart on the top is the distribution of hospitalization day. A red bar chart on the left is the distribution of days of symptoms before confirming, which only includes 223 cases who have data of it.
A red bubble chart on the bottom is the distribution of the 223 cases that have both data. The bubble size indicates the number of cases.
A square marker on the axis indicates the median day. It shows that on the median, the case got confirmed 5 days after they had symptoms and stayed in the hospital for 15 days since then.
There’s a filter list on the side, people can filter by a country, a hospital, an age group, or a gender. And the results will show in a darker color.
Case C: Tracking clusters
Later on, the information on individual cases is no longer available, except for citizen and permanent resident cases. We can only know the number of newly discovered clusters, the number of additional cases that are linked to a particular cluster, and the total number of cases of that cluster.
I built a map visualization to track newly discovered clusters. In the map, I use the scalable bubble to indicate the newly discovered cluster. The bigger bubble has a larger number of cases. The tiny dots on the map are other known clusters.
As the government has already transferred those workers into quarantine zones, people are more interested in community cases. And the statistics in government report has been separated by community and dormitories.
We have to move from the individual level to the cluster level. Therefore, I defined the clusters into two categories.
The red one represents the cluster in the community, such as schools, hotels, restaurants, bars, nursing homes, etc.. The blue one represents the cluster in industrial areas, including dormitories, construction sites.
In this way, we can see the highlighted new clusters and geographical distribution of all the clusters — the cluster of clusters.
“It’s that easy, and that hard.”
― Neil Gaiman
We are not able to foresee what this pandemic will go and hardly know what should communicate next. It is not only because of people’s fickle attention but also the availability of data.
With being chased by the pandemic, we surely get many stories to tell and various points to make. One chart style is just not enough and the more customized design is imperative.
Of cause, design work is always customizing.
