html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b042becd17e68d9a718/bubbleMapData.json',

  function (data) {

​

    // Creates map chart

    var map = anychart.map();

​

    // Define settings for maps regions

    map

      .unboundRegions()

      .enabled(true)

      .fill('#E1E1E1')

      .stroke('#D2D2D2');

​

    // Set geodata using the script added

    map.geoData('anychart.maps.united_states_of_america');

​

    // Set Chart Title

    map

      .title('2020 US Election Results');

​

    // Set bubble min/max size settings

    map.minBubbleSize('0.8%').maxBubbleSize('5%');

​

    // Linear scale to get opacity values

    var opacity = d3.scaleLinear()

    .domain([49, 70])

    .range([0.4, 0.9]);

​

    // Fill color based on winner and opacity based on % of votes won

    data.forEach(function(d){

      var opacityVal = opacity(d.votepercent);

      opacityVal = opacityVal.toFixed(2);

      if(d.winner == "Democrats"){

        d.fill = "#019bd8 " + opacityVal;

      }else{

        d.fill = "#d81c28 " + opacityVal;

      }

    });

​

    //Charting the bubbles

    var series = map.bubble(

      anychart.data.set(data).mapAs({ size: 'electoralvotes' })

    );

​

    //Tooltip

    series

      .tooltip(true)

      .stroke('2 #E1E1E1')

      .selectionMode('none');

​

    //Labels

    series

      .labels()

      .enabled(true)

      .anchor('left-center')

      .position('right')

      .fontSize(11)

      .offsetX(5);

​

    // set container id for the chart

    map.container('container');

​

    // Initiates chart drawing

    map.draw();

  });

});