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

      .enabled(true)

      .useHtml(true)

      .text(

      '<span style= "font-size:22px;">2020 US Election Results</span><br/><span style="color:#929292; font-size: 16px;">' +

      'State-wise number of electoral votes and percentage of winner votes</span>'

    );

​

    // Set bubble min/max size settings

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

​

    var opacity = d3.scaleLinear()

    .domain([49, 70])

    .range([0.4, 0.9]);

​

    //Fill color based on winner

    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' 

      })

    );

​

    // Enable HTML for labels

    series.tooltip().useHtml(true);

​

    // Customize tooltip text

    series

      .tooltip()

      .format("<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Winning Party: <b>{%winner}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Electoral Votes: <b>{%electoralvotes}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>% of votes won: <b>{%votepercent}%</b></h6>");

​

    // Tooltip

    series

      .tooltip(true)

      .stroke('2 #E1E1E1')

      .selectionMode('none');

​

    // Labels

    series

      .labels()

      .enabled(true)

      .anchor('left-center')

      .position('right')

      .fontColor('#353535')

      .fontSize(11)

      .offsetX(5);

​

    // On hovering the bubbles

    series

      .hovered().fill(function(d){

      return d.sourceColor.color;

    }, 1)

​

    // Set container id for the chart

    map.container('container');

​

    // Initiates chart drawing

    map.draw();

   });

});