Легко визуализируйте иерархии с помощью этих трех интерактивных графических диаграмм

Краткий урок визуализации данных с использованием данных из S & P500

Рассказывайте истории с вашими данными

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

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

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

• Графики солнечных лучей
• Древовидные диаграммы
• Графики Сосульки

Данные и зависимости

Чтобы использовать новейшие диаграммы и функции, убедитесь, что у вас установлена ​​последняя версия plotly. Используйте pip для установки plotly и pandas по мере необходимости:

$ pip install plotly
$ pip install pandas

Данные, используемые в этих примерах, представляют собой Список компаний S&P 500, предоставленный Википедией. Таблицу также можно найти на моем GitHub.

Откройте данные в Pandas DataFrame и проверьте верхние строки.

import pandas as pd
import plotly.express as px

#open company list in dataframe
df = pd.read_excel('sp500.xlsx')
#add a column with a 1 for every row to use as the value
df['constant'] = 1
#display top 5 rows
df.head()

Обратите внимание, что я добавил столбец с именем constant и присвоил ему значение 1. Он будет использоваться с параметром value при вызове графической диаграммы. Если взглянуть на код, это будет иметь больше смысла.

Графики солнечных лучей

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

Создание диаграммы солнечных лучей

Plotly предоставляет два метода создания визуализаций. Plotly Express - это простой в использовании высокоуровневый API для Plotly, в то время как объекты Plotly Graph - более продвинутый вариант, допускающий более глубокую настройку. Я покажу пример с использованием метода Plotly Express, но я рекомендую вам изучить документацию, чтобы увидеть другие методы.

Поскольку наши данные находятся в фрейме данных, нам нужно будет передать фрейм данных, путь иерархии и значения при вызове px.sunburst (). Столбец констант будет передан как значения, поэтому он будет агрегирован в счетчики. Например, при наведении указателя мыши на приложение «Программное обеспечение» отображается счетчик до 13.

fig = px.sunburst(
    df,
    path = ['GICS\xa0Sector', 'GICS Sub-Industry', 'Symbol'],
    values = df['constant']
)
fig.show()

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

Ознакомьтесь с полной документацией по диаграммам солнечных лучей здесь:

Древовидные диаграммы

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

Создание диаграммы древовидной карты

Используя plotly express, создать древовидную карту очень просто. Вызовите px.treemap и передайте фрейм данных, путь и значения, как в диаграмме солнечных лучей.

fig =px.treemap(
    df,
    path = ['GICS\xa0Sector', 'GICS Sub-Industry', 'Symbol'],
    values = df['constant'],
    color = 'GICS Sub-Industry', 
    hover_data = ['Security'],
    color_continuous_scale = 'RdBu'
)
fig.show()

Поскольку код практически идентичен диаграмме солнечных лучей, я добавил в этот пример несколько дополнительных параметров. Обратите внимание, что столбец Подотрасль GICS передается в параметр color, чтобы добавить уникальный цвет для подотраслей, а не для сектора. Безопасность была передана параметру hover_data, поэтому при наведении курсора будет отображаться полное название компании.

Чтобы увидеть все параметры и способы создания визуализации с помощью объектов графика, ознакомьтесь с полной документацией по диаграммам Treemap здесь:

Графики Сосульки

Новое в Plotly v5.0, диаграммы типа Icicle визуализируют иерархические данные с помощью каскадных прямоугольников в определенном направлении: вверх, вниз, влево или вправо. Я был очень счастлив, когда эта диаграмма была добавлена ​​в 5.0, так как она идеально подходит для моего варианта использования трехуровневой навигации!

Создание диаграммы сосульки

Код будет очень похож на две другие диаграммы, которые мы рассмотрели, за некоторыми исключениями. Чтобы получить помеченный корень, передайте px.Constant («‹ root name ›») в параметр path. Я назову корень SP500.

fig =px.icicle(
    df,
    path = [px.Constant("SP500"),'GICS\xa0Sector', 'GICS Sub-Industry', 'Symbol'],
    values = df['constant'],
    hover_data=['Security'],
    color_continuous_scale='RdBu'
)
fig.update_traces(root_color="lightgrey")
fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))
fig.show()

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

Чтобы увидеть все параметры и то, как создать визуализацию с помощью Graph Objects, ознакомьтесь с полной документацией по диаграммам Icicle здесь:

Последние мысли

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

Найдите данные и код на моем гитхабе

Спасибо за прочтение! Если вы занимаетесь программированием и наукой о данных, посмотрите другую статью!

Благодарю вас!

• Если вам понравилась моя работа, подписывайтесь на меня на Medium, чтобы узнать больше!
• Получите ПОЛНЫЙ ДОСТУП и помогите поддержать мой контент, подписавшись!
• Давайте подключимся к LinkedIn
• Анализировать данные с помощью Python? Загляните на мой сайт!

- Эрик Клеппен