Drawing Line Charts with Covid-19 Case Data

Line Chart
Beginner

In the last recipe, we showed daily Covid-19 cases in Myanmar using a bar chart. We can also deliver the case data using a line chart. Line graphs are useful in plotting data that  accumulates over a time period, showing the trend of Covid-19 cases in Myanmar. In this recipe, we will create a line chart using the data from Covid Myanmar Dashboard. This chart will show the cumulative number of Covid-19 cases and deaths in Myanmar over time (March 2020 - December 2020). Besides making the line chart, we will learn how to add annotations, which help explain the pandemic's timeline.

This recipe was produced with the generous support of the Institute for War and Peace Reporting.

Stats

Ingredients
Covid-19 Cases in Myanmar Data
Tools
Datawrapper, GoogleSheets
Read in other Languages

Introduction

We are going to create the chart shown in this recipe. As you can see, this graph contains annotations. Annotations are extremely useful when reporting on significant events or milestones. Presenting just the data alone may paint an incomplete picture; annotations help contextualize the data and convey the main message more effectively. In the context of Covid-19, possible annotations may be the first reported case, the introduction of vaccines, government interventions, or topping a record of 100,000 deaths. In this recipe, we will be highlighting when stay-home orders in Yangon have been imposed or lifted to illustrate how they may have affected the number of coronavirus cases.

We will guide you to customize your charts through the following three simple steps:  

  1. Preparing the Data
  2. Crafting the Chart
  3. Communicating with the Audience


1

Preparing the Data

Gathering and Cleaning the Dataset

The data preparation process for this recipe is the same as the one in the previous bar chart recipe. The only difference is the time frame. In the first recipe, we focused on the second wave. In this recipe, the timeline starts from March 23, 2020, when the first two confirmed cases were reported. 

1.1) Gathering and Verifying the Data

First, we will need to look for reliable data. Whenever we are using data, it is important to check their source, especially if it is on the internet where anyone can post content. In regards to data related to Covid-19, sources such as the World Health Organization, government health departments and other official public health-related agencies are considered to be reliable as they go through comprehensive processes for data collection and fact-checking before reporting their information. 

For this recipe, we will need the daily cumulative numbers of coronavirus cases and deaths in Myanmar. While the Myanmar government’s Ministry of Health and Sports is the official authority collecting and reporting information on Covid-19 in the country, they unfortunately do not provide all the information that they have announced in one place. Fortunately, there is the “Covid Myanmar Dashboard” site, which has compiled the daily Covid-19 announcements made by the Ministry. You may also want to compare their numbers with the Ministry’s just to verify their data. Now that we have identified a reliable data source, we are ready to start cooking! 

You will be directed to a Google Sheet which contains all the compiled data related to Covid-19 in Myanmar. Since our graph requires the total cumulative confirmed cases and deaths, we will have to find the relevant tab and extract it. The tab named “cumulative number” contains the data we want for the chart. 

  • Go ahead and click on the tab “cumulative number”.

1.2) Importing to Google Sheets

Since the data already exists in Google Sheets, we can simply copy the data we want onto our own new spreadsheet.

  • Right-click on the tab “cumulative number.”
  • Select “Copy to”.
  • Select “New spreadsheet.”
  • Click on Open Spreadsheet.
  • Rename the file as “Myanmar-Cumulative-Covid-Data.”

You have now successfully extracted the relevant data we need to start making the graph!


1.3) Cleaning the Data

Now, we can start cleaning the dataset and drop unnecessary variables. Before we start data cleaning, we need to make sure that “cumulative cases” (column Z) and “cumulative deaths” (column AB) columns contain only values. If you check these columns, you will find some cells containing formula/function as shown below. 

Here, some values in the “cumulative death” column (column AB) are calculated based on the “deceased” column (column E). If you get rid of the “deceased” column, those values in “cumulative death” will automatically disappear. We need to copy and paste these columns so that all the cells are values. 

First we will copy and paste the “cumulative cases” column.

  • Select the “cumulative cases” column. 
  • Right-click > Select Copy

Select the same column > Right-click > Select Paste special > Select Paste values only.

  • Repeat the same for the “cumulative death” column.

After this process, we can safely delete unnecessary rows and columns. 

