Создание карты потоков с помощью JavaScript: пошаговое руководство / forpes.ru

Главная
Создание карты потоков с помощью JavaScript: пошаговое руководство

Создание карты потоков с помощью JavaScript: пошаговое руководство +31

26.03.2023 10:00

Bright_Translate 0 3600 Источник

Карты потоков – это мощный способ представления движения объектов между различными географическими локациями, который очень легко реализуется с помощью JavaScript. По сути, они совмещают в себе функциональность карты и потоковой диаграммы. Такой тип визуализации показывает направление движения людей, товаров, денег или информации, а также их количество.

В текущем руководстве мы познакомим вас с процессом создания карты потоков. А чтобы сделать этот процесс более практичным, мы используем пример визуализации количества студентов из Индии, обучающихся в разных странах. Следуя этому руководству, вы научитесь создавать собственные карты потоков с помощью JS для любых видов данных.

Превью карты

Ниже вы можете видеть, как будет выглядеть наша итоговая карта потоков.

Создание базовой карты потоков с помощью JavaScript

С помощью JS построить карту потоков можно в четыре основных шага:

Создать веб-страницу с помощью HTML.
Включить необходимые файлы JS.
Добавить данные.
Написать JS-код для отрисовки графика.

Наличие хорошего понимания HTML, CSS и JS будет весьма кстати, но не стоит беспокоиться, если эти инструменты для вас малознакомы. В данном руководстве я подробно опишу каждый шаг, максимально упростив для вас задачу.

▍ 1. Создание веб-страницы на HTML

Для начала создадим простую HTML-страницу в качестве контейнера для отображения нашей карты. Сделаем мы это путём создания элемента <div> и установки его атрибута id на container. Это позволит позднее обращаться к созданному контейнеру, когда мы добавим карту.

Чтобы карта потоков отображалась на всю страницу, мы с помощью CSS установим высоту и ширину <div> на 100%. Можете подстроить стилизацию на своё усмотрение.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flow Map</title>
    <style type="text/css">      
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

▍ 2. Добавление необходимых файлов JavaScript

Далее мы добавим в раздел шапки нашего HTML-файла необходимые скрипты для построения карты потоков.

Проще и быстрее всего создать интерактивную карту потоков можно с помощью графической библиотеки JS. Однако не все библиотеки поддерживают такую возможность. Для этого руководства мы будем использовать JS Charts, которая, помимо поддержки карт потоков, также имеет прекрасную документацию по картированию и множество готовых примеров.

Для создания карты нам нужно добавить несколько модулей AnyChart: модули Core и Geo Map для визуализации данных, а также geodata для карты. Для обработки географических координат мы используем библиотеку Proj4js, так что она тоже включена. Кроме того, для добавления в UI возможности масштабирования нам потребуется AnyChart модуль Common UI и CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flow Map</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-map.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/geodata/custom/world/world.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css">
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css">
    <style type="text/css">      
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // Здесь будет находиться JS-код карты потоков.
    </script>
  </body>
</html>

▍ 3. Добавление данных

В этом руководстве мы будем визуализировать Топ-10 стран, в которые направлялись студенты из Индии в 2022 году. Источником данных здесь выступает индийское Министерство иностранных дел, которое предоставляет информацию по количеству студентов, обучающихся за рубежом.

Чтобы отобрать 10 ведущих стран, я проанализировал данные и на основе количества учащихся в них студентов выбрал следующие: Австралия, Канада, Германия, Оман, Катар, Российская Федерация, Саудовская Аравия, Объединённые Арабские Эмираты, Великобритания и США.

При создании карты потоков в качестве конечных точек следования учащихся мы будем использовать столицы этих стран, а в качестве отправной – Нью Дели, Индия. Координаты широты и долготы столиц я определял с помощью сайта LatLong.net. В таблице ниже показан список выбранных стран, а также общее число обучающихся в них студентов из Индии и координаты столиц.

