От Plotly к Dash

Создание дашбордов с помощью Dash и Plotly

Alex Scriven

Data Scientist

Первое приложение Dash

Полное приложение Dash:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Доступны возможности Python
- Например, интерполяция строк print("f{my_variable}")

Основные импорты Dash

from dash import Dash, dcc

Dash инициализирует приложение
dcc содержит компоненты интерфейса: графики, поля ввода
- В нашем приложении — один компонент
- В курсе будет больше компонентов

Макет приложения

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Создайте объект приложения с помощью Dash()
Задайте app.layout
- С помощью dcc.Graph()
  - figure — фигура Plotly для отображения
  - id — важен для обратных вызовов

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

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

Скрипт запускается из командной строки
- Например, python my_app.py в командной строке
debug — для обратной связи при тестировании

Наше приложение

Откройте приложение в браузере, например в Google Chrome
Пока сервер работает, сохраняйте изменения в файле .py — обновления сразу отобразятся в браузере

Снимок экрана: вид терминала после запуска приложения Dash. Белый текст на чёрном фоне с информацией, упомянутой в описании.

Наше приложение в браузере

Анимация горизонтальной столбчатой диаграммы: по оси X — общий объём продаж, по оси Y — страны. График тот же, что и на предыдущем уроке, но теперь открыт в браузере Chrome: в адресной строке виден адрес сервера. Курсор наводится на график и нажимает на адресную строку, демонстрируя работу сервера.

Dash в DataCamp

Отличия от обычных упражнений DataCamp:
- Вводный блок настройки в начале упражнений.
- Весь код выполняется сразу (не построчно)
- (Значительно) больший объём кода
Полноценные дашборды (разверните окно, чтобы увидеть!)

Снимок экрана верхней части упражнения Dash после запуска: выделена кнопка для развёртывания HTML-вывода на весь экран.

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly