html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/a20ba5b62cef306ccc1a8e8857e5316a/raw/0337b16fa8dc4de97263bc0a4ededf935a529c35/migration-data.json', function (data) {

​

    // сreate a connector map chart instance

    var map = anychart.connector();

​

    // include the world map geodata

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

​

    // darken all regions

    map

      .unboundRegions()

      .enabled(true)

      .fill('#E1E1E1')

      .stroke('#D2D2D2');

​

    // set the map chart title

    map

      .title('Migrations to the USA from the top 15 countries');

    // display all labels even if there is an overlap

    map. 

      overlapMode("allow-overlap");

​

    // a helper function to create the series

    // that will form the connector lines

    var createSeries = function (data) {

      // create and customize the connector series

      var connectorSeries = map

        .connector(data);

      connectorSeries

        .markers()

        .position('100%')

        .size(10);

      // set the labels for the source countries

      connectorSeries

        .labels()

        .enabled(true)

        .format(function () {

          return this.getData('from');

        });

    };

​

    // create a dataset from the data

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

​

    createSeries(dataSet);

​

    // set the container

    map.container('container');

​

    // draw the map

    map.draw();

  });

});