Від 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 є UI‑компоненти, як‑от графіки та поля введення
- Один компонент у нашому застосунку
- Більше компонентів далі в курсі

Компонування застосунку

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. Білий текст на чорному тлі з показаними деталями зі скрипту.

Наш застосунок у браузері

GIF із горизонтальною стовпчиковою діаграмою: на осі x — загальні продажі, на осі y — країни. Це той самий графік, що й у попередньому уроці, але в браузері Chrome; у рядку адреси видно адресу сервера. Курсор наводить на графік і клацає в рядок URL, щоб показати наявність сервера.

Dash у DataCamp

Деякі відмінності від інших вправ DataCamp:
- Рядки налаштування на початку вправ.
- Усе виконується одразу (не покроково)
- Значно довший код
Повноцінні дашборди (розгорніть вікно, щоб побачити!)

Знімок верхньої частини вправи з кодування на Dash після запуску. Підсвічено кнопку для розгортання HTML‑виводу, щоб переглянути застосунок на весь екран.

Давайте потренуємось!

Створення дашбордів з Dash і Plotly