Создание Dashboard c Dash и Plotly — Python: Визуализация данных

• Основы Dash
  • Создание простого веб-приложения с использованием Dash
  • Структура Dash приложения: компоненты и компоновка
  • Использование HTML и CSS для оформления приложения
• Создание интерактивных элементов
  • Добавление элементов управления: кнопки, выпадающие списки, слайдеры
  • Обработка событий: привязка действий к интерактивным элементам
  • Динамическое обновление содержимого страницы без перезагрузки
• Визуализация данных с помощью Plotly
  • Интеграция графиков Plotly в Dash приложение
• Построение различных типов графиков
  • Добавление интерактивности к графикам: всплывающие подсказки, выбор периода, масштабирование
• Выводы

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

Использование Dash позволяет разработчикам быстро создавать интерактивные веб-приложения без необходимости изучения других языков программирования или фреймворков. Это удобно для тех, кто уже знаком с Python и хочет использовать его для создания веб-приложений. Полезен данный инструмент для датасаентистов, аналитиков и менеджеров, поскольку позволяет демонстрировать результаты работы на дашбордах интернет страницы.

В этой статье мы познакомимся с основами создания интерактивных веб-приложений с использованием Dash на Python. Начнем с создания простого приложения, затем изучим структуру Dash приложений и способы их оформления с помощью HTML и CSS. Далее мы добавим интерактивные элементы управления, такие как кнопки и слайдеры, и научимся обрабатывать события. Затем мы рассмотрим визуализацию данных с помощью Plotly, интегрируя графики в наши приложения и добавляя им интерактивность.

Основы Dash

Создание простого веб-приложения с использованием Dash

Сперва сделаем замечание, что в дальнейшем каждый блок кода поднимает веб сервер. Вы можете просмотреть дашборды на данном сервере с использованием любого удобного браузера по адресу http://127.0.0.1:8050/. Для запуска необходимо скопировать код в .py файл и запустить его в командной строке. При переходе к следующему блоку кода не забывайте завершать процесс выполнения предыдущего блока кода.

Давайте начнем с создания простого приложения, которое будет выводить текст на веб-страницу:

import dash
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1(children="Hi, Dash!"),
        html.Div(
            children="""This is an example of a simple web application using Dash"""
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Этот код создает веб-страницу с заголовком "Hi, Dash!" и текстом "This is an example of a simple web application using Dash".

Структура Dash приложения: компоненты и компоновка

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

Основные компоненты Dash:

• dash_core_components: Этот модуль содержит основные компоненты, необходимые для создания веб-приложений. Например, html.Div используется для создания контейнера, в котором могут содержаться другие компоненты, а html.H1 используется для создания заголовка первого уровня.
• dash_html_components: Этот модуль предоставляет компоненты HTML, которые могут быть использованы в Dash приложениях. Например, html.Div, html.Span, html.H1, html.P и т.д.
• dash_bootstrap_components: Этот модуль предоставляет компоненты, основанные на фреймворке Bootstrap, для создания более красивых и адаптивных веб-приложений.

Компоненты могут быть организованы в различные макеты для создания нужной структуры веб-страницы. Например, вы можете использовать компоненты html.Div для создания блоков контента или разделения страницы на разные секции. Компоненты также могут быть вложены друг в друга для создания сложных макетов. Кроме того, с помощью CSS и стилей вы можете настроить внешний вид компонентов и их расположение на странице.

Использование HTML и CSS для оформления приложения

Dash позволяет использовать HTML и CSS для кастомизации внешнего вида приложения. Например, вы можете использовать CSS для изменения цвета фона или шрифта текста. Вот пример применения стилей к нашему простому приложению:

import dash
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.H1(
            children="Hi, Dash!", style={"font-size": "40px", "background": "blue"}
        ),
        html.Div(
            children="""This is an example of a simple web application using Dash""",
            style={"font-size": "20px", "background": "green"},
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

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

Создание интерактивных элементов

Добавление элементов управления: кнопки, выпадающие списки, слайдеры

Dash позволяет добавлять различные интерактивные элементы управления. Например, давайте добавим кнопку, которая будет менять цвет фона приложения при нажатии на нее:

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.Button("Change color", id="button"),
    ]
)