Далее приводится датасет, который мы будем использовать для создания карты потоков. Он представляет собой массив объектов, каждый из которых отражает одно направление потока. Для всех объектов указаны широта и долгота отправной и конечной точек, а также название целевой страны и количество обучающихся в ней студентов.

var data = [
  { points: [28.610198, 77.207584, -30.59, 145.94], to: "Australia", total: 100009 },
  { points: [28.610198, 77.207584, 45.41, -75.69], to: "Canada", total: 183310 },
  { points: [28.610198, 77.207584, 52.51, 13.40], to: "Germany", total: 34864 },
  { points: [28.610198, 77.207584, 23.58, 58.38], to: "Oman", total: 39550 },
  { points: [28.610198, 77.207584, 25.28, 51.53], to: "Qatar", total: 46000 },
  { points: [28.610198, 77.207584, 55.74, 37.62], to: "Russian Federation", total: 18039 },
  { points: [28.610198, 77.207584, 24.71, 46.67], to: "Saudi Arabia", total: 65800 },
  { points: [28.610198, 77.207584, 24.45, 54.37], to: "United Arab Emirates", total: 164000 },
  { points: [28.610198, 77.207584, 52.66, -0.95], to: "United Kingdom", total: 55465 },
  { points: [28.610198, 77.207584, 38.88, -77.03], to: "United States", total: 465791 }
];

▍ 4. Написание JS-кода для отрисовки карты

Теперь, когда данные подготовлены, пора перейти к основной части – размещению карты потоков на веб-странице.

Прежде чем начать, нужно убедиться, что наш код выполняется всего раз, и страница загружается полноценно. Сделаем мы это с помощью функции anychart.onDocumentReady(), которая включит весь код карты потоков.

<script>
  anychart.onDocumentReady(function () {
    // Здесь будет находиться код карты потоков.
  });
</script>

Далее мы добавим данные, которые подготовили на первом этапе.

anychart.onDocumentReady(function () {
  var data = [
    { points: [28.610198, 77.207584, -30.59, 145.94], to: "Australia", total:    100009 },
    { points: [28.610198, 77.207584, 45.41, -75.69], to: "Canada", total: 183310 },
    { points: [28.610198, 77.207584, 52.51, 13.40], to: "Germany", total: 34864 },
    { points: [28.610198, 77.207584, 23.58, 58.38], to: "Oman", total: 39550 },
    { points: [28.610198, 77.207584, 25.28, 51.53], to: "Qatar", total: 46000 },
    { points: [28.610198, 77.207584, 55.74, 37.62], to: "Russian Federation", total: 18039 },
    { points: [28.610198, 77.207584, 24.71, 46.67], to: "Saudi Arabia", total: 65800 },
    { points: [28.610198, 77.207584, 24.45, 54.37], to: "United Arab Emirates", total: 164000 },
    { points: [28.610198, 77.207584, 52.66, -0.95], to: "United Kingdom", total: 55465 },
    { points: [28.610198, 77.207584, 38.88, -77.03], to: "United States", total: 465791 }
  ];
});

Для создания графика карты потоков мы используем AnyChart функцию connector(), передав ей данные для соединительных линий и включив геоданные карты мира.

var map = anychart.connector();
var connectorSeries = map.connector(data);
map.geoData(anychart.maps.world);

Далее мы установим метки и добавим стрелочки в конец линии каждого потока.

connectorSeries
  .labels()
  .enabled(true)
  .position('100%')
  .format(function () {
    return this.getData('to')
  });

connectorSeries
  .markers()
  .position('100%')
  .size(12);

Теперь нужно указать для нашей карты потоков заголовок.

map.title("Top 10 Destination Countries for Indian Students Studying Abroad");

Наконец, мы сошлёмся на ID контейнера, поместим карту в элемент container и отобразим его на странице с помощью функции draw().

map.container('container');
map.draw();

Этого должно быть достаточно, для отображения нашей карты потоков на веб-странице. Однако, поскольку мы работаем с картой мира, будет нелишним для удобства пользователей добавить возможность изменения масштаба.

И это совсем несложно – потребуется всего три дополнительные строчки кода.

var zoomController = anychart.ui.zoom();
zoomController.target(map);
zoomController.render();

Вот и всё! Наша базовая карта потоков готова.

Взгляните на её интерактивную версию и поиграйтесь с ней в песочнице AnyChart. Вот весь исходный код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Flow Map</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-map.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/geodata/custom/world/world.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css">
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css">
    <style type="text/css">      
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // Установка данных целевых стран.
        var data = [
          { points: [28.610198, 77.207584, -30.592659, 145.943667], to: "Australia", total: 100009 },
          { points: [28.610198, 77.207584, 45.411673, -75.69629], to: "Canada", total: 183310 },
          { points: [28.610198, 77.207584, 52.511693, 13.403121], to: "Germany", total: 34864 },
          { points: [28.610198, 77.207584, 23.5880, 58.3829], to: "Oman", total: 39550 },
          { points: [28.610198, 77.207584, 25.2854, 51.5310], to: "Qatar", total: 46000 },
          { points: [28.610198, 77.207584, 55.747362, 37.621273], to: "Russian Federation", total: 18039 },
          { points: [28.610198, 77.207584, 24.710437, 46.675164], to: "Saudi Arabia", total: 65800 },
          { points: [28.610198, 77.207584, 24.4539, 54.3773], to: "United Arab Emirates", total: 164000 },
          { points: [28.610198, 77.207584, 52.667078, -0.955920], to: "United Kingdom", total: 55465 },
          { points: [28.610198, 77.207584, 38.884053, -77.033513], to: "United States", total: 465791 },
        ]
        // Создание графика карты.
        var map = anychart.connector();
        // Добавление геоданных карты мира.
        map.geoData(anychart.maps.world);
        // Создание соединительных линий.
        var connectorSeries = map.connector(data);
        // Установка меток для соединительных линий.
        connectorSeries
          .labels()
          .enabled(true)
          .position('100%')
          .format(function () {
            return this.getData('to')
          });
        // Установка стрелочек в конце линий.
        connectorSeries
          .markers()
          .position('100%')
          .size(12);
        // Добавление возможности масштабирования.
        var zoomController = anychart.ui.zoom();
        zoomController.target(map);
        zoomController.render();
        // Установка названия карты.
        map.title('Top 10 Destination Countries for Indian Students Studying Abroad');
        // Установка контейнера.
        map.container('container');
        // Отрисовка карты.
        map.draw();
      });
    </script>
  </body>
</html>

Кастомизация

Отличная работа! Создавать простые интерактивные карты потоков с помощью JS действительно не так уж сложно. Теперь перейдём к следующим шагам, чтобы улучшить и персонализировать нашу карту, сделав её более информативной и привлекательной.

Далее мы внесём в код ряд простых изменений, чтобы добавить в карту дополнительные возможности и опции кастомизации. Таким образом, мы повысим интерес пользователей и преподнесём информацию более эффективно.

▍ A. Оптимизация кривых линий и позиций меток

В нашей карте потоков информация об учащихся в 10 странах индийских студентах представлена соединительными линиями. Однако при используемых нами данных предустановленные настройки ведут к наложению линий, и некоторые названия стран оказываются невидны, пока их не приблизишь.

Чтобы это исправить, можно изменить датасет, добавив в него свойство curvature, которое позволит скорректировать кривизну отдельных линий. Помимо этого, мы добавим свойство label и установим его значения, чтобы метки отображались в нужных точках карты.

var data = [
  { points: [28.610198, 77.207584, -30.592659, 145.943667], to: "Australia", total: 100009, curvature: 0.5 },
  { points: [28.610198, 77.207584, 45.411673, -75.69629], to: "Canada", total: 183310, curvature: 0.8, label: { offsetY: -30 } },
  { points: [28.610198, 77.207584, 52.511693, 13.403121], to: "Germany", total: 34864, curvature: 0.3, label: { anchor: 'center-top', offsetY: -2 } },
  { points: [28.610198, 77.207584, 23.5880, 58.3829], to: "Oman", total: 39550, curvature: -0.5, label: { anchor: 'left-top' } },
  { points: [28.610198, 77.207584, 25.2854, 51.5310], to: "Qatar", total: 46000, curvature: 0.4, label: { anchor: 'right-top', offsetY: -20 } },
  { points: [28.610198, 77.207584, 55.747362, 37.621273], to: "Russian Federation", total: 18039, curvature: 0.4, label: { anchor: 'left-bottom' } },
  { points: [28.610198, 77.207584, 24.710437, 46.675164], to: "Saudi Arabia", total: 65800, curvature: 0.7, label: { offsetY: -5 } },
  { points: [28.610198, 77.207584, 24.4539, 54.3773], to: "United Arab Emirates", total: 164000, curvature: 0, label: { anchor: 'left-top', offsetY: -15 } },
  { points: [28.610198, 77.207584, 52.667078, -0.955920], to: "United Kingdom", total: 55465, curvature: 0.4, label: { anchor: 'right-top', offsetY: -25, offsetX: -10 } },
  { points: [28.610198, 77.207584, 38.884053, -77.033513], to: "USA", total: 465791, curvature: -0.6 },
];

Благодаря этим изменениям, теперь можно отображать метки даже в случае их наложения. Реализовать это можно одной строкой кода.

map.overlapMode("allow-overlap");

▍ B. Доработка справочной информации

Сейчас в справке карты показывается широта и долгота, которые особого смысла не имеют. Чтобы повысить её информативность, мы отобразим более значимую информацию.

Один из вариантов – это показывать в справке название целевой страны и общее число студентов. Так, пользователи смогут легко понять представленную информацию и лучше сориентироваться на карте.

connectorSeries
  .tooltip()
  .useHtml(true)
  .format(function () {
    return (
      '<h5 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">To:<b> ' + this.getData('to') + '</b></h5>' +
      '<h5 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Total Students: <b>' + this.getData('total').toLocaleString() + '</b></h5>'
    );
  });

▍ C. Доработка заголовка

Чтобы повысить привлекательность заголовка нашей карты, можно выделить его при помощи HTML-стилизации, чтобы он был более заметен и привлекал внимание.

map.title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style="font-size:15px;font-weight:600;">Top 10 Destination Countries for Indian Students Studying Abroad</span><br/>' +
    '<span style="font-size: 14px;">The top destination is the U.S.</span>'
  );

▍ D. Выбор цветов для соединительных линий и маркеров

Для внесения некоторых эстетических изменений можно заменить базовый цвет линий градиентным, который будет плавно переходить от красного в жёлтый.

Для этого мы изменим создающий линии код, и применим к ним новый цвет с помощью функций fill() и stroke().

var connectorSeries = map.connector(data)
  .fill(['#e8dd09', 'red'])
  .stroke(['#e8dd09', 'red']);
connectorSeries
  .hovered()
  .stroke('#808080')
  .fill('#808080');
connectorSeries
  .hovered()
  .markers()
  .stroke('#808080')
  .fill('#808080');

После этого изменения карта будет выглядеть более привлекательной и интересной. Хотя если вам больше по нраву другие цвета, то можете поэкспериментировать с разными их комбинациями.

▍ E. Изменение цвета и толщины линий на основе данных

На заключительном этапе кастомизации мы сделаем соединительные линии более интересными, изменив их цвета и толщину на основе количества студентов, а также добавим легенду для лучшего понимания.

Для этого мы сначала сгруппируем страны в четыре категории, исходя из общего числа обучающихся в них студентов.

менее 50,000;
от 50,000 до 100,000;
от 100,000 до 200,000;
больше 200,000.

Мы также создадим filter_function(), которая будет фильтровать данные согласно этим категориям.

function filter_function(val1, val2) {
  if (val2)
    return function (fieldVal) {
      return val1 <= fieldVal && fieldVal < val2;
    };
    else
      return function (fieldVal) {
        return val1 <= fieldVal;
      };
}

Далее мы создадим функцию createSeries(), которая будет получать датасеты и конфигурации, создавая на их основе соединительные линии.