Since we are only interested in starting our graph from when the first Covid-19 case was announced which was on March 23, 2020, we will need to delete all the rows before this date (23/03/2020). 

  • Sometimes, the rows may be hidden in the spreadsheet. If so, please click on the arrow buttons near the row numbers on the left to unhide them.


  • Select the rows we want to delete from Row 2 (from 01/02/2020) to Row 51 (22/03/2020).
  • Right-click. And then, select Delete rows 2 - 51. 

In graphing the daily cumulative number of Covid-19 cases and deaths, we will only need the “announced date” (column B), “cumulative cases” (column Z), and “cumulative death” (column AB) variables. 

  • As such, we will keep just these variables and delete the other columns.

Please beware that some columns may be hidden. 

  • Click on the arrow buttons on the column header row to unhide them so that you can delete them. 

Once we have just the three relevant columns we need, we can go ahead and rename them for better clarity and consistency: 

  • announced date > Announced Date
  • cumulative cases > Cumulative Cases
  • cumulative death > Cumulative Deaths

The final Google Sheet should look like below: 


Before we jump into the Datawrapper software, we need to allow access for this Google Sheet so that it can be incorporated to create the data visualization. 

  • In the top right corner, click the Share button. 
  • In the Get Link box, Click Change to anyone with the link. 
  • If you want to skip the data preparation part, you may also use the prepared sheet available in this URL, which will be pasted to Datawrapper to create the bar chart. 




2

Crafting the Chart

Making and Designing a Chart using Datawrapper

In this step, we will create the line chart using Datawrapper. 

 

The Datawrapper Work page will pop up as below. You can see that Datawrapper uses an easy 4-step method to create charts: Upload Data; Check & Describe, Visualize; Publish and Embed. 

1) Uploading Data

As a first step, we will need to upload data

  • Choose Import Google Spreadsheet
  • Enter the URL of the Google Sheet that you have just created. (Alternatively, you may readily use our google sheet. Copy this URL).
  • Click the Proceed > button. 

 

2) Checking and Describing Data

You can see the uploaded dataset below. 

  • For the “Announced Date” variable, you can see that Datawrapper automatically converts the dates into the most user-friendly format. We will continue with this format.
  • Make sure that the column types for “Cumulative Cases” and “Cumulative Deaths” are Number
  • Then click the Proceed > button. 

3) Visualizing and Styling the Chart 

In this step, we can start working on creating visualization. 

  • Choose the Chart Type tab. 
  • Among all types, select Lines to create a line chart. 
  • Then, click on the Refine tab. 

Here, we will refine the horizontal axis, vertical axis, trend lines, symbols, and labels. After working on the format, the chart will look more organized as below: 

 

First we will change the date format on the horizontal axis. In the Horizontal axis panel,  

  • Make sure the Announced Date is chosen for Select Column.
  • Choose “April, 2, 3” for Tick format.
  • Select “tick marks” in Grid lines

On the Vertical axis panel, 

  • Select “linear” for Grid lines. (In the next recipe, we will create work more on linear vs log graphs)
  • Select “1,000[.00]” as Number format. 
  • Choose “tick marks” as a way to show Grid lines. 
  • Choose “inside” and “left” for Grid labels

 Now, we will need to change the color of the lines in the Customize lines panel. 

  • Click the customize colors… button.
  • On the Select element(s) box, click on each variable to select color. 
  • As shown below, choose Orange for Cumulative Cases and Red for Cumulative Deaths.  

 We will also adjust the line width and line dashes. For the line width, you can click the variable until you get your desired width for the lines. 

  • For both Cumulative Cases and Cumulative Deaths, choose the thinnest line for Line width
  • Do not change Line dashes
  • Select linear for Interpolation

 We can also edit labeling on this graph in the Labeling panel.

  • In Line Labels, let’s place the line label on the right
  • Check the box for Draw lines connecting labels to lines.
  • Check the box for Use line color for labels. It is better to have the same color for the line and its variable label to be easily associable.
  • We will also check an option Show tooltips
  • Select “1,000[.00]” as Number format. 

 We can also customize symbols in this graph. 

  • Tick the Line symbols.
  • Select circle on first & last for Shape
  • Set the Size at 2. 
  • Set the Opacity at 0.5. 

Through Show Tooltip function, the exact values of X and Y axes will be shown. Here, you can see the exact date and associated case number as you move your cursor along the line. 

 

4) Adding annotation in the Chart 

OK. Let's move on to the Annotation section. Here, we will add titles and other informative elements to the chart. 

