html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // load data from a json file

  anychart.data.loadJsonFile(

    "https://gist.githubusercontent.com/shacheeswadia/8f45da54d9bf2032fee201dbfc79e0e4/raw/5d10d58f40b4a1d994cef36dbc64545ef90ead80/queenVisits.json",

    function (data) {

​

      // create a dataset

      let dataSet = anychart.data.set(data);

​

      // create a map instance

      let map = anychart.map();

​

      // set the geodata

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

      // create a choropleth series

      let series = map.choropleth(dataSet);

​

      // set the map colors

      series.colorScale(

        anychart.scales.linearColor("#f2f2f2", "#42a5f5", "#1976d2", "#233580")

      );

​

      // customize the colors in the hovered state

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

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

      });

​

      // create the map legend

      map.colorRange().enabled(true);

​

      // create zoom controls

      let zoomController = anychart.ui.zoom();

      zoomController.render(map);

​

      // customize the tooltip text

      series

        .tooltip()

        .useHtml(true)

        .format(function (d) {

          if (d.name == "United Kingdom") {

            return "<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>The Queen lived here.</h6>";

          } else {

            return (

              "<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>The Queen visited <b>" +

              d.value +

              "</b> times.</h6>"

            );

          }

        });

​

      // set the map title

      map

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #c8102e; font-size:18px;">State Visits Made by Queen Elizabeth II</span>' +

            '<br/><span style="font-size: 15px;">The Queen is the most widely traveled head of state in history</span>'

        );

​

      // set the container

      map.container("container");

​

      // initiate the map drawing

      map.draw();

    }

  );

​

});