Введение в Dash и Python

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

Настройка среды

Прежде чем приступить к созданию дашборда, необходимо настроить среду. Вот шаги, которые помогут вам начать:

Установка необходимых пакетов

Для начала необходимо установить нужные пакеты. Это можно сделать с помощью команды pip:

pip install dash pandas plotly

Эта команда установит Dash, Pandas и Plotly — основные компоненты, необходимые для создания дашборда.

Базовая структура приложения Dash

Приложение Dash состоит из нескольких ключевых компонентов:

  1. Создание экземпляра приложения:
    import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
  2. Определение структуры: Структура определяется с использованием HTML и компонентов Dash.
    app.layout = html.Div(children=[
    html.H1(children='My First Dash App'),
    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    dcc.Graph(id='example-graph')
])
  3. Добавление обратных вызовов: Обратные вызовы — это функции, которые обновляют компоненты дашборда в зависимости от действий пользователя.
    @app.callback(
    dash.dependencies.Output('example-graph', 'figure'),
    [dash.dependencies.Input('input-component', 'value')]
)
def update_graph(input_value):
    # Code to update the graph based on input_value
    return figure
  4. Запуск приложения: Наконец, необходимо запустить приложение.
    if __name__ == '__main__':
    app.run_server(debug=True)

Создание интерактивного дашборда

Давайте рассмотрим более сложный пример, включающий интерактивные элементы.

Пример: интерактивный точечный график

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

Импорт библиотек и инициализация приложения

import dash
import dash_core_components as dcc
import dash_html_components as html
from get_plots import get_scatter_plot

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

Определение структуры

Здесь мы определяем структуру с графиком и двумя ползунками для ввода данных пользователем.

app.layout = html.Div(children=[
    html.Div([
        dcc.Graph(id='fig1')
    ]),
    html.Div([
        html.H6('Time Period, days'),
        dcc.Slider(
            id='slider-day1',
            min=0,
            max=100,
            step=1,
            value=30,
            marks={i: str(i) for i in range(0, 100, 10)}
        ),
        html.H6('Number of Breweries in Top'),
        dcc.Slider(
            id='slider-top1',
            min=0,
            max=500,
            step=50,
            value=500,
            marks={i: str(i) for i in range(0, 500, 50)}
        )
    ])
])

Добавление обратных вызовов

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

@app.callback(
    dash.dependencies.Output('fig1', 'figure'),
    [dash.dependencies.Input('slider-day1', 'value'),
     dash.dependencies.Input('slider-top1', 'value')]
)
def output_fig(n_days, top_n):
    fig = get_scatter_plot(n_days, top_n)
    return fig

Запуск приложения

Наконец, мы запускаем приложение.

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

Схема процесса

Вот простая схема процесса для иллюстрации:

graph TD A("Import Libraries") -->|Initialize|B(Create Application Instance) B -->|Define Layout|C(Add HTML and Dash Components) C -->|Add Callbacks|D(Define Callback Functions) D -->|Run Application|E(Start Server) E -->|User Interaction|F(Update Dashboard) F -->|Update Graph| E

Кастомизация дашборда

Использование CSS для стилизации

Вы можете настроить внешний вид дашборда с помощью CSS. Вот пример использования внешних таблиц стилей:

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

Также вы можете определить встроенные стили непосредственно в компонентах HTML:

app.layout = html.Div(style={'textAlign': 'center'}, children=[
    html.H1(style={'color': 'blue'}, children='My First Dash App')
])

Добавление продвинутых компонентов

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

Например, используя dash_bootstrap_components:

import dash_bootstrap_components as dbc

app.layout = dbc.Container([
    dbc.Row(dbc.Col(html.H1('My First Dash App'))),
    dbc.Row(dbc.Col(dcc.Graph(id='example-graph')))
])

Развёртывание дашборда

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

Локальное развёртывание

Чтобы запустить дашборд локально, просто выполните скрипт:

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

Это запустит локальный сервер, и вы сможете получить доступ к дашборду через предоставленный URL.

Развёртывание на Heroku или других сервисах

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

  1. Создайте аккаунт на Heroku и установите CLI Heroku.
  2. Инициализируйте репозиторий Git для вашего проекта.
  3. Создайте файл requirements.txt, перечисляющий ваши зависимости.
  4. Создайте Procfile, указывающий, как запускать ваше приложение.
  5. Отправьте свой код на Heroku и разверните его.

Пример файла Procfile:

web: gunicorn app:server

Как можно развернуть:

heroku create
git push heroku main
heroku open