Fill out the following respective boxes as below: 

  • Title: Covid-19 Cumulative Cases and Deaths in Myanmar
  • Description: 121,280 cases and 2,579 deaths have been recorded in Myanmar as of December 26, 2020.  
  • Note: This chart shows the number of confirmed COVID-19 cases and deaths in Myanmar since March 23, 2020.
  • Data Source: Dr. Nyein Chan Ko Ko (referenced from the Ministry of Health and Sports)
  • Link to data source: https://datastudio.google.com/reporting/445c1281-c6ea-45e4-9bc0-5d561c511354/page/I44CB
  • Byline: (Type in your organization) 

Finally, we will be adding a text annotation with a line to highlight important information in the chart. Assume that your data story is about how stay-home orders in Myanmar have played an important role in how the government has controlled the pandemic. Here, you can add this information in this graph as well. 

We shall start off with setting up the ranges for these annotations. 

In the Highlight range panel, 

  • Click + Add range highlight button. It will ask you to “Click or drag directly on the chart to create a range highlight”. 
  • Click randomly on the chart. Once you click, a design box will pop up in the panel. 
  • For Orientation, choose the first option-vertical line. 
  • For the Type option, make sure Line is chosen by default. 
  • In the text box for Position, type in 2020/04/18. The vertical line will be shifted to this exact date, when the stay-at-home announcement was made in Yangon.
  • For Color, Choose Indigo with Hex code: #264c6b. 
  • Set Opacity at 50%.
  • For Width, choose the thinnest line. 
  • And for the Dashed line, choose the last option (----) to make this line different from others lines in the graph. 

We need to add a text annotation for this highlighted line. In the Text annotations panel, 

  • Click + Add text annotation.

It will ask you to click on the chart to create an annotation. 

  • Click next to the highlighted line on the chart. Once you click, a design box will pop up in the Text annotations panel. 
  • In a box for Text, type in 1st stay-home order in Yangon. 
  • Text style is better to be Bold. 
  • Set the pixel size of the font size to 12 px.
  • Tick Text outline.


  • Tick both Mobile and Desktop
  • Width of the text should be 25%. 
  • For Position of the text, we will manually place it by dragging the text in the chart. Make sure, the text is placed on the highlighted line as shown below. 
  • You can also choose the position of the Anchor point. The anchor point grid has nine options, In this case, we will choose anything in the center to make the text center-align.  
  • Turn on Show as key on mobile
  • Turn OFF Draw line to annotation text. Through design perspective, we do not need to have a line next to the text annotation.

Let’s now add the highlight range and annotation for the other related events by repeating the same steps above:

  • July 1, 2020: 1st stay-home order completely lifted in Yangon
  • August 16, 2020: 1st local transmission reported in 29 days
  • September 21, 2020: 2nd stay-home order in Yangon

Make sure that these text annotations do not overlap each other. When you are satisfied with the appearance of the map, click Proceed >.

Finally, we will select layout and enable share option. 

  • For the Select layout dropdown, choose Datawrapper (with data). 
  • Output locale will be English (en-US).

To allow others to embed and share your map, 

  • Turn on Enable social media share buttons. 
  • Select Share chart URL. 
  • Click Proceed >. 

In the final step, you can publish and embed your beautifully-crafted chart either in an interactive format or in PNG. 


3

Communicating with the Audience

Making sure that the chart is not misinterpreted

3.1) Using Line Charts with Annotations

Line charts are simple yet effective in plotting cumulative data over time. The annotations highlight certain events that may explain trends in the data or mark significant milestones. After a remarkable 29-day period of recording no local transmission, the first case was reported in mid-August, followed by a stay-home order in Yangon in mid-September, by which time the number of cases has already started surging upwards. Annotations like these complement the data behind to tell more compelling stories.  

3.2) Beyond Line Charts

These line charts can show the extent of the pandemic. However, for these cumulative charts, the total number of cases will only keep increasing. If you are writing a story about government actions and their effectiveness in controlling the spread over the course of the pandemic, line charts are not ideal. So, is there any way to show the changes in the rate of COVID-19 cases? Yes, logarithmic charts help show these subtle changes. In the next recipe of the Covid-19 visualization series, we will show you how to create line charts on the logarithmic scale and normalize the population to compare Covid-19 cases in two different countries.

Recommended Recipes

Drawing a Bar Chart with Covid-19 Case Data

Bar Chart
Beginner

Scrolly Map in Tableau and Webflow (Part 1)

Map
Beginner