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

​

      // create a bubble series

      let series = map.bubble(

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

          size: "Petrol"

        })

      );

​

      // enable the series labels

      series

        .labels()

        .enabled(true);

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

    }

  );

});