Четкое пошаговое руководство по созданию интерактивной диаграммы 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, например «контейнер», чтобы его можно было легко идентифицировать позже в коде.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшение названия

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

Ознакомьтесь с этой адаптированной версией диаграммы с упакованными кругами JS здесь.

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

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

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

Проверьте весь код со всеми настройками на CodePen.

Заключение

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

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