{"id":14678,"date":"2022-03-25T23:43:19","date_gmt":"2022-03-25T23:43:19","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14678"},"modified":"2022-08-13T11:10:45","modified_gmt":"2022-08-13T11:10:45","slug":"bullseye-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/03\/25\/bullseye-chart-js\/","title":{"rendered":"Creating Bullseye Chart with JS to Visualize the COVID-19 Vaccine Pipeline"},"content":{"rendered":"

\"Creating<\/a>Visualizing data across a set of concentric rings, bullseye charts are widely used in drug pipeline and clinical trials data analysis. This tutorial will explain how to create this type of diagram with JavaScript. What\u2019s more, you\u2019ll see an excellent, typical example of an interactive bullseye chart in action!<\/p>\n

I collated detailed information about all the COVID-19 vaccine candidates currently undergoing clinical studies from the WHO\u2019s vaccine tracker<\/a>. Now, join me as I plot it all in an interactive JS-based bullseye chart, by vaccine type and development phase!<\/p>\n

<\/p>\n

Bullseye Chart Preview<\/h2>\n

Are you wondering what the resulting chart looks like? Take a sneak peek right below! Then follow along, and you\u2019ll learn how to build this fascinating JavaScript-based bullseye chart showing the COVID-19 vaccine landscape at a glance!<\/p>\n

\"COVID-19<\/p>\n

Building a JavaScript Bullseye Chart<\/h2>\n

The process of creating a bullseye chart with JavaScript can be split into four fundamental steps:<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Include scripts.<\/li>\n
  3. Connect data.<\/li>\n
  4. Do some JavaScript coding.<\/li>\n<\/ol>\n

    Now, check out how it goes in reality step by step!<\/p>\n

    1. Create a basic HTML page<\/h3>\n

    The first thing I do is create a basic web page with a block-level HTML element (<div><\/code>) to hold the future bullseye chart.<\/p>\n

    To easily reference the <div><\/code> element later in the code, I provide it with an id<\/code> value.<\/p>\n

    I also set its height<\/code> and width<\/code> parameters as 100%. As a result, my bullseye chart will render across the whole HTML page.<\/p>\n

    <html>\r\n  <head>\r\n    <title>JavaScript Bullseye Chart<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include scripts<\/h3>\n
    Now, I need to reference all scripts that will be used to create the bullseye chart I have in mind. That goes to the page\u2019s <head><\/code> section.<\/p>\n
    There are many<\/a> JavaScript charting libraries out there, collections of pre-written JavaScript code intended to facilitate the development of data visualizations. However, not all of them support bullseye charts. One of those that have this type of graph is AnyChart<\/a>, which is free for non-commercial use and pretty simple to get started with, so I decided to use it as an example in this tutorial.<\/p>\n
    To make a bullseye chart, I need the library\u2019s core<\/a> and polar<\/a> modules.<\/p>\n
    <html>\r\n  <head>\r\n    <title>JavaScript Bullseye Chart<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-polar.min.js\"><\/script>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n\r\n  <body>  \r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the JS bullseye chart code goes here.\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Connect data<\/h3>\n
    So. I took vaccine data from the COVID-19 vaccine tracker and landscape<\/a> section of the World Health Organization\u2019s website and curated it into a JSON file<\/a>.<\/p>\n
    To load the data file, I will use a handy Data Adapter<\/a> utility. So I reference it together with the other scripts. Then I will simply connect the dataset using the data.loadJsonFile<\/code> function.<\/p>\n
    Now that we\u2019ve got a holder page, scripts, and data for the visualization, let me show you how to code a lovely interactive JavaScript bullseye chart!<\/p>\n
    4. Do some JS coding<\/h3>\n
    Although bullseye charts may seem quite fancy, it is not very complicated to build such a data visualization using a JavaScript charting library. I am going to explain each move and leave explanatory notes in the code itself.<\/p>\n
    So, to start with, I add a function enclosing all the code, which makes sure that everything inside it will execute only after the page is ready, and then load the data from the JSON file.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  anychart.data.loadJsonFile(\r\n    \"https:\/\/gist.githubusercontent.com\/shacheeswadia\/3cc96d8ed792bfa0c04fbd3825816fde\/raw\/606c2646df568f30bd39dc01fcd4efe6e92b3bac\/vaccineData.json\",\r\n    function (data) {...}\r\n  );\r\n});<\/code><\/pre>\n
    Then, I create a polar chart instance.<\/p>\n
    var chart = anychart.polar();<\/code><\/pre>\n
    I want my bullseye chart to have a hole in the center, so I set the inner radius.<\/p>\n
    chart.innerRadius(80);<\/code><\/pre>\n
    Next, I specify both the Y scale (for clinical research phases) and the X scale (for vaccine types) as ordinal and define the order in which I want the values to show up.<\/p>\n
    \/\/ y scale shows phases\r\n\/\/ set it as ordinal\r\nchart.yScale(\"ordinal\");\r\n\r\n\/\/ define the order of values on the scale\r\nchart\r\n  .yScale()\r\n  .values([\r\n    \"Phase 4\",\r\n    \"Phase 3\",\r\n    \"Phase 2\/3\",\r\n    \"Phase 1\/2\",\r\n    \"Phase 2\",\r\n    \"Phase 1\",\r\n    \"NA\"\r\n  ]);\r\n\r\n\/\/ x scale shows vaccine types\r\n\/\/ set it as ordinal\r\nchart.xScale(\"ordinal\");\r\n\r\n\/\/ define the order of values on the scale\r\nchart\r\n  .xScale()\r\n  .values([\r\n    \"Bacterial antigen-spore expression vector\",\r\n    \"DNA based vaccine\",\r\n    \"Inactivated virus\",\r\n    \"Live attenuated virus\",\r\n    \"Protein subunit\",\r\n    \"RNA based vaccine\",\r\n    \"Viral vector (Non-replicating)\",\r\n    \"Viral vector (Non-replicating) + APC\",\r\n    \"Viral vector (Replicating)\",\r\n    \"Viral vector (Replicating) + APC\",\r\n    \"Virus like particle\"\r\n  ]);<\/code><\/pre>\n
    After that, I add a function that will set a series with the given properties, creating a marker series (one marker will stand for one vaccine), beautifying the series name to be shown based on the number of doses, setting the series size, name, id, and finally, returning the series.<\/p>\n
    \/\/ set a series with the given properties\r\nfunction createSeries(seriesId) {\r\n  \/\/ create a series\r\n  const series = chart.marker();\r\n\r\n  \/\/ the name for display is beautified\r\n  const seriesName =\r\n    seriesId +\r\n    (seriesId == \"NR\" ? \"\" : seriesId == 1 ? \" dose\" : \" doses\");\r\n\r\n  \/\/ set the size, name, id \r\n  series.size(2).name(seriesName).id(seriesId);\r\n\r\n  return series;\r\n}<\/code><\/pre>\n
    Next, I create a function that will take care of adding the marker series with the given data. First, I set the number of doses from the data as the series ID. Then, I check if such a series already exists, and if it does not, I create one with the series ID using the function I have configured just before. After that, I add the data into the series and specify the x<\/code> and y<\/code> values so that the type of the vaccine is on the X scale and the clinical trial phase is on the Y scale. Finally, once the function is defined, I loop through the data-set point by point.<\/p>\n
    \/\/ add a marker series with the given data\r\nfunction addPoint(item) {\r\n  \/\/ the number of doses is a series id\r\n  const seriesId = item[\"Number of doses\"];\r\n\r\n  \/\/ check if there is a series like we need\r\n  var series = chart.getSeries(seriesId);\r\n\r\n  \/\/ if there is no such series we create and configure it\r\n  if (series == null) {\r\n    series = createSeries(seriesId);\r\n  }\r\n\r\n  \/\/ add the data into the series\r\n  series\r\n    .data()\r\n    .getDataSets()[0]\r\n    .append({\r\n      x: item[\"Vaccine platform description\"],\r\n      y: item[\"Phase\"],\r\n      ...item\r\n    });\r\n}\r\n\r\n\/\/ loop through the dataset\r\n\/\/ point by point\r\ndata.forEach((vaccine) => addPoint(vaccine));<\/code><\/pre>\n
    Since the amount of data I am visualizing in a bullseye chart is large and there will be multiple points in almost every sector of the diagram, I distribute the markers equally to avoid overlap.<\/p>\n
    \/\/ spread bullets throughout a sector\r\nchart.spreadValues(\"valueEqual\");<\/code><\/pre>\n
    Almost done! The last things I do are add a title and draw the resulting bullseye chart in the container.<\/p>\n
    \/\/ set the chart title\r\nchart.title(\"COVID-19 Vaccine Pipeline\");\r\n\r\n\/\/ set the chart container id\r\nchart.container(\"container\");\r\n\r\n\/\/ draw the resulting bullseye chart\r\nchart.draw();<\/code><\/pre>\n
    That\u2019s it! A stunning interactive JS-based bullseye chart is ready with just a few lines of code!<\/p>\n