Визуализация мирового счастья

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

Еще более выгодно сделать еще один шаг вперед в визуализации данных, добавив интерактивности. Добавляя интерактивные элементы в свои визуализации, вы создаете более увлекательный опыт. Это, в свою очередь, заставляет пользователя «исследовать» визуализации, а не просто читать их!

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

Что такое коробчатый сюжет?

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

Коробчатые диаграммы отображают следующую сводную статистику: медиана, первый и третий квартили (Q1 и Q3), минимум и высокий, а также выбросы. Они отображаются следующим образом:

Создание блочной диаграммы JavaScript

Существует несколько вариантов построения интерактивной визуализации данных. Если вы хотите узнать об альтернативах JavaScript, загляните здесь. В этом примере я буду использовать библиотеку диаграмм JS и, в частности, AnyChart. Я выберу AnyChart, так как он поддерживает графики в виде прямоугольников (среди множества других типов диаграмм), и я думаю, что его документация и API действительно хороши как для начинающих, так и для продвинутых пользователей, но альтернативы, которые лучше подходят для вашего потребности тоже могут сработать, и мы сделаем аналогичные шаги.

Шаг 1. Настройте страницу

Первым шагом является настройка страницы для визуализации коробчатой ​​диаграммы. Это включает добавление элементов HTML, загрузку необходимых скриптов и настройку CSS для нашей диаграммы. Что выглядит так:

<html>
  <head>
    <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.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>
  </body>
  <script>
    anychart.onDocumentReady(function () {
      // code goes here.
    });
  </script>
</html>

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

Как только это будет отсортировано, мне нужно будет установить свойства CSS для моего элемента диаграммы. Здесь я установил для прямоугольной диаграммы ширину и высоту 100%. Вы можете изменить это в зависимости от вашего собственного варианта использования. Свойства ширины и высоты CSS принимают проценты (от родительского элемента) и различные единицы длины (чаще всего пиксели).

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

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

Я буду использовать данные из World Happiness Report, который представляет собой результаты глобального опроса, в котором предпринимается попытка количественно оценить счастье граждан каждой страны до значения от 0 до 10. Я получил эти данные из Kaggle, отличного место для поиска забавных и интересных наборов данных. По общему признанию, большинство из них ориентировано на приложения машинного обучения, но некоторые хорошо работают для целей визуализации данных.

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

{x:"Name", low: value, q1: value, median: value, q3: value, high: value, outliers: array}

Где x - метка, q1 и q3 - значения первого и третьего квартилей, low и high - 1,5 x межквартильный размах ниже q1 и 1,5 x межквартильный размах выше q3 соответственно, а выбросы - это массив, содержащий все значения выбросов .

Я предварительно обработал данные из отчета о мировом счастье, чтобы получить следующий массив:

var data = [
  {x:"Western Europe", low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},
  {x:"North America", low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},
  {x:"Australia and New Zealand", low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},
  {x:"Middle East and Northern Africa", low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},
  {x:"Latin America and Caribbean", low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},
  {x:"Southeastern Asia", low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},
  {x:"Central and Eastern Europe", low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},
  {x:"Eastern Asia", low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},
  {x:"Sub-Saharan Africa", low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},
  {x:"Southern Asia", low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}
]

Шаг 3. Нарисуйте прямоугольную диаграмму

Всего с помощью этих нескольких строк кода я могу нарисовать ящичные диаграммы:

// create a chart
chart = anychart.box();
// create a box series and set the data
series = chart.box(data);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();

И сложив все это вместе, вы получите следующее:

<html>
  <head>
    <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.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>
  </body>
  <script>
    anychart.onDocumentReady(function () {
      var data = [
        {x:"Western Europe", low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},
        {x:"North America", low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},
        {x:"Australia and New Zealand", low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},
        {x:"Middle East and Northern Africa", low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},
        {x:"Latin America and Caribbean", low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},
        {x:"Southeastern Asia", low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},
        {x:"Central and Eastern Europe", low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},
        {x:"Eastern Asia", low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},
        {x:"Sub-Saharan Africa", low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},
        {x:"Southern Asia", low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}
      ]
      // create a chart
      chart = anychart.box();
      // create a box series and set the data
      series = chart.box(data);
      // set the container id
      chart.container("container");
      // initiate drawing the chart
      chart.draw();
    });
  </script>
