{"id":11795,"date":"2020-12-08T12:14:59","date_gmt":"2020-12-08T12:14:59","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=11795"},"modified":"2022-08-13T08:27:42","modified_gmt":"2022-08-13T08:27:42","slug":"sunburst-chart-javascript-to-visualize-covid-19-data","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/12\/08\/sunburst-chart-javascript-to-visualize-covid-19-data\/","title":{"rendered":"How I Created Sunburst Chart Using JavaScript to Visualize COVID-19 Data"},"content":{"rendered":"

\"AAlmost recovered from COVID-19 myself these days, I decided to explore how the world is currently doing, during the pandemic. So I created a sunburst chart to see at a glance what continents and countries are more (and less) affected by the coronavirus than others. The process was quick and I thought someone could be interested to learn about how such data visualizations can be built in a pretty straightforward way, even with very little technical skills. So I also made a tutorial. And here I am \u2014 (1) sharing my interactive sunburst chart of COVID cases<\/strong> and (2) describing how I created it using JavaScript<\/strong> in a matter of minutes, step by step!<\/p>\n

My JS sunburst chart provides an overview of the situation as of November 24, 2020, and also shows the global count, continent-wide data, and country-wise proportions for the current active COVID-19 cases and deaths. Scroll down to explore it by yourself and check out the tutorial along the way. Here is a sneak peek of the final chart to get you excited:<\/p>\n

\"JavaScript<\/p>\n

This sunburst charting tutorial is mainly for beginners to data science. So before we get to business, let\u2019s make sure we\u2019re on the same page. I\u2019ll explain what a sunburst chart is and how it works, to start with. Then I\u2019ll show you how to create a cool and colorful interactive visualization like that with JavaScript (and you can do it even if you don\u2019t know it too well). That\u2019s the plan!<\/p>\n

<\/p>\n

What Is a Sunburst Chart?<\/h2>\n

A sunburst chart<\/a> shows hierarchy through a series of rings. Each ring is segmented proportionally to represent its constituent details and corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it.<\/p>\n

A Sunburst is remarkably similar to a Treemap, except that it uses a radial rather than a rectangular layout.<\/strong><\/em><\/p><\/blockquote>\n

Sunburst charts are also called ring charts, multilevel pie charts, or treepies. They are best suited to represent part of whole relationships. The hierarchy of the categories is ideally represented by a uniform color palette, thereby giving a clear understanding of the lineage. Each level can be clicked to get a drilled-down view of that category.<\/p>\n

Without further ado, let\u2019s see how to make them with ease, illustrated by the example of COVID statistics as data and JavaScript (HTML5) as a technology.<\/p>\n

Building a JS Sunburst Chart<\/h2>\n

When you\u2019re visualizing data for an online project like a web site, it is always an advantage to have at least some programming skills. But there are multiple solutions such as JavaScript charting libraries<\/a> that can make it quite effortless to create beautiful charts at a fast pace \u2014 even graphics like sunburst diagrams that may look quite complicated \u2014 without too much technical knowledge and experience. Look.<\/p>\n

To start with, the entire process of making an interactive JS sunburst chart \u2014 or basically any JavaScript chart \u2014 can be logically split into four fundamental steps<\/strong>. They are as follows:<\/p>\n

    \n
  1. Create a basic HTML page (if you don\u2019t have it yet).<\/li>\n
  2. Include the necessary JavaScript files (such as the charting library scripts).<\/li>\n
  3. Connect the data (what dataset are you going to visualize?).<\/li>\n
  4. Add some simple JS code (depending on what kind of chart you want to get).<\/li>\n<\/ol>\n

    1. Create an HTML page<\/h3>\n

    The first thing to do is make a basic HTML page with a head and a body to render the visualization. Here, it is also necessary to add a div<\/code> element that will contain the chart and give it some id to easily reference this div<\/code> in any other places within the code.<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sunburst<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    You see the div<\/code> block element is given a width and height of 100% to render the chart full screen. But you can change that to fit your requirements, of course.<\/p>\n
    2. Include JavaScript files<\/h3>\n
    Second, reference all the necessary JS files in the <head><\/code> section of the HTML page.<\/p>\n
    Multiple JavaScript charting libraries<\/a> can be used to quickly visualize data. Not all of them have sunburst charts, though. For this particular visualization, I decided to go with the JS library of AnyChart<\/a>. It supports a sunburst and many useful features out of the box, and also has detailed documentation<\/a> with a lot of samples. The same basic steps usually apply if you use a different charting library, though, anyway.<\/p>\n
    I will include the corresponding files from AnyChart\u2019s CDN<\/a>; you can download these files locally if you wish. In particular, I need to add the core library module<\/a> that is necessary for all types of charts and a specific module<\/a> for the sunburst chart.<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sunburst<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-sunburst.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the JS code for the sunburst chart will come here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    You see I included a script<\/code> tag in the body for adding the JavaScript code for the sunburst chart, which will be figured out in the last step.<\/p>\n
    3. Connect the COVID data<\/h3>\n
    Since COVID-19 is a globally topical issue, there are tons of datasets available for it. I wanted to focus on the total number of confirmed cases and deaths due to COVID-19 across the various countries of the world. Finally, I decided to take the data from a trusted source \u2014 Our World in Data<\/a>, a scientific online publication whose researchers are based at the University of Oxford.<\/p>\n
    I downloaded the complete dataset in the JSON format and then filtered the data to keep only relevant information for the chart. Since the dataset is quite big, I store it in a separate file<\/a> and will reference that file in my HTML page to apply it to the sunburst graphic type in this case.<\/p>\n
    Loading the JSON file in AnyChart can be done with the help of the Data Adapter<\/a> module, which needs to be referenced in the <head><\/code> section in addition to the library\u2019s scripts included in the previous step. Next, the loadJsonFile<\/code> method is used inside the <script><\/code> tag in the body of the HTML page to load the data file.<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sunburst<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-sunburst.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#container {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile('{JSON data file location}',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function (data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Sunburst chart's JS code will come here.\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    Now that the structure required to hold the chart and the data is ready, let\u2019s add just a handful of quick lines of JavaScript code and see a magnificent sunburst chart materialize!<\/p>\n
    4. Add JS code for the sunburst diagram<\/h3>\n
    Before anything else, I\u2019ll add a function enclosing all the JavaScript code for my sunburst chart of the COVID data, which makes sure that the entire code inside of it will only execute once the page is ready.<\/p>\n
    Since sunburst charts feature a tree structure, firstly it\u2019s necessary to create that structure from the data and then use it to make the chart. Next, I set the calculation mode<\/a> as \u201cparent-independent\u201d which is used to compare elements by their values. Also, I am dealing with numeric data and I will sort it in ascending order.<\/p>\n
    Do not worry if all this sounds complicated or difficult to grasp. In fact, it is extremely easy here \u2014 look at how it\u2019s done in just 4 additional lines of code (I\u2019ll leave comments to each so you\u2019ll see):<\/p>\n
    <script>\r\n\u00a0\u00a0anychart.onDocumentReady(function() {\r\n\u00a0\u00a0anychart.data.loadJsonFile('{JSON data file location}',\r\n\u00a0\u00a0\u00a0\u00a0function (data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a data tree from the dataset\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var dataTree = anychart.data.tree(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a sunburst chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var chart = anychart.sunburst(dataTree);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the calculation mode\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.calculationMode('parent-independent');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the ascending sort order\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.sort('asc');\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0});\r\n<\/script><\/code><\/pre>\n
    Now, I\u2019ll add a chart title and set the container referencing the id given to the HTML element in step 1. The final action is to draw the sunburst chart we\u2019ve just coded.<\/p>\n
    \/\/ set the chart title\r\nchart.title(\"COVID-19 Cases Across the World\");\r\n\/\/ set the chart container element id\r\nchart.container('container');\r\n\/\/ initiate chart drawing\r\nchart.draw();<\/code><\/pre>\n
    Voil\u00e0! A basic, yet already fully-functional and lovely-looking JavaScript-based sunburst chart is ready!<\/strong> Check it out below embedded from CodePen<\/strike> AnyChart Playground where you can play with the code. (But keep reading as this is just the beginning!)<\/p>\n