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

График MovingBubble — один из тех потрясающих графиков, на которые стоит взглянуть. Это отличный способ концептуально лучше понять, как отдельные элементы распределяются по состояниям и перемещаются во времени. Узнайте, как создавать их с помощью Python и собственного набора данных.

Движущаяся пузырьковая диаграмма — одна из тех диаграмм, на которую просто невозможно смотреть. Это отличный способ рассказать историю и концептуально лучше понять, как отдельные элементы распределяются по состояниям и перемещаются во времени. Несмотря на привлекательный внешний вид, такие диаграммы встречаются нечасто из-за огромных усилий, которые необходимо предпринять для создания одной диаграммы. Здесь вступает в игру библиотека D3Blocks, поскольку диаграмма movingbubbles является частью D3Blocks. Это программа с открытым исходным кодом, и для создания диаграммы движущиеся пузырьки не нужно устанавливать ничего, кроме Python. Вывод интерактивный и автономный, для которого вам не нужна никакая другая технология, кроме браузера. Таким образом, делиться, публиковать и интегрировать диаграмму на веб-сайты становится очень просто. В этом блоге я представлю движущуюся пузырьковую диаграмму на практическом примере.

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

Диаграмма Movingbubble является частью D3Blocks.

D3Blocks — это библиотека, содержащая различные диаграммы, часть визуализации которых построена на (d3) javascript, но настраивается с помощью Python. Таким образом, библиотека D3Blocks сочетает в себе преимущества d3 javascript, такие как скорость, масштабируемость, гибкость и неограниченные творческие возможности, вместе с Python для быстрого и простого использования. Дополнительную информацию о библиотеке D3Blocks можно найти в этом блоге [1].

Диаграмма movingbubbles является частью D3Blocks и состоит из двух частей. часть Python и часть d3js. Часть Python содержит функции для обработки данных, предварительной обработки, нормализации, обработки цветов, меток и т. д., не беспокоясь о модулях d3 javascript. Этот модуль можно загрузить, указать параметры, и диаграмма movingbubbles будет создана на основе вашего входного набора данных. За кулисами модуль Python будет интегрировать информацию в часть d3js, такую как набор данных, цвета, настройка позиций, установка меток для количества состояний, и включать пользовательские параметры. Наконец, все файлы соединяются и объединяются в один рабочий HTML-файл. Таким образом, диаграммы movingbubbles будут автоматически корректироваться в соответствии с вашим набором данных и параметрами.

Входной набор данных, параметры и выходные данные.

График MovingBubbles визуально удовлетворителен узлами, направленными и сталкивающимися. Это может помочь понять, возникают ли и когда кластеры выборок в определенные моменты времени и состояния. Прежде чем мы рассмотрим функциональные возможности movingbubbles, нам сначала нужно установить библиотеку D3Blocks:

pip install d3blocks

Фрейм входных данных.

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

DateTime: описывает DateTime, когда происходит событие.
состояние: описывает конкретное состояние для sample_id в DateTime.
sample_id:образец может быть человеком/объектом, который может находиться в разных состояниях в разные моменты времени. Он не может иметь два или более состояний в один и тот же момент времени.

Пример входного DataFrame показан ниже. В этом примере есть 10 000 строк с 3 столбцами и индексным столбцом. Уникальные sample_id представляют людей с определенным образом жизни (состояния). Например, самая первая строка (индекс 0) содержит человека с идентификатором 61 и в момент времени 00:10:36. состояние "Еда". Немногим позже этот человек переходит в состояние Спит (момент времени 00:11:30). На следующий день мы снова видим этого конкретного человека (с id 61) в момент времени 23:57:54 со статусом "Дом". Подводя итог, можно сказать, что человек с id 61 прошел через три состояния: Еда › Сон › Дома. Обратите внимание, что люди будут оставаться в определенном состоянии до тех пор, пока не будет вызвано следующее состояние.

print(df)
#                 datetime sample_id     state
# 0    2000-01-01 00:10:36        61    Eating
# 1    2000-01-01 00:10:51        83      Sick
# 2    2000-01-01 00:11:30        61  Sleeping
# 3    2000-01-01 00:11:37        66  Sleeping
# 4    2000-01-01 00:11:57        94  Sleeping
#                  ...       ...       ...
# 9995 2000-01-02 23:57:12         6      Home
# 9996 2000-01-02 23:57:23        48      Sick
# 9997 2000-01-02 23:57:54        61      Home
# 9998 2000-01-02 23:58:22         4  Sleeping
# 9999 2000-01-02 23:59:34        88  Sleeping
# [10000 rows x 3 columns]

