html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  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();

    }

  );

});