Визуализация данных о COVID-19 в Италии, 31 января - 9 июня

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

Чтобы продемонстрировать этот способ, которым довольно просто овладеть, даже если у вас есть только базовые навыки кодирования HTML, я собираюсь визуализировать официальные данные о вспышке пандемии COVID-19 в Италии. Визуализации, построенные в рамках учебного пособия, покажут, как менялось количество случаев заболевания, выздоровления и смертей - с 31 января, когда были подтверждены первые два случая, до вчерашнего дня, 9 июня, когда общее количество случаев коронавируса в Италии достигло 235 561.

4 шага к построению диаграмм JS с накоплением областей

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

  1. Создайте HTML-страницу для диаграммы.
  2. Добавьте необходимые файлы JavaScript.
  3. Установите данные.
  4. Напишите код JS для диаграммы.

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

А теперь приступим к делу!

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

Начните с создания базовой HTML-страницы. Эта страница должна содержать следующее:

  1. Соответствующее название.
  2. Элемент блока HTML (например, <div>), в котором будет храниться ваша диаграмма.
  3. Атрибут id для <div> (например, "контейнер").

Обратите внимание, что вы также можете добавить правила CSS в блок <style>, чтобы изменить пространство, которое будет занимать диаграмма с областями с накоплением. Если вы хотите, чтобы графика заполняла всю страницу, используйте 100% для параметров width и height.

HTML-страница должна выглядеть так:

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="container"></div>
</body>
</html>

Шаг 2. Добавьте необходимые файлы JavaScript

Теперь вы должны указать все необходимые файлы JS в разделе <head>.

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

Для этого урока по построению графиков я включу соответствующие ссылки CDN. При желании вы можете скачать скрипты локально.

Библиотека AnyChart JavaScript имеет модульную систему, которая помогает оптимизировать размер JS-кода, выполняемого на веб-странице. Чтобы с его помощью сделать диаграмму с областями с накоплением, добавьте два модуля: Core и Basic Cartesian. Первый - это базовый модуль AnyChart, необходимый для использования любого другого модуля. Второй модуль поддерживает все декартовы карты.

Вот HTML-код того, что у нас есть:

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    // The stacked area chart's JS code will be written here.
  </script>
</body>
</html>

Шаг 3. Добавьте данные для визуализации

Загрузите данные

Пандемия COVID-19 - самая популярная тема новостей во всем мире. В этом уроке я решил сосредоточиться на Италии, первом регионе за пределами Китая, который сильно пострадал от этого кризиса. Я визуализирую данные с количеством активных случаев заболевания, выздоровления и смертей, чтобы увидеть, как развивалась ситуация с начала вспышки в Италии до настоящего времени.

Я взял данные из набора данных CSSE Johns Hopkins, который считается надежным источником официальной статистики COVID-19. Для простоты я поместил итальянские данные в один CSV-файл, который вы можете найти здесь. Активные случаи были подсчитаны путем вычитания случаев смерти и выздоровления из подтвержденных случаев.

Загрузить CSV-файл в AnyChart можно с помощью модуля Адаптер данных, на который вы должны ссылаться в разделе <head> в дополнение к скриптам библиотеки, которые там уже упоминаются:

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    // The stacked area chart's JS code will be written here.
  </script>
</body>
</html>

Теперь вы можете использовать метод loadCsvFile, предоставляемый адаптером данных, для загрузки данных CSV.

anychart.data.loadCsvFile ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
});

Затем настройте данные, чтобы они были готовы к использованию в вашей будущей диаграмме с областями с накоплением на основе JavaScript:

anychart.data.loadCsvFile ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
  // set the data and ignore the first row that contains headers
  var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
});

Сопоставьте данные

На диаграмме будут отображаться данные из трех полей: активных случаев, выздоровления и смертей. Таким образом, вам понадобятся три разных ряда данных, по одной для каждого поля. Но как вы «проинформируете» свою диаграмму, какие данные использовать для каждого поля?

Вот где в игру вступает отображение данных! Посмотрите, как это реализовано в коде, через вызов метода mapAs:

// map data for the deaths series
var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });

Шаг 4. Напишите код JS для диаграммы

Теперь, когда все, кажется, на месте, вы готовы приступить к написанию кода визуализации диаграммы с областями с накоплением JS.

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

<script>
anychart.onDocumentReady(function () {
  // The stacked area chart's code will be written here.
});
</script>

Затем добавьте данные из шага 3:

<script>
anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
  });
});
</script>

Затем укажите тип диаграммы, установите серию и заставьте диаграмму складывать значения по шкале Y:

// specify the area chart type
var chart = anychart.area();
// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
// force the chart to stack values by the y scale
chart.yScale().stackMode('value');

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

// set the chart title
chart.title('Covid-19 in Italy');
// set the labels of the axes
chart.xAxis().title("Date");
chart.yAxis().title("Number of people");

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

// turn on the crosshair
var crosshair = chart.crosshair();
crosshair.enabled(true)
  .yStroke(null)
  .xStroke('#fff')
  .zIndex(39);
crosshair.yLabel().enabled(false);

Наконец, нарисуйте диаграмму, поместив ее в контейнер и используя команду рисования.

// set the container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();

Наслаждайтесь результатом:

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

Для вашего удобства полный код приведен ниже. Не стесняйтесь поиграть с этой базовой диаграммой JS с областями с накоплением на AnyChart Playground.

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) { 
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
// map data for the deaths series
    var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
    var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
    var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });
// specify the chart type
    var chart = anychart.area();
// create a series with the mapped active data
    var actSeries = chart.splineArea(activeData);
// create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData);
// create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData);
// force the chart to stack values by the y scale
    chart.yScale().stackMode('value');
