{"id":19430,"date":"2020-03-25T14:10:39","date_gmt":"2020-03-25T14:10:39","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=19430"},"modified":"2026-01-12T11:40:39","modified_gmt":"2026-01-12T11:40:39","slug":"a-small-covid-19-dashboard-from-scratch","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/a-small-covid-19-dashboard-from-scratch\/","title":{"rendered":"A Small Covid-19 Dashboard from Scratch"},"content":{"rendered":"<p>&nbsp;<br \/>\nThe Covid-19 pandemic has put what seems to be an unprecedented focus on data reporting and forecasting into the public domain. Done right, data visualization can enhance, and in some cases, give data the necessary impact to drive behavioral change. I particularly like this <a href=\"https:\/\/www.washingtonpost.com\/graphics\/2020\/world\/corona-simulator\/\" target=\"_blank\" rel=\"noopener noreferrer\">visual simulation from WSJ<\/a>, which does a good job of helping people understand why social distancing was chosen as a strategy.<\/p>\n<p>Fortunately, a plethora of data has been made available publicly. We took a look at some of the data that were made available in this <a href=\"https:\/\/github.com\/pomber\/covid19\" target=\"_blank\" rel=\"noopener noreferrer\">github<\/a> repository, to see if we could bring these data to life, both as a technical demonstration as well as a public service.<\/p>\n<h2>Public service announcement<\/h2>\n<p>We\u2019ll start with the public service portion by showing a small dashboard with two charts, one showing a world map of reported Covid-19 cases per capita, complemented with a line chart that shows the growth in cases by country. By clicking on a country on the map, the corresponding line chart is updated. By shift-clicking on multiple countries (or touching one by one on touch devices), you will be able to compare the growth rate between countries. Since every growth curve starts the day before case number 200 was registered, we can compare the relative growth independent of each country\u2019s size, and independent of when the epidemic started in each country.<\/p>\n<p>As you can see, the map has an interactive legend at the bottom that tracks the color intensity on the map. Note that this map displays reported cases, relative to the population in the country. It is probably not a reflection of the actual cases,as each country\u2019s testing and reporting efficiency may be the determining factor. For example, Iceland is testing every citizen, thus has many reported cases. (However, hypothesizing on causality is probably best left to medical professionals, which we are not!).<\/p>\n<p>Nonetheless, it will be interesting to see over time, how closely the line chart of actual cases will track the simulated trajectories in the aforementioned WSJ story.<\/p>\n<p><a href=\"https:\/\/jsfiddle.net\/highcharts\/ehg3zwvy\/show\" target=\"_blank\" rel=\"noopener noreferrer\">View the dashboard in full screen.<\/a><\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/highcharts\/ehg3zwvy\/embedded\/result\/\" width=\"100%\" height=\"1010px\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"A dashboard with a world map and a line chart to display confirmed Covid-19 cases since 2020. By  HonsiTorstein Honsi\"><\/iframe><\/p>\n<h2>Technical information<\/h2>\n<p>For those who are interested in how these charts were implemented, here is a brief explanation of how this visualization was created, and how you may create something like this of your own.<\/p>\n<p>The data foundation of this dashboard is from three different sources &#8211; the <a href=\"https:\/\/github.com\/pomber\/covid19\" target=\"_blank\" rel=\"noopener noreferrer\">Covid-19 time series repo<\/a>, the <a href=\"https:\/\/code.highcharts.com\/mapdata\/\" target=\"_blank\" rel=\"noopener noreferrer\">Highmaps Map Collection<\/a>, and a data file of all the World\u2019s countries\u2019 population. These data sets are combined programmatically. In some cases we needed to adjust the naming of countries, as the for example \u201cUnited States of America\u201d in one data set translates to \u201cUS\u201d in another. The Covid-19 time series consists of a day-by-day value array for each country, so for the map, we took the latest value and divided it by the population, to get the rate.<\/p>\n<p>So upon clicking or touching a country in the map, we simply slice the data array on the day before 200 cases were registered, then add it to the line chart. On desktops shift-clicking is a convenient way to select multiple countries. On touch devices we needed to create a different UX, so we allow users to select\/unselect each country independently, then add a button to clear the selection.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check out how the combination of line and map charts create an effective dashboard.<\/p>\n","protected":false},"author":49,"featured_media":19442,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1010,876],"coauthors":[734,705],"class_list":["post-19430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-dashboards","tag-highcharts-maps"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=19430"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19430\/revisions"}],"predecessor-version":[{"id":29236,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19430\/revisions\/29236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/19442"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=19430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=19430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=19430"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=19430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}