anychart.onDocumentReady(function () {
  anychart.data.loadJsonFile(    'https://gist.githubusercontent.com/shacheeswadia/a20ba5b62cef306ccc1a8e8857e5316a/raw/0337b16fa8dc4de97263bc0a4ededf935a529c35/migration-data.json',
    function (data) {
      // Creates map chart
      var map = anychart.connector();

      // Sets settings for map chart
      map.geoData('anychart.maps.world');

      map
        .unboundRegions()
        .enabled(true)
        .fill('#E1E1E1')
        .stroke('#D2D2D2');

     // Sets title for map chart and customizes it
      map
        .title()
        .enabled(true)
        .useHtml(true)
        .padding([0, 0, 40, 0])
        .text(
          '<span style="color:#212121;">Migrations to the USA from the top 15 countries</span><br/>' +
          '<span style="font-size: 14px;">Majority of the migrants come from Mexico, Asia and South America</span>'
        );
    
      // Display all labels even if there is an overlap
      map. 
        overlapMode("allow-overlap");
    
      // Helper function to create several series
       var createSeries = function (name, data, color) {
        
        // Creates connector series for destinations and customizes them
        var connectorSeries = map
          .connector(data)
          .name(name)
          .fill(color)
          .stroke({
            color: color,
            thickness: 2
          });
        
        connectorSeries
          .hovered()
          .stroke('1.5 #212121')
          .fill('#212121');
         
        connectorSeries
          .markers()
          .position('100%')
          .fill(color)
          .stroke({
            color: color
          })
          .size(8);
         
         connectorSeries
          .hovered()
          .markers()
          .position('100%')
          .size(10)
          .fill('#212121')
          .stroke('2 #455a64');

        // Sets labels for the source countries
        connectorSeries
          .labels()
          .enabled(true)
          .format(function () {
            return this.getData('from');
          })
         .fontColor('#212121');
         
        // Sets the width of the line based on data
        if (name === 'More than 50,000') {
          connectorSeries.startSize(5).endSize(2);
        } else if (name === '40,000 to 50,000') {
          connectorSeries.startSize(3.5).endSize(1.5);
        } else if (name === '20,000 to 40,000') {
          connectorSeries.startSize(3).endSize(1);
        } else if (name === '16,000 to 20,000') {
          connectorSeries.startSize(2).endSize(0.5);
        } else {
          connectorSeries.startSize(1).endSize(0);
        }
         
         // Sets settings for legend items
         connectorSeries
          .legendItem()
          .iconType('square')
          .iconFill(color)
          .iconStroke(false);
      
         // sets tooltip setting for the series
         connectorSeries
          .tooltip()
          .useHtml(true)
          .format(function () {
            return (
              '<h4 style="font-size:14px; font-weight:400; margin: 0.25rem                 0;">From:<b> ' + this.getData('from') +  '</b></h4>' +
              '<h4 style="font-size:14px; font-weight:400; margin: 0.25rem                 0;">Total Migrants::<b> ' +        this.getData('total').toLocaleString() + '</b></h4>'
            );
          });

      };

      // Creates Dataset in required format from the data
      var dataSet = anychart.data.set(data).mapAs();

      // Creates 6 series, filtering the data by the amount of migration numbers
      createSeries(
        'Less than 16,000',
        dataSet.filter('total', filterFunction(0, 16000)),
        '#fed693'
      );
      createSeries(
        '16,000 to 20,000',
        dataSet.filter('total', filterFunction(16000, 20000)),
        '#f5ad52'
      );
      createSeries(
        '20,000 to 40,000',
        dataSet.filter('total', filterFunction(20000, 40000)),
        '#3fb8c5'
      );
      createSeries(
        '40,000 to 50,000',
        dataSet.filter('total', filterFunction(40000, 50000)),
        '#1792c0'
      );
      createSeries(
        'More than 50,000',
        dataSet.filter('total', filterFunction(50000, 1000000)),
        '#1c5eaa'
      );

      // Turns on the legend
      map
        .legend()
        .enabled(true)
        .position('bottom')
        .padding([0, 0, 20, 0])
        .fontSize(10);

      map
        .legend()
        .title()
        .enabled(true)
        .fontSize(13)
        .padding([0, 0, 5, 0])
        .text('Number of Migrants (in the year 2019)');
    

      // Sets container id for the chart
      map.container('container');

      // Initiates chart drawing
      map.draw();
    }
  );
});

// Helper function to bind data field to the local var.
function filterFunction(val1, val2) {
  if (val2) {
    return function (fieldVal) {
      return val1 <= fieldVal && fieldVal < val2;
    };
  }
  return function (fieldVal) {
    return val1 <= fieldVal;
  };
}