html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // load json data

  anychart.data.loadJsonFile('https://static.anychart.com/git-storage/word-press/data/choropleth-map-tutorial/data.json', function (data) {

​

    // Variables

    // go into the records section of the data

    var geoData = data.records;

​

    // sum of all cases per country

    var sumCases = 0;

​

    // sum of all deaths per country

    var sumDeaths = 0;

​

    // convert cases and deaths to numbers

    var numC;

    var numD;

​

    // create a new array with the resulting data

    var chartData = [];

​

    // Go through the initial data

    for (var i = 0; i < geoData.length; i++) {

      // convert strings to numbers and save them to new variables

      numC = parseInt(geoData[i].cases);

      numD = parseInt(geoData[i].deaths);

​

      // check if we are in the same country by comparing the geoId

      // if the country is the same, add cases and deaths to the appropriate variables

      if ((geoData[i + 1]) !== undefined && (geoData[i].geoId === geoData[i + 1].geoId)) {

        sumCases = sumCases + numC;

        sumDeaths = sumDeaths + numD;

      } else {

​

        // add last day cases and deaths of the same country

        sumCases = sumCases + numC;

        sumDeaths = sumDeaths + numD;

​

        // insert the resulting data in the array using the AnyChart keywords

        chartData.push({ id: geoData[i].geoId, value: sumCases, size: sumDeaths, title: geoData[i].countriesAndTerritories });

​

        // reset the variables to start over

        sumCases = 0;

        sumDeaths = 0;

​

      }

    }

​

    // connect the data with the map

    var chart = anychart.map(chartData);

    chart.geoData(anychart.maps.world);

​

    // specify the chart type and set the series

    var series = chart.choropleth(chartData);

​

    // variable to store data that will be used for bubbles

    var bubbleData = [];

​

    // store only the countries that have at least 1 death

    for (var j = 0; j < chartData.length; j++) {

      if (data[j] && data[j].size > 0) {

        bubbleData.push(chartData[j]);

      }

    }

​

    // create a series for bubbles

    var series_1 = chart.bubble(bubbleData);

​

    // set the maximum size of the bubble

    chart.maxBubbleSize(25);

​

    // set the minimum size of the bubble

    chart.minBubbleSize(3);

​

    // set colors and stroke of bubbles

    series_1.normal().fill('black', 0.3);

    series_1.hovered().fill('black', 0.1);

    series_1.selected().fill('black', 0.5);

    series_1.normal().stroke('rgb(150,33,31)');

    series_1.hovered().stroke('rgb(150,33,31)', 2);

    series_1.selected().stroke('rgb(150,33,31)', 4);

​

    // set the chart title

    chart.title('COVID-19 Global Cases');

​

    // color scale ranges

    var ocs = anychart.scales.ordinalColor([

      { less: 99 },

      { from: 100, to: 999 },

      { from: 1000, to: 9999 },

      { from: 10000, to: 29999 },

      { from: 30000, to: 39000 },

      { from: 40000, to: 59000 },

      { from: 60000, to: 99999 },

      { greater: 100000 }

    ]);

​

    // set scale colors

    ocs.colors([

      'rgb(252,245,245)',

      'rgb(241,219,216)',

      'rgb(229,190,185)',

      'rgb(211,152,145)',

      'rgb(192,117,109)',

      'rgb(178,93,86)',

      'rgb(152,50,48)',

      'rgb(150,33,31)'

    ]);

​

    // tell the series what to use as a colorRange (colorScale)

    series.colorScale(ocs);

​

    // enable the legend

    chart.legend(true);

​

    // set the source mode of the legend and add styles

    chart.legend()

      .itemsSourceMode('categories')

      .position('right')

      .align('top')

      .itemsLayout('vertical')

      .padding(50, 0, 0, 20)

      .paginator(false);

​

    // tooltip formatting

    series.tooltip().format('Total Confirmed Cases: {%value}');

    series_1.tooltip().format('Total Deaths: {%size}');

​

    // set the container id

    chart.container('container');

​

    // draw the chart

    chart.draw();

  });

});