html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile( 'https://gist.githubusercontent.com/shacheeswadia/47b28a4d061e415555f01f5ce48e9ae3/raw/0f7592a8048872db7b77ccd2df8907e61952a806/shippingDataInverted.json',

    function (data) {

      // set the map chart

      var map = anychart.map();

      // set the global geodata

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

​

      // set the map title

      map.title( 'Shipping ports across the globe');

​

      // creates dataset from entire data

      var portsDataSet = anychart.data.set(data).mapAs();

​

      // helper function to create several series

      var createSeries = function (name, data, color) {

        // set the marker series for the ports

        var series = map.marker(data);

        // configure the series settings

        series

          .name(name)

          .fill(color)

          .stroke('2 #E1E1E1')

          .type('circle')

          .size(5)

          .labels(false)

          .selectionMode('none');

​

        series

          .legendItem()

          .iconType('circle')

          .iconFill(color)

          .iconStroke('2 #E1E1E1');

      };

​

      // create 5 series, filtering the data by the outflows at each port

      createSeries(

        'Up to 100,000',

        portsDataSet.filter('outflows', filterFunction(0, 100000)),

        '#D1FAE9'

      );

      createSeries(

        '100,000 - 1,000,000',

        portsDataSet.filter('outflows', filterFunction(100000, 1000000)),

        '#9CE0E5'

      );

      createSeries(

        '1,000,000 - 5,000,000',

        portsDataSet.filter('outflows', filterFunction(1000000, 5000000)),

        '#00ACC3'

      );

      createSeries(

        '5,000,000 - 10,000,000',

        portsDataSet.filter('outflows', filterFunction(5000000, 10000000)),

        '#355CB1'

      );

      createSeries(

        'More than 10,000,000 outflows',

        portsDataSet.filter('outflows', filterFunction(10000000, 0)),

        '#002D79'

      );

​

      // turn on the map legend

      map.legend(true);

​

      // set the container

      map.container('container');

​

      // draw the map

      map.draw();

    }

  );

});

​

// helper filter function

function filterFunction(val1, val2) {

  if (val2) {

    return function (fieldVal) {

      return val1 <= fieldVal && fieldVal < val2;

    };

  }

  return function (fieldVal) {

    return val1 <= fieldVal;

  };

}