Как создать диаграмму Санки в JS (Выжившие на Титанике)

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

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

Спустя 110 лет после того, как он затонул 15 апреля 1912 года, «Титаник» все еще держит нас в своем плену, будоража воображение людей. Сейчас мы воспользуемся методом построения диаграмм JS Sankey, чтобы посмотреть на его пассажиров и экипаж и выяснить, кто выжил, а кто погиб в зависимости от пола, возраста и класса билетов. Следите за нами!

Предварительный просмотр диаграммы Санки

Взгляните на диаграмму Sankey, которую мы построим к концу урока:

Теперь путешествие начинается — читайте дальше, чтобы узнать, как строить подобные диаграммы Санки, используя чистый JavaScript!

Построение базовой диаграммы Санки на JS

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

Процесс создания диаграммы Санки на основе JavaScript можно разделить на четыре этапа:

  1. Создайте HTML-страницу.
  2. Добавить скрипты.
  3. Задайте данные.
  4. Написать JS-код.

Давайте пройдемся по ним вместе.

1. Создайте HTML-страницу

Для начала создайте базовую HTML-страницу для размещения предполагаемого графика Sankey и определите в ней блочный элемент.

Чтобы ссылаться на этот <div> в дальнейшем в коде, задайте ему идентификационный атрибут («container» в данном примере) и установите нужные свойства стиля (здесь ширина и высота равны 100%, что позволит диаграмме растянуться на всю веб-страницу).

<html>
  <head>
    <title>JavaScript Sankey Diagram</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. Добавьте скрипты

Следующим шагом будет добавление необходимых скриптов.

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

AnyChart является модульной, что позволяет вам минимизировать размер кода JavaScript, выполняемого на вашей веб-странице, подключая те типы диаграмм и функции, которые вам действительно нужны, и ничего более. Для разработки диаграммы Sankey вам нужен только основной модуль и специальный модуль Sankey. Добавьте оба модуля в раздел <head> HTML-страницы.

<html>
  <head>
    <title>JavaScript Sankey Diagram</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-sankey.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Sankey Diagram will come here.
    </script>
  </body>
</html>
Вход в полноэкранный режим Выйдите из полноэкранного режима

3. Установите данные

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

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

const data = [
  {from: 'First Class', to: 'Child', value: 6},
  {from: 'Second Class', to: 'Child', value: 24},
  {from: 'Third Class', to: 'Child', value: 79},
  {from: 'Crew', to: 'Child', value: 0},
  {from: 'First Class', to: 'Adult', value: 319},
  {from: 'Second Class', to: 'Adult', value: 261},
  {from: 'Third Class', to: 'Adult', value: 627},
  {from: 'Crew', to: 'Adult', value: 885},
  {from: 'Child', to: 'Female', value: 45},
  {from: 'Child', to: 'Male', value: 64},
  {from: 'Adult', to: 'Female', value: 425},
  {from: 'Adult', to: 'Male', value: 1667},
  {from: 'Female', to: 'Survived', value: 344},
  {from: 'Female', to: 'Perished', value: 126},
  {from: 'Male', to: 'Survived', value: 367},
  {from: 'Male', to: 'Perished', value: 1364},
]
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все, все на борту, и теперь пора отправляться в плавание, написав несколько строк кода JS-графика!

4. Напишите немного JS-кода

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

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

anychart.onDocumentReady(function () {

  // add data
  const data = [
    {from: 'First Class', to: 'Child', value: 6},
    {from: 'Second Class', to: 'Child', value: 24},
    {from: 'Third Class', to: 'Child', value: 79},
    {from: 'Crew', to: 'Child', value: 0},
    {from: 'First Class', to: 'Adult', value: 319},
    {from: 'Second Class', to: 'Adult', value: 261},
    {from: 'Third Class', to: 'Adult', value: 627},
    {from: 'Crew', to: 'Adult', value: 885},
    {from: 'Child', to: 'Female', value: 45},
    {from: 'Child', to: 'Male', value: 64},
    {from: 'Adult', to: 'Female', value: 425},
    {from: 'Adult', to: 'Male', value: 1667},
    {from: 'Female', to: 'Survived', value: 344},
    {from: 'Female', to: 'Perished', value: 126},
    {from: 'Male', to: 'Survived', value: 367},
    {from: 'Male', to: 'Perished', value: 1364},
  ]

  // everything else goes here

});
Вход в полноэкранный режим Выход из полноэкранного режима

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

let chart = anychart.sankey();
chart.data(data);
Войти в полноэкранный режим Выход из полноэкранного режима

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

chart.padding(20, 40);  
chart.title('Titanic Survivors');
Вход в полноэкранный режим Выход из полноэкранного режима

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

chart.container('container');
chart.draw();
Войти в полноэкранный режим Выйти из полноэкранного режима

Вуаля! Фантастическая и функциональная диаграмма Санки на основе JavaScript готова!

Посмотрите на эту начальную JS-диаграмму Санки на AnyChart Playground с полным кодом JS/CSS/HTML (также представленным ниже для вашего удобства).

<html>
  <head>
    <title>JavaScript Sankey Diagram</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-sankey.min.js"></script>
    <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 () {

        // add data
        const data = [
          {from: "First Class", to: "Child", value: 6},
          {from: "Second Class", to: "Child", value: 24},
          {from: "Third Class", to: "Child", value: 79},
          {from: "Crew", to: "Child", value: 0},
          {from: "First Class", to: "Adult", value: 319},
          {from: "Second Class", to: "Adult", value: 261},
          {from: "Third Class", to: "Adult", value: 627},
          {from: "Crew", to: "Adult", value: 885},
          {from: "Child", to: "Female", value: 45},
          {from: "Child", to: "Male", value: 64},
          {from: "Adult", to: "Female", value: 425},
          {from: "Adult", to: "Male", value: 1667},
          {from: "Female", to: "Survived", value: 344},
          {from: "Female", to: "Perished", value: 126},
          {from: "Male", to: "Survived", value: 367},
          {from: "Male", to: "Perished", value: 1364}
        ];

        // create a sankey diagram instance
        let chart = anychart.sankey();

        // load the data to the sankey diagram instance
        chart.data(data);

        // set the chart's padding
        chart.padding(20, 40);

        // add a title
        chart.title('Titanic Survivors');

        // set the chart container id
        chart.container("container");

        // draw the chart
        chart.draw();

      });
    </script>
  </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима

Настройка диаграммы JavaScript Sankey

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

  1. Цветовая палитра
  2. Узлы
  3. Ссылки
  4. Название

О ТОМ, КАК НАСТРОИТЬ ДИАГРАММУ САНКИ НА JS, ЧИТАЙТЕ ЗДЕСЬ.

ДРУГИЕ УЧЕБНИКИ ПО ПОСТРОЕНИЮ ДИАГРАММ НА JAVASCRIPT ДОСТУПНЫ ЗДЕСЬ.

Оцените статью
Procodings.ru
Добавить комментарий