Od Plotly k Dash

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

První Dash aplikace

Kompletní Dash aplikace:

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

Možnosti Pythonu jsou zachovány
- např. interpolace řetězců print("f{my_variable}")

Hlavní importy Dash

from dash import Dash, dcc

Dash inicializuje aplikaci
dcc obsahuje UI komponenty, jako jsou grafy a vstupy
- V naší aplikaci jedna komponenta
- Další komponenty v průběhu kurzu

Rozložení aplikace

app = Dash()

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

Vytvoření objektu aplikace pomocí Dash()
Nastavení app.layout
- Pomocí dcc.Graph()
  - figure = Plotly graf k zobrazení
  - id = Důležité pro callbacky

Spuštění aplikace

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

Skript se spouští z příkazové řádky
- tj. python my_app.py v příkazové řádce
debug pro zpětnou vazbu při testování

Naše aplikace

Přístup přes webový prohlížeč, např. Google Chrome
Po spuštění upravte a uložte soubor .py – změny se zobrazí v prohlížeči živě

Snímek obrazovky terminálu po spuštění Dash aplikace. Bílý text na černém pozadí zobrazuje příslušné informace.

Naše aplikace v prohlížeči

Animace vodorovného sloupcového grafu celkových prodejů na ose x podle zemí na ose y. Stejný graf jako v předchozí lekci, nyní v prohlížeči Chrome s adresou serveru v adresním řádku. Myš se pohybuje nad grafem a klikne do adresního řádku, aby ukázala přítomnost serveru.

Dash v DataCampu

Několik rozdílů oproti jiným cvičením v DataCampu:
- Inicializační řádky na začátku cvičení.
- Vše se spouští najednou (ne řádek po řádku)
- (Výrazně) delší kód
Plně funkční dashboardy (rozbalte okno pro zobrazení!)

Snímek obrazovky horní části Dash cvičení po spuštění, se zvýrazněným tlačítkem pro rozbalení HTML výstupu na celou obrazovku.

Pojďme procvičovat!

Tvorba dashboardů s Dash a Plotly