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

        const series = chart.marker();

        // the name for display is beautified

        const 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

        const 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({

            x: item["Vaccine platform description"],

            y: item["Phase"],

            ...item

          });

      }

​

      // loop through the dataset

      // point by point

      data.forEach((vaccine) => addPoint(vaccine));

​

      // spread bullets throughout a sector

      chart.spreadValues("valueEqual");

​

      // define the legend and specify the parameters

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

    }

  );

});