Van Plotly naar Dash

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Een eerste Dash-app

Een complete Dash-app:

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-functionaliteit mogelijk
- bijv. Stringinterpolatie print("f{my_variable}")

De belangrijkste Dash-imports

from dash import Dash, dcc

Dash initialiseert de app
dcc bevat UI-componenten zoals grafieken en inputs
- Eén component in onze app
- Meer componenten later in de course

De app-layout

app = Dash()

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

Maak een app-object met Dash()
Stel app.layout in
- Met dcc.Graph()
  - figure = de Plotly-figure om te tonen
  - id = belangrijk voor callbacks later

De app draaien

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

Script wordt vanuit de command line gedraaid
- dus: python my_app.py in de command line
debug geeft feedback tijdens testen

Onze app

Toegang via een browser zoals Google Chrome
Terwijl de server draait, de .py-file updaten en opslaan om live updates te zien in de browser

Een screenshot van de terminal nadat een Dash-app is gestart. Witte tekst op zwarte achtergrond toont de details uit het script.

Onze app in de browser

Een gif van een horizontale staafgrafiek: totale omzet op de x-as per land op de y-as. Hetzelfde als in de vorige les, maar nu in een Chrome-browser met een serveradres in de URL-balk. De muis hovert over de grafiek en klikt in de URL-balk om te tonen dat de server actief is.

Dash in DataCamp

Enkele verschillen met andere DataCamp-oefeningen:
- Setuplijnen bovenaan de oefening
- Alles wordt in één keer uitgevoerd (niet regel-voor-regel)
- (Veel) langere code
Volwaardige dashboards (vergroot het venster!)

Een screenshot van de bovenkant van een Dash-codeoefening na het runnen, met de knop gemarkeerd om de HTML-output te vergroten en de app fullscreen te bekijken.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly