Создание диаграммы Бокса и Уискера (JS)

Комментарии

Превратите свои данные в выводы с помощью потрясающего графика box-and-whisker! Узнайте, что это такое и как легко создать такую диаграмму с помощью JavaScript. В этом уроке я проведу вас через шаги по созданию аккуратной и визуально привлекательной коробочной диаграммы на основе JS (HTML5) с годовыми валовыми зарплатами различных ИТ-профессий в Европе. Откройте силу визуализации данных и начните быстро выявлять тенденции и закономерности уже сегодня!

Что такое диаграмма бокса и вискера?

Диаграмма box-and-whisker, или просто box plot или box plot, - это тип графического представления, обычно используемый в статистическом анализе для отображения распределения набора данных. График состоит из прямоугольного поля, простирающегося от первого квартиля до третьего квартиля (также известного как межквартильный размах, или IQR), с горизонтальной линией внутри, представляющей медиану.

В дополнение к коробке от нее могут отходить линии (называемые ”усами”), указывающие на изменчивость за пределами верхнего и нижнего квартилей. Эти “усы” могут представлять различные вещи в зависимости от контекста, например, максимальное и минимальное значения в определенном диапазоне или кратное стандартное отклонение.

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

Построение диаграммы квадратов и усов

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

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

Базовый график бокса и вискера

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

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

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

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

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

Начнем с того, что зададим название веб-страницы “JavaScript Box-and-Whisker Plot”. Затем мы включим несколько строк CSS-кода в тег style, чтобы установить margin и padding на 0; и сделать высоту и ширину веб-страницы 100%. Это обеспечит правильное отображение графика на веб-странице.

Наконец, мы добавим тег div с идентификатором “container”. Позже мы будем использовать этот div для размещения квадратного графика.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Box-and-Whisker Plot</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 следующим шагом будет включение необходимых файлов JavaScript. Мы должны включить ссылку на библиотеку диаграмм JavaScript в раздел head нашей HTML-страницы.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Box-and-Whisker Plot</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-cartesian.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 Box-and-Whisker Plot will come here
    </script>
  </body>
</html>

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

Мы будем использовать данные о годовой брутто-зарплате для различных профессий в Европе, взятые из обзора IT Salary Survey для региона ЕС (2018-2020), доступного на Kaggle.

После очистки данных для удаления дубликатов и некорректно оформленных или вводящих в заблуждение данных я выбрал только профессии с достаточным количеством данных и рассчитал их средние значения. Затем я выбрал 8 лучших ИТ-профессий для нашей визуализации в виде бокса и вискера.

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

var data = [
  {
    x: 'Backend Developer',
    low: 35000,
    q1: 60000,
    median: 70000,
    q3: 80000,
    high: 110000,
    outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]
  },
  {
    x: 'Data Engineer',
    low: 40000,
    q1: 54000,
    median: 68000,
    q3: 84000,
    high: 110000,
    outliers: [200000]
  },
  {
    x: 'DevOps',
    low: 52500,
    q1: 65000,
    median: 72000,
    q3: 82500,
    high: 105000,
    outliers: [30000, 37000, 124000, 140000]
  },
  {
    x: 'Engineering Manager',
    low: 78000,
    q1: 80000,
    median: 85000,
    q3: 95750,
    high: 105000
  },
  {
    x: 'ML Engineer',
    low: 11500,
    q1: 52500,
    median: 65000,
    q3: 81000,
    high: 120000,
    outliers: [180000]
  },
  {
    x: 'Mobile Developer',
    low: 40000,
    q1: 61250,
    median: 66000,
    q3: 77000,
    high: 85000,
    outliers: [240000]
  },
  {
    x: 'Product Manager',
    low: 30000,
    q1: 60000,
    median: 70000,
    q3: 85000,
    high: 120000,
    outliers: [150000]
  },
  {
    x: 'Software Engineer',
    low: 28800,
    q1: 60000,
    median: 72000,
    q3: 81000,
    high: 110000,
    outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
  }
];

4. Добавьте код JavaScript

Наконец, давайте напишем немного кода JavaScript, чтобы запустить наш график.

Мы включим функцию onDocumentReady() библиотеки построения графиков и заключим в нее наш код, чтобы обеспечить представление данных на экране после полной загрузки веб-страницы HTML.

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

