Привет, Хабр! Я расскажу о трех опциональных, но довольно полезных инструментах фреймворка 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))

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

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

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

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