Da Plotly a Dash

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

La prima app Dash

Un'app Dash completa:

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

Funzionalità Python possibili
- es.: Interpolazione di stringhe print("f{my_variable}")

Gli import principali di Dash

from dash import Dash, dcc

Dash inizializza l'app
dcc ha componenti UI come grafici e input
- Un componente nella nostra app
- Altri componenti nel corso

Il layout dell'app

app = Dash()

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

Crea un oggetto app con Dash()
Imposta app.layout
- Usando dcc.Graph()
  - figure = la figura Plotly da renderizzare
  - id = Importante per i callback più avanti

Eseguire l'app

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

Lo script viene eseguito da riga di comando
- cioè python my_app.py nella riga di comando
debug per feedback durante i test

La nostra app

Accedi con un browser come Google Chrome
Mentre il server è attivo, aggiorna e salva il file .py per vedere gli aggiornamenti live nel browser

Uno screenshot di ciò che si vede in un terminale quando un'app Dash è in esecuzione. Testo bianco su sfondo nero mostra i dettagli indicati nello script.

La nostra app nel browser

Una GIF di un grafico a barre orizzontali delle vendite totali sull'asse x per paese sull'asse y. È lo stesso grafico della lezione precedente; è in un browser Chrome e nella barra degli URL si vede l'indirizzo del server. Il mouse passa sul grafico e clicca nella barra degli URL per mostrare che il server è attivo.

Dash in DataCamp

Alcune differenze rispetto agli altri esercizi DataCamp:
- Righe di setup in cima agli esercizi.
- Tutto eseguito in una volta (non riga per riga)
- Codice (ben) più lungo
Dashboard pienamente funzionanti (espandi la finestra per vederli!)

Uno screenshot della parte superiore di un esercizio di coding Dash eseguito, che evidenzia il pulsante per espandere l'output HTML così da vedere l'app a schermo intero.

Esercitiamoci!

Creare dashboard con Dash e Plotly