COVID-19 Vaccine Pipeline with Monochrome theme

COVID-19 Vaccine Pipeline

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-polar.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/monochrome.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>

  <div id="container"></div>


  <script>

  anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('monochrome');
    anychart.data.loadJsonFile(
      'https://gist.githubusercontent.com/shacheeswadia/3cc96d8ed792bfa0c04fbd3825816fde/raw/606c2646df568f30bd39dc01fcd4efe6e92b3bac/vaccineData.json',
      function (data) {
        // create a polar chart instance
        var chart = anychart.polar();
        // set the inner radius to create a hole in the center
        chart.innerRadius(80);

        // y scale shows phases
        // set it as ordinal
        chart.yScale('ordinal');
        // define the order of values on the scale
        chart
          .yScale()
          .values([
            'Phase 4',
            'Phase 3',
            'Phase 2/3',
            'Phase 1/2',
            'Phase 2',
            'Phase 1',
            'NA'
          ]);

        // x scale shows vaccine types
        // set it as ordinal
        chart.xScale('ordinal');
        // define the order of values on the scale
        chart
          .xScale()
          .values([
            'Bacterial antigen-spore expression vector',
            'DNA based vaccine',
            'Inactivated virus',
            'Live attenuated virus',
            'Protein subunit',
            'RNA based vaccine',
            'Viral vector (Non-replicating)',
            'Viral vector (Non-replicating) + APC',
            'Viral vector (Replicating)',
            'Viral vector (Replicating) + APC',
            'Virus like particle'
          ]);

        // set the font size for labels
        chart.xAxis().labels().fontSize(10);

        // set a single marker type
        chart.markerPalette(['circle']);

        // set the chart color palette
        chart.palette([
          '#dce778',
          '#c8e4fb',
          '#35baf6',
          '#ff8b66',
          '#f55d2c',
          '#e7cbeb'
        ]);

        // set a series with the given properties
        function createSeries(seriesId) {
          // create a series
          var series = chart.marker();
          // the name for display is beautified
          var seriesName =
            seriesId +
            (seriesId === 'NR' ? '' : seriesId === 1 ? ' dose' : ' doses');
          // set the size, name, id and color
          series.size(2).name(seriesName).id(seriesId);
          // configure the legend
          series.legendItem().iconType('circle').iconSize(8);
          return series;
        }

        // add a marker series with the given data
        function addPoint(item) {
          // the number of doses is a series id
          var seriesId = item['Number of doses'];
          // check if there is a series like we need
          var series = chart.getSeries(seriesId);
          // if there is no such series we create and configure it
          if (series === null) {
            series = createSeries(seriesId);
          }
          // add the data into the series
          series
            .data()
            .getDataSets()[0]
            .append(Object.assign(item, {
              x: item['Vaccine platform description'],
              y: item['Phase']
            }));
        }

        // loop through the dataset
        // point by point
        data.forEach(function (vaccine) {
          addPoint(vaccine);
        });

        // spread bullets throughout a sector
        chart.spreadValues('valueEqual');

        // define the legend and specify the parameters
        var legend = chart.legend();
        legend.enabled(true);
        legend.position('right');
        legend.itemsLayout('vertical');
        legend.align('center');

        // configure the tooltip
        chart
          .tooltip()
          .titleFormat('{%y}')
          .format(function () {
            return (
              'Type of Vaccine - ' +
              this.getData('Type of candidate vaccine ') +
              '\n Doses - ' +
              this.getData('Number of doses') +
              '\n Developers - ' +
              this.getData('Developers ') +
              '\n Mode of administration - ' +
              this.getData('Route of administration') +
              '\n Schedule - ' +
              this.getData('Schedule')
            );
          });

        // set the chart title
        chart.title('COVID-19 Vaccine Pipeline');

        // set the chart container id
        chart.container('container');

        // draw the resulting bullseye chart
        chart.draw();
      }
    );
  });

</script>
</body>
</html>
This is an interactive JS bullseye chart visualizing the WHO's data on all COVID-19 vaccine candidates undergoing clinical studies as of Feb 2022, by type and phase. Loads data from JSON. Features custom markers, tooltip, and legend.
Check out how this JavaScript chart was built step-by-step in this COVID-19 Vaccine Pipeline Chart Tutorial.
Warning!

COVID-19 Vaccine Pipeline

COVID-19 Vaccine Pipeline
