Четкое пошаговое руководство по созданию интерактивной диаграммы JS Circle Packing Chart для визуализации 100 самых популярных песен в Spotify.

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

Что такое круговая диаграмма упаковки

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

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

Размер круга обозначает значение узла.

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

Предварительный просмотр диаграммы упаковки кругов, которая будет произведена

Взгляните на то, что я собираюсь построить — окончательную диаграмму упаковки кругов JS, которая будет создана к концу урока — и присоединяйтесь к этой музыкальной поездке!

Создание диаграммы JS Circle Packing Chart за 4 простых шага

Встраиваемая круглая диаграмма упаковки выглядит захватывающей, но ее сложно создать. Тем не менее, существует множество JavaScript-библиотек для построения диаграмм, специально предназначенных для помощи каждому в построении различных визуализаций данных. И как только вы нашли тот, который предоставляет встроенную опцию упаковки кругов из коробки, обычно довольно быстро и просто создать такую ​​​​интерактивную диаграмму, даже если вы новичок с (пока) ограниченными навыками кодирования.

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

Итак, основные шаги по созданию JS Circle Packing Chart номер четыре и таковы:

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

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

Первое, что я делаю, это создаю базовую HTML-страницу, на которой будет размещена диаграмма. Затем я создаю блочный элемент HTML div и назначаю ему атрибут ID, например 'контейнер', чтобы его можно было легко идентифицировать позже в коде.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Circle Packing Chart</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>

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

2. Включите необходимые файлы JavaScript

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

Чтобы создать эту диаграмму в этом руководстве, я использую библиотеку AnyChart. Он имеет модульную структуру, которая позволяет легко подключать только те типы диаграмм и функции, которые вам нужны в данный момент, уменьшая размер выполняемого кода JavaScript. В данном случае мне нужен модуль ядро вместе со специальным модулем круговая упаковка. Поэтому я включаю оба в раздел head HTML-страницы, созданной на первом этапе.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Circle Packing Chart</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-circle-packing.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.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 Circle Packing Chart will be here.
    </script>
  </body>
</html>

3. Добавьте данные

Я решил визуализировать 100 самых прослушиваемых песен на Spotify, используя специальный набор данных от Kaggle. Я немного переработал данные, чтобы они выглядели так, как мне нужно, и сохранил их в файл JSON.

Для загрузки данных из файла JSON я буду использовать удобный модуль под названием Адаптер данных. Поэтому я включаю его в список скриптов, на которые ссылаются, в разделе head и использую функцию anychart.data.loadJsonFile, чтобы добавить этот файл данных в код.

Теперь, когда все приготовления завершены, давайте перейдем к последнему шагу создания этой впечатляющей интерактивной упакованной круговой диаграммы на основе JS!

4. Напишите код JavaScript для своей диаграммы

Некоторое базовое знание технологий веб-разработки, таких как HTML и JavaScript, всегда является преимуществом при создании визуализаций и написании кода, который может показаться сложным. Тем не менее, для создания круглой упаковочной диаграммы таким образом может потребоваться всего лишь 6–7 строк кода. Так что в любом случае ничего сложного не будет. Разве это не музыка для ваших ушей?

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

Теперь я определяю функцию с параметром данных и сопоставляю данные с помощью функции data.tree. Я добавляю сопоставленные данные в функцию circlePacking.

anychart.onDocumentReady(function () {
anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/17dc3b3d4ac9b63ac5ac6833944f3a94/raw/07c4bec103d22ec2824453a33d41868fd476db3d/dataPackedCircles.json',
function(data) {
  var treeData = anychart.data.tree(data, 'as-table');
  var chart = anychart.circlePacking(treeData);
}
);
});

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

anychart.onDocumentReady(function () {
  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/17dc3b3d4ac9b63ac5ac6833944f3a94/raw/07c4bec103d22ec2824453a33d41868fd476db3d/dataPackedCircles.json',
function(data) {
  // add data
  var treeData = anychart.data.tree(data, 'as-table');
  // create a circle packing chart instance
  var chart = anychart.circlePacking(treeData);
    
  // add a chart title
  chart.title("Top 100 most streamed songs on Spotify by genre")
      
  chart.container('container');
  chart.draw();
    
}
);
});

Тада! Полнофункциональная диаграмма упаковки кругов создается с минимальными усилиями!

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

Вы можете найти весь код этой простой круговой диаграммы, упакованной в JavaScript, на CodePen [и на AnyChart Playground.)

Настройка JS Circle Packing Chart

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

Модификация цвета

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

<script src="https://cdn.anychart.com/releases/8.11.0/themes/dark_glamour.min.js"></script>
...
anychart.theme('darkGlamour');

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

chart.background('#333');
    
chart.fill('#333');
chart.stroke(function () {
  return {
    thickness: 2,
    color: this.sourceColor
  };
});

Улучшение титула

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

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style = "color: #fff; font-size:20px;">Top 100 most streamed songs by genre</span>' +
    '<br/><span style="color:#1db954; font-size: 18px;">(Based on the number of Spotify Streams)</span>'
  );

Ознакомьтесь с этой настроенной версией диаграммы JS с упакованными кругами здесь [или на Площадке AnyChart.]

Форматирование всплывающей подсказки

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

chart
  .tooltip()
  .useHtml(true)
  .titleFormat('{%name}')
  .format( function(){
    let dataValue = this.item.ka;
    if(this.depth == 2){ 
      return '<span style = font-size:14px;">Popularity Value - ' + dataValue.value + '</span>' +
      '<br/>lt;span style = font-size:14px;">Artist - ' + dataValue.artist + '</span>' + 
      '<br/><span style = font-size:14px;">Year - ' + dataValue.year + '</span>'  
    }else{
      return '<span style = "color: #fff; font-size:14px;">Popularity Value - ' + this.value + '</span>'
    }
  });

Вот и все! Элегантная и информативная таблица JavaScript Circle Packing Chart разработана и готова к работе.

Проверьте весь код со всеми настройками на CodePen [или на AnyChart Playground.]

Заключение

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

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

Публикуется с разрешения Шачи Свадиа. Первоначально появился на Level Up Coding под заголовком Как создать круговую диаграмму упаковки с помощью JavaScript 3 января 2022 г.

Не пропустите другие наши Руководства по построению диаграмм JavaScript.

Если у вас есть идея для интересного гостевого поста, мы будем рады, если вы сообщите нам об этом!

Первоначально опубликовано на https://www.anychart.com 15 марта 2022 г.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.