// set the chart title
    chart.title('Covid-19 in Italy');
// set the labels of the axes
    chart.xAxis().title("Date");
    chart.yAxis().title("Number of people");
// turn on the crosshair
    var crosshair = chart.crosshair();
    crosshair.enabled(true)
      .yStroke(null)
      .xStroke('#fff')
      .zIndex(39);
    crosshair.yLabel().enabled(false);
// set the container id for the chart
    chart.container('container');
// initiate chart drawing
    chart.draw();
  });
});
</script>
</body>
</html>

Настройка диаграммы с накоплением в JavaScript

Весьма вероятно, что разные люди предпочитают разные функциональные возможности и эстетику своих диаграмм, не говоря уже о разных задачах, которые вы можете выполнять как веб-разработчик или дизайнер визуализации данных. К счастью, диаграммы JS на базе AnyChart можно легко изменить в соответствии с вашими потребностями и предпочтениями. Я покажу вам, как выполнить несколько быстрых настроек прямо сейчас:

  1. Добавьте легенду и анимацию.
  2. Измените значения на проценты.
  3. Настройте всплывающую подсказку, маркеры и метки.
  4. Меняйте цвета.

Добавьте легенду и анимацию

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

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

chart.legend(true);

Я также хотел бы придать этой диаграмме немного вау-эффекта, добавив анимации. Вы можете быстро сделать это, добавив короткую строку в код JavaScript диаграммы:

chart.animation(true);

Посмотрите на результат, и вы сможете найти эту JS-диаграмму с областью накопления с легендой и анимацией на AnyChart Playground:

Измените значения на проценты

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

Это очень просто. Чтобы сделать JavaScript (HTML5) диаграмму с областями с накоплением процентов, визуализирующую те же данные, просто замените значение на проценты:

// change the stacking mode to percent
chart.yScale().stackMode('percent');

Эта JS-диаграмма с областями с накоплением в процентах доступна на AnyChart Playground.

Настроить всплывающую подсказку, маркеры и метки

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

// helper function to setup tooltip labels for all series and style markers
var setupSeriesLabels = function (series, name) {
  series.name(name)
};

Используйте эту функцию прямо там, где я настраиваю серию, и добавляю соответствующие заголовки:

// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
setupSeriesLabels(actSeries, 'Active');
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
setupSeriesLabels(recSeries, 'Recovered');
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
setupSeriesLabels(deathsSeries, 'Deaths');

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

Вот код:

// helper function to setup series and give them appropriate names in order to distinguish and label them properly
var setupSeries = function (series, name) {
  series.name(name)
  // setting the markers
  series.hovered().stroke('3 #fff 1');
  series.hovered().markers()
    .enabled(true)
    .type('circle')
    .size(4)
    .stroke('1.5 #fff');
  series.markers().zIndex(100);
};

Результат диаграммы после этих изменений будет следующим:

Приглашаем вас открыть эту настроенную диаграмму JS с областями с накоплением процентов на AnyChart Playground.

Изменить цвета

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

Вот код:

// create a series with the mapped active series
var actSeries = chart.splineArea(activeData)
.fill("#1E8FCD")
.stroke("#4b9bc6")
setupSeries(actSeries, 'Active');
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData)
.fill("#B3C67D")
.stroke("#b9c1a0")
setupSeries(recSeries, 'Recovered');
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData)
.fill("#b3315d")
.stroke("#b5617d")
setupSeries(deathsSeries, 'Deaths');

Взгляните на окончательную интерактивную диаграмму с областями с накоплением в процентах JavaScript, которую я показал в формате GIF в самом начале:

Вы можете найти весь код этой визуализации данных ниже и итоговую диаграмму с областями с накоплением процентов JS на AnyChart Playground:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
    <script>
anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
// map data for the deaths series
    var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
    var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
    var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });
// specify the area chart type
    var chart = anychart.area();
// helper function to setup series and give them appropriate names in order to distinguish and label them properly
    var setupSeries = function (series, name) {
      series.name(name)
      // setting the markers
      series.hovered().stroke('3 #fff 1');
      series.hovered().markers()
        .enabled(true)
        .type('circle')
        .size(4)
        .stroke('1.5 #fff');
      series.markers().zIndex(100);
    };
// create a series with the mapped active data
    var actSeries = chart.splineArea(activeData)
    .fill("#1E8FCD")
    .stroke("#4b9bc6")
    setupSeries(actSeries, 'Active');
// create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData)
    .fill("#B3C67D")
    .stroke("#b9c1a0")
    setupSeries(recSeries, 'Recovered');
// create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData)
    .fill("#b3315d")
    .stroke("#b5617d")
    setupSeries(deathsSeries, 'Deaths');
    
    // force the chart to stack values by the y scale
    chart.yScale().stackMode('percent');
// set the chart title
    chart.title('Covid-19 in Italy');
// set the labels of the axes
    chart.xAxis().title("Date");
    chart.yAxis().title("Number of people");
// turn on the crosshair
    var crosshair = chart.crosshair();
    crosshair.enabled(true)
      .yStroke(null)
      .xStroke('#fff')
      .zIndex(39);
    crosshair.yLabel().enabled(false);
// turn on the legend
    chart.legend(true);
// turn on the chart animation
    chart.animation(true);
// set the container id for the chart
    chart.container('container');
// initiate chart drawing
    chart.draw();
  });
});
</script>
</body>
</html>

Заключение

Поздравляю! Вы только что создали свои первые диаграммы с областями с накоплением на JavaScript! Процесс не так уж и сложен, правда?

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

См. также: Как создать диаграмму областей JavaScript

Первоначально опубликовано на https://www.anychart.com 10 июня 2020 г.