Время прочтения: 5 мин.

Демонстрацию инструментов я реализовал на примере дэшборда, созданного в предыдущих постах. 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))

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

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

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