html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

    "https://gist.githubusercontent.com/shacheeswadia/eead370d79e0f20df5148b79b6887393/raw/fba29e3dcf1806cab770e845546a136a924cf1d5/dataBubbleMap2.json",

    function (data) {

      // create a map chart

      let map = anychart.map();

​

      // add the u.s. geodata

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

​

      // restrict the maximum size of the bubbles

      map.maxBubbleSize("5%");

​

      // set a custom coloring pattern

      let fillColor = d3

        .scaleQuantile()

        .domain([20, 50])

        .range(["#1b8366", "#77dd79", "#f7e975", "#fea43e", "#cf0011"]);

      data.forEach(function (d) {

        let diff = d.Petrol - d.PetrolFeb;

        d.percentRise = ((diff * 100) / d.PetrolFeb).toFixed(2);

        d.fill = fillColor(d.percentRise);

      });

      // create a bubble series

      let series = map

        .bubble(

          anychart.data.set(data).mapAs({

            size: "Petrol"

          })

        )

        .stroke("0");

      // enable and customize the series labels

      series

        .labels()

        .enabled(true)

        .anchor("left-center")

        .position("right")

        .fontColor("#353535")

        .fontSize(11)

        .offsetX(5);

​

      // set the map's title

      map.title("Gasoline Prices in the United States in July 2022");

      // set the container id

      map.container("container");

​

      // initiate the map drawing

      map.draw();

    }

  );

});

​