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/Maps/Map_Projections

​

    // create data set

    var data = [

{'id': 'AU.NS', 'size': 7565500},

{'id': 'AU.NT', 'size': 243700},

{'id': 'AU.WA', 'size': 2565600},

{'id': 'AU.SA', 'size': 1682600},

{'id': 'AU.VI', 'size': 5866300},

{'id': 'AU.QL', 'size': 4750500},

{'id': 'AU.TS', 'size': 514700}

    ];

​

    // create map chart

    var map = anychart.map();

​

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

    map.geoData(anychart.maps.australia);

​

    //set bubble min/max size settings

    map.maxBubbleSize('10%');

    map.minBubbleSize('3%');

​

    //create bubble series

    var series = map.bubble(data);

​

    // set colors

    series.normal().hatchFill("percent30");

    series.hovered().hatchFill("percent20");

    series.selected().hatchFill("percent50");

    series.normal().fill("white");

    series.hovered().fill("white");

    series.selected().fill("white");

    series.normal().stroke("black");

    series.hovered().stroke("black", 2);

    series.selected().stroke("black", 2);

​

    // set container id for the chart

    map.container('container');

    // initiate chart drawing

    map.draw();

});