Входные параметры.

Блок движущихся пузырей содержит различные входные параметры и описан в разделе кода 1. Состояния будут автоматически расположены по кругу.

Выходной файл.

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

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

Давайте начнем с небольшого примера, чтобы продемонстрировать, как фрейм входных данных преобразуется в движения. Мы создадим три уникальных образца, которые будут перемещаться по шестисостояниям: дома, школе, работе, еде, кофе, сне, по 5 минут в каждом. интервалы. Для ясности давайте сохраним движения для трех образцов или отдельных лиц в трех отдельных кадрах данных; df1, df2,и df3. Конечный фрейм данных df представляет собой объединенный набор из трех фреймов данных. Распечатав DataFrame df, как показано в разделе кода 2, можно увидеть, что DateTime имеет 5-минутный интервал и что каждый выборка перемещается по шести штатам.

DataFrame df с тремя столбцами — это то, что вам нужно для создания диаграммы movingbubble. Можно указать другие входные параметры, например стандартизацию. В этом примере используется выборочная стандартизация и указываются time_notes (необязательно), которые будут появляться на левой панели. Другие параметры установлены по умолчанию, чтобы сохранить их как можно более чистыми.

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

Пример с разными конфигурациями и больше образцов.

В этом примере мы создадим набор данных, который содержит случайные перемещения выборок по разным штатам. Идея та же, что и в предыдущем примере, но теперь мы будем использовать d3.import_example(graph='random_time'). Входной набор данных печатается в разделе кода 4 и должен содержать три столбца. Установлены следующие параметры: speed задано значение настраиваемый, center задано значение пусто, что указывает на то, что состояние не отображается в середине диаграмма. Стандартизация не применяется (подробнее о стандартизации см. в следующем разделе).

Теперь мы также можем легко установить center=’work’, который автоматически изменит порядок и положение состояний.

Стандартизация выборочного времени.

Функция стандартизации позволяет преобразовывать временные точки по выборке способом. Это означает, что время стандартизировано для идентификатора образца и независимо от других идентификаторов образца. Или, другими словами, начальная точка для каждого образца выравнивается, и в результате начальное значение DateTime будет одинаковым. Чтобы продемонстрировать эффект выборочной стандартизации, я загружу небольшой фрейм данных, созданный в разделе кода 1. Если мы внимательно посмотрим на данные, то увидим, что sample_id 1 и sample_id 2 имеют одинаковое начальное значение DateTime, тогда как sample_id 3 начинается почти на 1 год позже. :

Дата и время для sample_id#1: 2000–01–01 00:00:00.
Дата и время для sample_id#2: 2000–01–01 00:00:00.
Дата и время для sample_id #3: 2000–12–12 00:00:00

Теперь, когда мы применяем выборочную стандартизацию, во фрейме данных добавляются два новых столбца. Столбец datetime_norm (раздел кода 5) содержит выровненные точки DateTime, для которых выровнена разница в один год в sample_id 3. Столбец дельты отображает разницу во времени, наблюдаемую в исходных данных.

Никакой стандартизации.

В случае, если мы не применяем стандартизацию, время моделируется как есть. Разница в один год (345 дней, если быть точным, строка 67 кода, раздел 5) можно увидеть в разнице во времени (дельта). Теперь вам, возможно, придется долго ждать, прежде чем sample_id 3 переместится. Однако можно изменить скорость времени с помощью параметра speed (см. также раздел кода 1).

Заключительные слова.

Я продемонстрировал, как создать собственную диаграмму MovingBubbles с помощью Python. График разработан таким образом, что может обрабатывать различные состояния, таймфреймы и цвета. Диаграмма MovingBubbles — это один из блоков в D3Blocks, для которого использование d3js показывает свою силу и преимущества, такие как скорость, гибкость и возможность добавления все ваше творчество в диаграмме. Не стесняйтесь экспериментировать с библиотекой!

Будьте в безопасности. Оставайтесь на морозе.

Ура, Э.

Программное обеспечение

D3Blocks Гитхаб

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

Диаграмма Movingbubble является частью D3Blocks.