html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // This sample uses 3rd party proj4 component

    // that makes it possible to set coordinates

    // for the points and labels on the map and

    // required for custom projections and grid labels formatting.

    // See https://docs.anychart.com/7.14.3/Maps/Map_Projections

  // create map

  var map = anychart.map();

​

  // create data sets

  var dataSet_1 = anychart.data.set([

    ['GB.WI', 2],

    ['GB.AB', 1.5],

    ['GB.AG', 1.8],

    ['GB.AS', 0.8],

    ['GB.MO', 1.3],

    ['GB.BO', 1.4],

    ['GB.NN', 2.7],

    ['GB.WH', 1.8],

    ['GB.FI', 2.5],

    ['GB.CU', 2],

    ['GB.ST', 1.5],

    ['GB.PO', 1.8],

    ['GB.SF', 0.8],

    ['GB.KE', 1.3],

    ['GB.WS', 1.4],

    ['GB.DS', 2.7],

    ['GB.CO', 1.8],

    ['GB.DN', 2.5],

    ['GB.NY', 1.8],

    ['GB.EY', 0.8],

    ['GB.CI', 1.3],

    ['GB.PE', 1.4],

    ['GB.RL', 2.7],

    ['GB.LC', 1.8]

  ]);

​

  var dataSet_2 = anychart.data.set([

    ['GB.AR', 1.4],

    ['GB.WD', 1.4],

    ['GB.SL', 2.5],

    ['GB.EL', 1.5],

    ['GB.DG', 1.7],

    ['GB.EA', 3.3],

    ['GB.IC', 3.1],

    ['GB.HI', 1.4],

    ['GB.CR', 1.4],

    ['GB.BU', 2.5],

    ['GB.MK', 1.5],

    ['GB.NA', 1.7],

    ['GB.BW', 3.3],

    ['GB.DA', 3.1],

    ['GB.TF', 2.1],

    ['GB.RT', 3.5],

    ['GB.CH', 1.5],

    ['GB.DW', 1.7],

    ['GB.LM', 3.3],

    ['GB.CM', 3.1],

    ['GB.DO', 2.1],

    ['GB.IW', 3.5]

  ]);

    // create bubble series

  series_1 = map.bubble(dataSet_1);

  series_2 = map.bubble(dataSet_2);

​

  // set geoIdField to 'id', this field contains in geo data meta properties

  series_1.geoIdField('id');

  series_2.geoIdField('id');

​

  //disable the labels

  series_1.labels(false);

  series_2.labels(false);

​

  //set bubble min/max size settings

  map.maxBubbleSize(9);

  map.minBubbleSize(2);

​

  // change the fill and hoverFill colors of series_1

  series_1.fill("#7D00AD", 0.35);

  series_1.hoverFill("#7D00AD", 0.7);

​

  // change the stroke and hoverStroke colors of series_1

  series_1.stroke("#BA005C");

  series_1.hoverStroke("#BA005C");

​

  // set the select colors of series_1

  series_1.selectStroke("#BA005C");

  series_1.selectFill("#D1003D");

​

  // change the fill and hoverFill colors of series_2

  series_2.fill("#178AA8", 0.35);

  series_2.hoverFill("#3675BD", 0.7);

​

  // change the stroke and hoverStroke colors of series_2

  series_2.stroke("#3675BD");

  series_2.hoverStroke("#178AA8");

​

  // set the select colors of series_2

  series_2.selectStroke("#3675BD");

  series_2.selectFill("#734CE6");

​

  // tooltip formatting

  series_1.tooltip().format(function(){

      return ("Employed international workers: "+this.size+ "%");

  });

​

  series_2.tooltip().format(function(){

      return ("Unemployed local workers: "+this.size+ "%");

  });

​

  // set geo data, you can find this map in our geo maps collection

  // https://cdn.anychart.com/#maps-collection

  map.geoData(anychart.maps['united_kingdom']);

​

  //set map container id (div)

  map.container('container');

​

  //initiate map drawing

  map.draw();

});