Визуализация данных с помощью фреймворка Dash (часть 3)

Привет, Хабр! Я расскажу о трех опциональных, но довольно полезных инструментах фреймворка dash, которые сделают ваш dashbord показательным и интерактивным.

Демонстрацию инструментов я реализовал на примере дэшборда, созданного в предыдущих постах. C ними можно ознакомиться по ссылкам (первая часть, вторая часть)

Первый инструмент, которому я хочу уделить внимание это — sunburst диаграмма.Диаграмма в виде солнечных лучей, показывает зависимости дочерних элементов от основных и прекрасно подходит для детального рассмотрения каждого уровня иерархии. В Дэш также является довольно интерактивной и кастомизируемой.

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

Создаем новую страницу в Навигаторе:

dbc.Nav(     [         dbc.NavLink("Analysis", href="/page1", active="exact"),         dbc.NavLink("The effect", href="/page2", active="exact"),         dbc.NavLink("Sunburst", href="/page3", active="exact"),         dbc.NavLink("3D SCATTER", href="/page4", active="exact"),         dbc.NavLink("Thanks", href="/page5", active="exact"),     ],     vertical=True,pills=True),

И прописываем ее параметры в функции отображения контента.

dcc.Graph(id='graph3',           figure =px.sunburst(         data_frame=df1,         path=["cut", "color", "clarity"],         color="cut",         color_discrete_sequence=px.colors.qualitative.Pastel,         maxdepth=-1,         width=1200,         height=1200)         ,className="card") ]

И в итоге у нас выходит, представленная ниже диаграмма, в которой на верхнем уровне идет качество, на втором цвет и третьем- частота.

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

Здесь выделяем основную ветвь.

Здесь побочную.

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

path=["cut", "color", "clarity"] 

В атрибуте path обозначаем Иерархию между источником и лучам, то есть, как видно на скриншотах сначала качество(cut), затем цвет(color), потом чистота(clarity)

В атрибуте color обозначаем, на каком уровне иерархии будет меняться цвет.

Атрибут maxdepth=-1 отвечает за количество отображаемых уровней. -1 означает, что отображаются все доступные уровни.

color_discrete_sequence=px.colors.qualitative.Pastel отвечает за цветовую схему.

Следующий инструмент в нашем списке это scatter_3d.В предыдущей части поста я использовал 2д вариант этого инструмента. Здесь можно увидеть зависимость ширины высоты и стоимости камня. При этом можно выставить определенное значение карат и необходимое качество обработки.

Это делается не так уж и сложно.

dcc.Graph(id='graph3',           figure=px.scatter_3d(df1, x='depth', y='table', z='price',         color='cut',animation_frame='carat',height=800))

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

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

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

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

И последней вещью, о которой я хотел бы рассказать, это возможность вставлять lottie изображения.

Lottie является библиотекой для Веб разработки, отображающая After Effects анимацию в режиме реального времени. Разгружая приложения или сайты (так как анимации в gif или mp4 формате либо довольно тяжёлые, либо трудны для форматирования) и давая возможность использовать анимированное изображение также легко, как и обычные статические картинки. Спасибо инженерам airbnb за это изобретение.

Библиотека задействует анимации в виде json файлов путем кодировки через Bodymovin. (плагин after effects)

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

import dash_extensions as de

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

Давайте инкрустируем его в dashборд.

Для этого возьмем в профиле картинки Lottie Animation URL и создадим для него переменную url.

url = 'https://assets4.lottiefiles.com/packages/lf20_w4cfkn2i.json'

Далее нам необходима переменная с настройками отображения изображения.

options = dict(loop=True,autoplay=True,renderSettings=dict(perserveAspectRatio='xMidYMid slice'))

Loop — отвечает за цикличное воспроизведение, Autoplay — за автоматический запуск, а RendererSettings отвечает за настройку изображения, perserveAspectRatio='xMidYMid slice'  отвечает за то, как должен объект с заданным соотношением сторон вписываться в область с другим соотношением сторон, подробнее об этом вот здесь.

Создаем переменную options и url, остается вписать изображение в контент страницы:

elif pathname == "/page5":     return [         html.Div(             children=[                 html.H1(children='Thank you for your attention! :)', className='header-title'),              ], className='header'),         html.Div(de.Lottie(options=options,width="25%",height="25%",url=url))

Мне показалось, это изображение довольно неплохо впишется в общую канву)

В данном фреймворке присутствует еще много интересных инструментов, которые подходят под те или иные задачи.

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