Как использовать Plotly и Dash для визуализации данных

Ухань Юань Чуанхуэй возвращается, поговорим о больших моделях 20 апреля»

Эта статья опубликована Лемони Хугом из облачного сообщества Huawei « От данных к развертыванию с использованием Plotly и Dash для реализации визуализации данных и развертывания производственной среды ».

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

Установите Plotly и Dash

Сначала нам нужно установить библиотеки Plotly и Dash. Вы можете установить их с помощью pip с помощью следующей команды:

pip installplotly Dash

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

Код кейса: простое приложение для визуализации данных

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

импортировать тире
из тире импорта DCC, html
импортироватьplotly.express как px
импортировать панд как pd

#Читать данные
df = pd.read_csv('sales_data.csv')

#Создаем приложение Dash
приложение = тире.Dash(__name__)

# макет
app.layout = html.Div([
    html.H1("Визуализация данных о продажах"),
    dcc.График(
        id='график продаж'
    )
])

# Перезвонить
@app.callback(
    черта.зависимости.Выход('график продаж', 'цифра'),
    [dash.dependents.Input('график продаж', 'значение')]
)
Защиту update_graph (выбранный_год):
    filtered_df = df[df['Год'] == выбранный_год]
    fig = px.bar(filtered_df, x='Месяц', y='Продажи', title=f'Данные о продажах-{selected_year}')
    вернуть рис

# Запустить приложение
если __name__ == '__main__':
    app.run_server(отладка=Истина)

В этом примере мы сначала читаем CSV-файл с именем sales_data.csv, а затем создаем приложение Dash. В макете приложения мы определяем заголовок и пустую область диаграммы. Затем мы настроили функцию обратного вызова, чтобы, когда пользователь выберет другой год, диаграмма обновилась и отобразила данные о продажах за этот год. Наконец, мы запускаем приложение, вызывая метод run_server.

Убедитесь, что файл sales_data.csv содержит необходимые поля данных (например, «Год», «Месяц» и «Продажи»), чтобы код мог работать правильно.

Код примера: расширенная визуализация и взаимодействие данных

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

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

импортировать тире
из тире импорта DCC, html
импортироватьplotly.express как px
импортировать панд как pd

#Читать данные
df = pd.read_csv('sales_data.csv')

#Создаем приложение Dash
приложение = тире.Dash(__name__)

# макет
app.layout = html.Div([
    html.H1("Тенденция данных о продажах"),
    dcc.Dropdown(
        id = 'выпадающий список продуктов',
        варианты=[
            {'label': 'Продукт А', 'значение': 'Продукт А'},
            {'label': 'Продукт Б', 'значение': 'Продукт Б'},
            {'label': 'Продукт C', 'value': 'Продукт C'}
        ],
        значение = 'Продукт А'
    ),
    dcc.График(
        id='тренд продаж'
    )
])

# Перезвонить
@app.callback(
    черта.зависимости.Выход('тренд продаж', 'цифра'),
    [dash.dependents.Input('раскрывающийся список продуктов', 'значение')]
)
защита update_trend (выбранный_продукт):
    filtered_df = df[df['Продукт'] == выбранный_продукт]
    fig = px.line(filtered_df, x='Месяц', y='Продажи', title=f'{selected_product}Тенденция продаж')
    вернуть рис

# Запустить приложение
если __name__ == '__main__':
    app.run_server(отладка=Истина)

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

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

Добавьте интерактивности и стиля

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

импортировать тире
из тире импорта dcc, html, callback_context
импортироватьplotly.express как px
импортировать панд как pd

#Читать данные
df = pd.read_csv('sales_data.csv')

# Получите уникальный список продуктов
доступные_продукты = df['Продукт'].unique()

#Создаем приложение Dash
приложение = тире.Dash(__name__)

#Применить стиль
app.layout = html.Div([
    html.H1("Тенденция данных о продажах", style={'textAlign': 'center'}),
    html.Div([
        html.Label("Выберите товар:"),
        dcc.Dropdown(
            id = 'выпадающий список продуктов',
            options=[{'label': продукт, 'значение': продукт} для продукта в доступных_продуктах],
            значение = доступные_продукты [0]
        )
    ], style={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}),
    dcc.График(
        id='тренд продаж',
        config={'displayModeBar': False} # Отключить панель режимов графика
    )
], style={'padding': '20px'})

# Перезвонить
@app.callback(
    черта.зависимости.Выход('тренд продаж', 'цифра'),
    [dash.dependents.Input('раскрывающийся список продуктов', 'значение')]
)
защита update_trend (выбранный_продукт):
    filtered_df = df[df['Продукт'] == выбранный_продукт]
    fig = px.line(filtered_df, x='Месяц', y='Продажи', title=f'{selected_product}Тенденция продаж')
    вернуть рис

# Запустить приложение
если __name__ == '__main__':
    app.run_server(отладка=Истина)

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

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

Развертывание в производственной среде

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

Использование Gunicorn и Nginx

