Interattività tra elementi

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Che cos'è l'interazione tra elementi?

Prima: interagire con un input per cambiare una figura
Ora: interagire con una figura per cambiare un'altra figura

Due casi d'uso:
- Passaggio del mouse su una figura
- Clic su un punto dati

La proprietà hoverData

# Crea la figura e il layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

# Imposta una callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

Il nostro primo hover

Cosa succede:

Quando passi il mouse: la proprietà hoverData della figura cambia
La callback la prende e la restituisce al tag .P()
Si vedono info sul punto

Una gif di un grafico a barre orizzontali delle vendite totali (asse x) vs. Country (asse y) con il testo "hover data" sotto, che ha la parola "none" sotto. Quando il mouse passa sulla barra in basso, per Australia, "none" cambia in un dizionario con i dettagli del punto su cui si è passati, incluso l'etichetta del paese e il valore.

Attenzione alle info mancanti

Obiettivo: usare "country" nella callback (filtrare e rigenerare un grafico)
- Esempio precedente: in hoverData
Guarda questo scatter plot (tipo di grafico e ID aggiornati)
- Non c'è il country!

Una gif di uno scatter plot delle vendite totali (asse x) vs. volume di vendite (asse y) dove i punti sono ciascuno un paese, con il testo "hover data" sotto che ha la parola "none" sotto. Quando il mouse passa su un punto, per Australia, "none" cambia in un dizionario con i dettagli del punto, inclusi i due valori, ma non contiene la parola Australia

Aggiungere dati personalizzati

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])

Ora customData contiene il country!

E il clic?

Puoi anche attivare una callback con un clic su un punto
- Serve solo una modifica (proprietà clickData)

@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)

Nota: non appare subito

Una gif di un grafico a barre orizzontali delle vendite totali (asse x) vs. Country (asse y) con il testo "hover data" sotto che ha la parola "none" sotto. Quando il mouse passa sulla barra in basso, per Australia, il testo non cambia. Quando si fa clic su questa barra, "none" cambia in un dizionario con i dettagli del punto su cui si è fatto clic, incluso l'etichetta del paese e il valore.

Esercitiamoci!

Creare dashboard con Dash e Plotly