</html>

Что приводит к:

Ссылка на CodePen
Ссылка на площадку

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

Хотя неплохо, но думаю, что смогу лучше. Просто продолжай читать.

Шаг 4. Настройте график "ящик и усы"

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

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

Настроить дизайн диаграммы

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

// set the chart title
var title = chart.title("Happiness Level by Region");
// label axis
chart.xAxis().title("Regions");
chart.yAxis().title("Happiness Level");
// stagger the x-axis labels
chart.xAxis().staggerMode(true);

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

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

Эти изменения можно легко внести с помощью следующего кода:

// configure visual appearance of series
series.normal().fill("#36558F", 0.2);
series.hovered().fill("#36558F", 0.2);
series.selected().fill("#36558F", 0.6);
series.normal().stroke("#36558F", 1);
series.hovered().stroke("#36558F", 2);
series.selected().stroke("#36558F", 4);
// configure medians
series.normal().medianStroke("#dd2c00", 1);
series.hovered().medianStroke("#dd2c00", 2);
series.selected().medianStroke("#dd2c00", 2);
// configure outliers
series.normal().outlierMarkers({
  fill: "#36558F 0.2",
  stroke: { color: "#36558F", thickness: 1 },
  size: 5,
  type: "star5",
});
series.hovered().outlierMarkers({
  fill: "#36558F 0.2",
  stroke: { color: "#36558F", thickness: 2 },
  size: 5,
  type: "star5",
});
series.selected().outlierMarkers({
  fill: "#36558F 0.6",
  stroke: { color: "#36558F", thickness: 4 },
  size: 7.5,
  type: "star5",
});
// configure stems
series.normal().stemStroke("#36558F", 0.5);
series.hovered().stemStroke("#36558F", 1);
series.selected().stemStroke("#36558F", 2);
// configure whiskers
series.whiskerWidth(50);
series.normal().whiskerStroke("#36558F", 0.5);
series.hovered().whiskerStroke("#36558F", 1);
series.selected().whiskerStroke("#36558F", 2);

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

Включение всего этого приводит к:

Ссылка на CodePen
Ссылка на площадку

Улучшение всплывающей подсказки для блочной диаграммы

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

// configure tooltip
chart.tooltip().titleFormat("Region: {%x}")
chart.tooltip().format("Low: {%low} \n High: {%high} \n Quantile 1: {%q1} \n Quantile 3: {%q3} \n Median: {%median} \n Outliers: {%outliers}");

И если вы добавите это к предыдущему коду, вы получите следующую интерактивную диаграмму с квадратами и усами:

Ссылка на CodePen
Ссылка на площадку

Потрясающие! Мы только что визуализировали счастье (что-то вроде)! Из приведенного выше сюжета я ясно вижу, что Африка к югу от Сахары - не самое счастливое место, в то время как западные европейцы и североамериканцы много улыбаются, а самым счастливым местом, безусловно, является Австралия и Новая Зеландия!

* Я из Африки к югу от Сахары и не слишком уверен в этих результатах из моего анекдотического опыта!

Заключение

Как видите, сделать интерактивную визуализацию данных очень просто. Для начала не требуется много знаний JavaScript (в зависимости от библиотеки диаграмм, которую вы используете), и результаты отличные! Здесь я создал коробчатую диаграмму, но процесс очень похож на другие типы диаграмм, и, проконсультировавшись с документацией, ее можно очень легко изменить.

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

Опубликовано с разрешения Wayde Herman. Первоначально опубликовано в На пути к науке о данных под заголовком Построение коробчатых диаграмм с помощью JavaScript: визуализация мирового счастья 4 сентября 2020 г.

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