function createSeries(data, name, color, size) {

  // Создание соединительных линий.
  var connectorSeries = map.connector(data)
    .name(name)
    .fill(color)
    .stroke(color)
    .color(color);
  connectorSeries
    .hovered()
    .stroke('#808080')
    .fill('#808080');
  connectorSeries
    .hovered()
    .markers()
    .stroke('#808080')
    .fill('#808080');

  // Установка меток для линий.
  connectorSeries
    .labels()
    .enabled(true)
    .position('100%')
    .fontColor('#2D2D2D')
    .format(function () {
      return this.getData('to')
    });

  // Установка стрелочек в конце линий.
  connectorSeries
    .markers()
    .position('100%')
    .size(12);

  // Настройка справочной информации для линий.
  connectorSeries
    .tooltip()
    .useHtml(true)
    .format(function () {
      return (
        '<h5 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">To:<b> ' + this.getData('to') + '</b></h5>' +
        '<h5 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Total Students: <b>' + this.getData('total').toLocaleString() + '</b></h5>'
      );
    });

  // Установка толщины линии, исходя из количества студентов.
  connectorSeries
     .startSize(size[0])
     .endSize(size[1]);
}

Мы также создадим из наших данных датасет.

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

После чего отфильтруем его с помощью filter_function() и передадим в функцию createSeries() для создания набора линий.

createSeries(dataSet.filter('total', filter_function(0, 50000)), 'Less than 50,000', '#A149FA', [1, 0]);

createSeries(dataSet.filter('total', filter_function(50000, 100000)), '50,000 - 100,000', '#3B44F6', [2, 1]);

createSeries(dataSet.filter('total', filter_function(100000, 200000)), '100,000 - 200,000', '#3EC70B', [4, 1]);

createSeries(dataSet.filter('total', filter_function(200000, 500000)), 'More than 200,000', '#F7EC09', [6, 1]);

Наконец, мы добавим для нашей карты потоков легенду, которая поможет пользователям понять, что означают цвета и толщина соединительных линий.

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

map.legend().title().enabled(true).text('Number of Students').fontSize(13).padding([0, 0, 5, 0]);

Итак, цель достигнута! Мы создали прекрасную интерактивную карту потоков с помощью JS.

В результате мы видим, что цвета и толщина соединительных линий варьируются на основе количества студентов. Конечную интерактивную версию этой карты можно просмотреть в песочнице AnyChart. Вы также можете внести в код дополнительные изменения и поэкспериментировать с ним.