Gunicorn — это HTTP-сервер Python WSGI (HTTP-сервер), который может обрабатывать HTTP-запросы от веб-приложений. Nginx — это высокопроизводительный HTTP-сервер и обратный прокси-сервер, обычно используемый для обработки статических файлов и балансировки нагрузки.

Сначала нам нужно установить Gunicorn и Nginx:

пип установить пистолет
sudo apt-get установить nginx

Далее мы используем Gunicorn для запуска нашего приложения Dash:

Gunicorn -w 4 -b 0.0.0.0:8050 your_app:app

Это запустит сервер Gunicorn локально и запустит приложение Dash на порту 8050. Далее нам нужно настроить Nginx в качестве обратного прокси-сервера для пересылки HTTP-запросов на сервер Gunicorn.

Настроить Nginx

Добавьте следующее содержимое в файл конфигурации Nginx:

сервер {
    слушай 80;
    имя_сервера ваш_домен.com;

    расположение / {
        proxy_pass http://127.0.0.1:8050;
        proxy_redirect выключен;
        proxy_set_header Хост $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Замените your_domain.com своим доменным именем. Затем перезагрузите конфигурацию Nginx:

sudo systemctl перезагрузить nginx

Теперь ваше приложение Dash успешно развернуто в производственной среде, и к нему можно получить доступ через ваше доменное имя.

Используйте HTTPS

Для повышения безопасности мы также можем настроить Nginx на использование протокола HTTPS. Вам необходимо получить сертификат SSL и настроить его в Nginx. Самый простой способ — использовать Let’s Encrypt для получения бесплатного SSL-сертификата. Вот простой пример конфигурации:

сервер {
    слушай 80;
    имя_сервера ваш_домен.com;

    расположение / {
        вернуть 301 https://$host$request_uri;
    }
}

сервер {
    слушать 443 SSL;
    имя_сервера ваш_домен.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    расположение / {
        proxy_pass http://127.0.0.1:8050;
        proxy_redirect выключен;
        proxy_set_header Хост $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

После такой настройки ваше приложение Dash будет обслуживаться по протоколу HTTPS, и все HTTP-запросы будут перенаправляться на HTTPS.

Интегрированная аутентификация пользователей и управление правами

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

Используйте базовую аутентификацию

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

сервер {
    слушать 443 SSL;
    имя_сервера ваш_домен.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    расположение / {
        auth_basic «Ограниченный доступ»;
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:8050;
        proxy_redirect выключен;
        proxy_set_header Хост $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

В этой конфигурации мы включаем базовую аутентификацию с помощью директивы auth_basic и указываем файл паролей /etc/nginx/.htpasswd. Вам нужно использовать инструмент htpasswd, чтобы создать этот файл паролей и добавить в него имя пользователя и пароль.

Использовать аутентификацию OAuth

Другой распространенный метод — использование аутентификации OAuth. С помощью OAuth вы можете делегировать процесс аутентификации пользователя сторонним поставщикам удостоверений, таким как Google, GitHub и т. д. После того как пользователь успешно прошел аутентификацию у стороннего поставщика удостоверений, он сможет получить доступ к вашему приложению.

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

Добавить управление разрешениями

В дополнение к аутентификации вы также можете разрешить пользователям определять, имеют ли они доступ к определенным данным или функциям. Распространенным подходом является реализация в приложении системы управления доступом на основе ролей (RBAC). С помощью RBAC вы можете назначать пользователям разные роли и ограничивать доступ к разным ролям в вашем приложении.

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

Логирование и обработка ошибок

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

Настроить ведение журнала

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

журнал импорта

logging.basicConfig(filename='app.log', level=logging.INFO)

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

Обработка ошибок

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

В приложении Dash вы можете использовать блоки try-Exception для перехвата исключений и возврата страницы с ошибкой или отображения понятного сообщения об ошибке при возникновении исключения.

@app.server.errorhandler (Исключение)
защита handle_error(e):
    logging.error(f'Произошла ошибка: {str(e)}')
    return html.H1("Упс! Что-то пошло не так."), 500

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

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

Мониторинг и оптимизация производительности

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

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

Подведем итог

В этой статье подробно описаны ключевые шаги и необходимые меры для развертывания приложений Dash в производственной среде. Сначала мы обсудили, как развертывать приложения Dash с помощью Gunicorn и Nginx, и показали, как повысить безопасность приложений с помощью протокола HTTPS. Далее мы рассмотрели, как интегрировать системы аутентификации пользователей и управления правами, а также как настроить ведение журнала и обработку ошибок для повышения стабильности и надежности приложений. Наконец, мы подчеркиваем важность мониторинга и оптимизации производительности и предлагаем некоторые инструменты мониторинга и методы оптимизации. Благодаря этим мерам мы можем развернуть приложение Dash в производственной среде, сделать его более устойчивым и надежным в производственной среде и предоставить пользователям высококачественные услуги и опыт.

Нажмите, чтобы подписаться и узнать о новых технологиях Huawei Cloud как можно скорее~