Сначала мы добавим наши данные из Шага 3.

anychart.onDocumentReady(function () {
  var data = [
    {
      x: 'Backend Developer',
      low: 35000,
      q1: 60000,
      median: 70000,
      q3: 80000,
      high: 110000,
      outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]
    },
    {
      x: 'Data Engineer',
      low: 40000,
      q1: 54000,
      median: 68000,
      q3: 84000,
      high: 110000,
      outliers: [200000]
    },
    {
      x: 'DevOps',
      low: 52500,
      q1: 65000,
      median: 72000,
      q3: 82500,
      high: 105000,
      outliers: [30000, 37000, 124000, 140000]
    },
    {
      x: 'Engineering Manager',
      low: 78000,
      q1: 80000,
      median: 85000,
      q3: 95750,
      high: 105000
    },
    {
      x: 'ML Engineer',
      low: 11500,
      q1: 52500,
      median: 65000,
      q3: 81000,
      high: 120000,
      outliers: [180000]
    },
    {
      x: 'Mobile Developer',
      low: 40000,
      q1: 61250,
      median: 66000,
      q3: 77000,
      high: 85000,
      outliers: [240000]
    },
    {
      x: 'Product Manager',
      low: 30000,
      q1: 60000,
      median: 70000,
      q3: 85000,
      high: 120000,
      outliers: [150000]
    },
    {
      x: 'Software Engineer',
      low: 28800,
      q1: 60000,
      median: 72000,
      q3: 81000,
      high: 110000,
      outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
    }
];

Далее мы создаем наш график box-and-whisker, указывая тип графика как “box”. Мы создаем серию box и передаем в нее наши данные.

var chart = anychart.box()
var series = chart.box(data);

После этого мы добавляем заголовок графика и устанавливаем контейнер, ссылающийся на элемент div, которому мы присвоили id “container” в шаге 1.

chart.title('Yearly Gross Salary for Different IT Professions in Europe');
chart.container('container');

Наконец, мы рисуем график с помощью функции draw().

chart.draw();

Вот как выглядит базовый интерактивный JS box-and-whisker plot! Полный код веб-страницы HTML приведен ниже. Вы также можете найти интерактивную версию этого графика на AnyChart Playground.

Базовый интерактивный JS box-and-whisker график

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Box-and-Whisker Plot</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-cartesian.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 () {
        var data = [
          {
            x: 'Backend Developer',
            low: 35000,
            q1: 60000,
            median: 70000,
            q3: 80000,
            high: 110000,
            outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]
          },
          {
            x: 'Data Engineer',
            low: 40000,
            q1: 54000,
            median: 68000,
            q3: 84000,
            high: 110000,
            outliers: [200000]
          },
          {
            x: 'DevOps',
            low: 52500,
            q1: 65000,
            median: 72000,
            q3: 82500,
            high: 105000,
            outliers: [30000, 37000, 124000, 140000]
          },
          {
            x: 'Engineering Manager',
            low: 78000,
            q1: 80000,
            median: 85000,
            q3: 95750,
            high: 105000
          },
          {
            x: 'ML Engineer',
            low: 11500,
            q1: 52500,
            median: 65000,
            q3: 81000,
            high: 120000,
            outliers: [180000]
          },
          {
            x: 'Mobile Developer',
            low: 40000,
            q1: 61250,
            median: 66000,
            q3: 77000,
            high: 85000,
            outliers: [240000]
          },
          {
            x: 'Product Manager',
            low: 30000,
            q1: 60000,
            median: 70000,
            q3: 85000,
            high: 120000,
            outliers: [150000]
          },
          {
            x: 'Software Engineer',
            low: 28800,
            q1: 60000,
            median: 72000,
            q3: 81000,
            high: 110000,
            outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
          }
        ];
        // create a chart
        var chart = anychart.box();
        // create a box series and set the data
        var series = chart.box(data);
        // set the chart title
        chart.title('Yearly Gross Salary for Different IT professions in Europe');
        // set the container id
        chart.container('container');
        // draw the chart
        chart.draw();
      });
    </script>
  </body>
</html>

Поделиться:

Оглавление