@app.callback(Output("button", "style"), [Input("button", "n_clicks")])
def update_color(n_clicks):
    if n_clicks is None:
        n_clicks = 0
    if n_clicks % 2 == 0:
        return {"background-color": "red"}
    else:
        return {"background-color": "blue"}


if __name__ == "__main__":
    app.run_server(debug=True)

В этом примере мы создаем кнопку с id "button". При каждом нажатии на кнопку, фоновый цвет кнопки будет меняться с красного на синий и обратно.

Управление действием делается с импользованием колбэков @app.callback(), а входные и выходные переменные задаются с помощью параметров Input и Output. Помимо стилистических элементов возможно изменения и других частей дашборда, что будет рассмотрено далее на примере текстовых сообщений по событию.

Обработка событий: привязка действий к интерактивным элементам

С помощью Dash мы можем связывать действия с интерактивными элементами управления. Давайте посмотрим на пример, в котором при нажатии на кнопку будет отображаться количество нажатий:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[html.Button("Clicks!", id="button"), html.Div(id="output")]
)


@app.callback(Output("output", "children"), [Input("button", "n_clicks")])
def update_output(n_clicks):
    if n_clicks is None:
        return ""
    else:
        return f"Click numbers: {n_clicks}"


if __name__ == "__main__":
    app.run_server(debug=True)

В этом примере мы создали кнопку с id "button" и div-элемент с id "output". При каждом нажатии на кнопку, в div-элементе будет отображаться количество нажатий.

В рассмотренных примерах действие происходило по нажатию на кнопку. Однако Dash позволяет обновляться в автоматическом режиме.

Динамическое обновление содержимого страницы без перезагрузки

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

import dash
from dash.dependencies import Output, Input
import dash_html_components as html
import dash_core_components as dcc
import datetime
import time

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1(id="live-update-text"),
        dcc.Interval(id="interval-component", interval=1000, n_intervals=0),
    ]
)


@app.callback(
    Output("live-update-text", "children"), [Input("interval-component", "n_intervals")]
)
def update_layout(n):
    return f"Time: {datetime.datetime.now()}"


if __name__ == "__main__":
    app.run_server(debug=True)

В этом примере мы создали текстовый элемент с id "live-update-text" и компонент интервала с id "interval-component". Каждую секунду содержимое текстового элемента будет автоматически обновляться, отображая текущее время. Создание интерактивных веб-приложений одна из задач Dash. Однако свою известность среди датасаентистов и аналитиков он получил благодаря нативной интеграции графиков Plotly.

Визуализация данных с помощью Plotly

Интеграция графиков Plotly в Dash приложение

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

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np

app = dash.Dash(__name__)

x = np.linspace(0, 10, 100)
y = np.sin(x)

app.layout = html.Div(
    children=[
        dcc.Graph(
            id="example-graph",
            figure={
                "data": [{"x": x, "y": y, "type": "line", "name": "sin(x)"}],
                "layout": {"title": "Example graph"},
            },
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

В этом примере мы отобразили график синусоиды.

Построение различных типов графиков

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

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame(
    {
        "City": ["Moscow", "St. Petersburg", "Novosibirsk", "Ekaterinburg"],
        "Population": [11920000, 4991000, 1625000, 1495000],
    }
)

app.layout = html.Div(
    children=[
        dcc.Graph(
            id="example-graph",
            figure={
                "data": [
                    {
                        "x": df["City"],
                        "y": df["Population"],
                        "type": "bar",
                        "name": "Population",
                    }
                ],
                "layout": {"title": "Population of Russian cities"},
            },
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

В этом примере мы построили столбчатую диаграмму, отображающую население четырех крупнейших городов России.

Добавление интерактивности к графикам: всплывающие подсказки, выбор периода, масштабирование

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

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame(
    {
        "City": ["Moscow", "St. Petersburg", "Novosibirsk", "Ekaterinburg"],
        "Population": [11920000, 4991000, 1625000, 1495000],
    }
)

app.layout = html.Div(
    children=[
        dcc.Graph(
            id="example-graph",
            figure={
                "data": [
                    {
                        "x": df["City"],
                        "y": df["Population"],
                        "type": "bar",
                        "name": "Population",
                    }
                ],
                "layout": {
                    "title": "Population of Russian cities",
                    "hovermode": "closest",
                },
            },
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

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

Выводы

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