Вот весь код карты:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Flow Map</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-map.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/geodata/custom/world/world.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css">
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css">
    <style type="text/css">      
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
anychart.onDocumentReady(function () {
  // Установка данных для целевых стран.
  var data = [
    { points: [28.610198, 77.207584, -30.592659, 145.943667], to: "Australia", total: 100009, curvature: 0.5 },
    { points: [28.610198, 77.207584, 45.411673, -75.69629], to: "Canada", total: 183310, curvature: 0.8, label: {offsetY: -30} },
    { points: [28.610198, 77.207584, 52.511693, 13.403121], to: "Germany", total: 34864, curvature: 0.3, label: {anchor: 'center-top', offsetY: -2} },
    { points: [28.610198, 77.207584, 23.5880, 58.3829], to: "Oman", total: 39550, curvature: -0.5, label: {anchor: 'left-top'} },
    { points: [28.610198, 77.207584, 25.2854, 51.5310], to: "Qatar", total: 46000, curvature: 0.4, label: {anchor: 'right-top', offsetY: -20} },
    { points: [28.610198, 77.207584, 55.747362, 37.621273], to: "Russian Federation", total: 18039, curvature: 0.4, label: {anchor: 'left-bottom'} },
    { points: [28.610198, 77.207584, 24.710437, 46.675164], to: "Saudi Arabia", total: 65800, curvature: 0.7, label: {offsetY: -5} },
    { points: [28.610198, 77.207584, 24.4539, 54.3773], to: "United Arab Emirates", total: 164000, curvature: 0, label: {anchor: 'left-top', offsetY: -15} },
    { points: [28.610198, 77.207584, 52.667078, -0.955920], to: "United Kingdom", total: 55465, curvature: 0.4, label: {anchor: 'right-top', offsetY: -25, offsetX: -10} },
    { points: [28.610198, 77.207584, 38.884053, -77.033513], to: "USA", total: 465791, curvature: -0.6 },
  ]
  // Создание графика карты.
  var map = anychart.connector();
  // Создание датасета из данных.
  var dataSet = anychart.data.set(data).mapAs();
  // Добавление геоданных карты мира.
  map.geoData(anychart.maps.world);
  // Создание 4 наборов и фильтрация данных по количеству студентов
  createSeries(dataSet.filter('total', filter_function(0, 50000)), 'Less than 50,000', '#A149FA', [1, 0]);
  createSeries(dataSet.filter('total', filter_function(50000, 100000)), '50,000 - 100,000', '#3B44F6', [2, 1]);
  createSeries(dataSet.filter('total', filter_function(100000, 200000)), '100,000 - 200,000', '#3EC70B', [4, 1]);
  createSeries(dataSet.filter('total', filter_function(200000, 500000)), 'More than 200,000', '#F7EC09', [6, 1]);
  // Функция для создания и настройки наборов.
  function createSeries(data, name, color, size) {
    // Создание соединительных линий.
    var connectorSeries = map.connector(data)
      .name(name)
      .fill(color)
      .stroke(color)
      .color(color);
    connectorSeries
      .hovered()
      .stroke('#808080')
      .fill('#808080');
    connectorSeries
      .hovered()
      .markers()
      .stroke('#808080')
      .fill('#808080');
    // Установка меток для линий.
    connectorSeries
      .labels()
      .enabled(true)
      .position('100%')
      .fontColor('#2D2D2D')
      .format(function () {
        return this.getData('to')
      });
    // Установка стрелочек в конце линий.
    connectorSeries
      .markers()
      .position('100%')
      .size(12);
    // Указание справочной информации для наборов.
    connectorSeries
      .tooltip()
      .useHtml(true)
      .format(function () {
        return (
          '<h5 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">To:<b> ' + this.getData('to') + '</b></h5>' +
          '<h5 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Total Students: <b>' + this.getData('total').toLocaleString() + '</b></h5>'
          );
      });
    // Установка толщины соединительной линии, исходя из количества студентов.
    connectorSeries
      .startSize(size[0])
      .endSize(size[1]);
  }
  // Добавление возможности масштабирования.
  var zoomController = anychart.ui.zoom();
  zoomController.target(map);
  zoomController.render();
  // Отображение всех меток, даже в случае наложения.
  map.overlapMode("allow-overlap");
  // Установка названия карты.
  map.title()
    .enabled(true)
    .useHtml(true)
    .text(
      '<span style="font-size:15px;font-weight:600;">Top 10 Destination Countries for Indian Students Studying Abroad</span><br/>' +
      '<span style="font-size: 14px;">The top destination is the U.S.</span>'
    );
  // Добавление легенды.
  map.legend().enabled(true).position('bottom').padding([20, 0, 0, 0]).fontSize(10);
  map.legend().title().enabled(true).text('Number of Students').fontSize(13).padding([0, 0, 5, 0]);
  // Установка контейнера.
  map.container('container');
  // Отрисовка карты.
  map.draw();
});
// Функция фильтрации данных.
function filter_function(val1, val2) {
  if (val2)
    return function (fieldVal) {
      return val1 <= fieldVal && fieldVal < val2;
    };
  else
    return function (fieldVal) {
      return val1 <= fieldVal;
    };
}
    </script>
  </body>
</html>

Заключение

Создавать карты потоков с помощью JavaScript легко и интересно. Рекомендую ознакомиться с другими примерами карт и соединительных линий, из которых вы сможете почерпнуть идеи для собственной карты.

Успехов!

Telegram-канал с розыгрышами призов, новостями IT и постами о ретроиграх ????️