html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // load the data

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

​

      // customize the tooltip

      series

        .tooltip()

        .useHtml(true)

        .format(

          "<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Price in July: <b>{%Petrol}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Price in February: <b>{%PetrolFeb}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Change: <b>{%percentRise}%</b></h6>"

        );

      // customize the hovered state

      series

        .hovered()

        .fill(function (d) {

          return anychart.color.darken(d.sourceColor, 0.2);

        })

        .stroke(0);

​

      // set the map's title

      map

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #7c868e; font-size:18px;">Gasoline Prices in United States in July 2022</span>' +

            '<br/><span style="font-size: 15px;">Color shows change from February 2022</span>'

        );

      // set the container id

      map.container("container");

​

      // initiate the map drawing

      map.draw();

    }

  );

});