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 data set

    var dataSet = anychart.data.set([

['AU.NS', 3.5, 8.5],

['AU.NT', 7.1, 12],

['AU.WA', 10.4, 2.9],

['AU.SA', 4.7, 28.2],

['AU.VI', 7.9, 19.4],

['AU.QL', 8, 3.7],

['AU.TS', 3.2, 7.3]

    ]);

​

    // create map chart

    var map = anychart.map();

​

    map.title("Employed international workers and \nUnemployed local workers");

​

    // set geoData using https://cdn.anychart.com/geodata/1.2.0/countries/australia/australia.js

    map.geoData(anychart.maps.australia);

​

    var series1Data = dataSet.mapAs({id:[0], size:[1]});

    var series2Data = dataSet.mapAs({id:[0], value:[2]});

​

    //set bubble min/max size settings

    map.maxBubbleSize(70);

    map.minBubbleSize(20);

​

    //create bubble series

    var series_1 = map.bubble(series1Data);

    series_1.name("Employed international workers");

    var series_2 = map.choropleth(series2Data);

    series_2.name("Unemployed local workers");

​

    //set series geo id field settings

    series_1.geoIdField("code_hasc");

    series_2.geoIdField("code_hasc");

​

    // change the fill and hoverFill colors of series_1

    series_1.fill("#EBD670", 0.35);

    series_1.hoverFill("#C7FF99", 0.7);

​

    // change the stroke and hoverStroke colors of series_1

    series_1.stroke("#C7FF99");

    series_1.hoverStroke("#EBD670");

​

    // set the select colors of series_1

    series_1.selectStroke("#66FFCC");

    series_1.selectFill("#879CED");

​

    // set the select colors of series_2

    series_2.selectStroke("#3675BD");

    series_2.selectFill("#734CE6");

​

    // set the labels

    series_1.labels().fontColor('black');

    series_1.labels().fontSize(10);

    series_2.labels(false);

​

    // tooltip formatting

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

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

    });

​

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

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

    });

​

    // set the colors and ranges for the scale

    series_2.colorScale(anychart.scales.linearColor());

​

    //set the single hue progression

    var colors = anychart.color.singleHueProgression('#0068BC');

​

    // define the colors

    series_2.colorScale().colors(colors);

​

    // set container id for the chart

    map.container('container');

​

    // initiate chart drawing

    map.draw();

});