Interactions entre éléments

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Qu'est-ce que « between-element » ?

Avant : interagir avec un input pour modifier une figure
Maintenant : interagir avec une figure pour en modifier une autre

Deux cas d'usage :
- Survol d'une figure
- Clic sur un point de données

La propriété hoverData

# Create figure and layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

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

# Set up a callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

Notre premier survol

Que se passe-t-il :

Au survol : la propriété hoverData de la figure change
Le callback la transmet au tag .P()
On voit les infos liées au point

Un gif d'un histogramme horizontal des ventes totales (axe x) par pays (axe y) avec le texte « hover data » en dessous, affichant « none ». Quand la souris survole la barre du bas (Australie), « none » devient un dictionnaire décrivant le point survolé, incluant l'étiquette du pays et la valeur.

Attention aux infos manquantes

Objectif : utiliser « country » dans le callback (filtrer et régénérer un graphique)
- Exemple précédent : présent dans hoverData
Regardez ce nuage de points (type et ID mis à jour)
- Le pays n'y est pas !

Un gif d'un nuage de points des ventes totales (axe x) vs. volume des ventes (axe y) où chaque point représente un pays, avec le texte « hover data » en dessous affichant « none ». Quand la souris survole un point (Australie), « none » devient un dictionnaire décrivant le point, incluant deux valeurs, mais sans le mot Australia.

Ajouter des données personnalisées

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

Désormais, customData contient le pays !

Un gif d'un nuage de points des ventes totales (axe x) vs. volume des ventes (axe y) où chaque point est un pays, avec le texte « hover data » en dessous affichant « none ». Quand la souris survole un point (Australie), « none » devient un dictionnaire décrivant le point, incluant les deux valeurs et, cette fois, dans la propriété customdata, le mot Australia.

Et le clic ?

On peut aussi déclencher un callback au clic sur un point
- Un seul changement : propriété clickData

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

Remarque : rien n'apparaît tant qu'on n'a pas cliqué

Un gif d'un histogramme horizontal des ventes totales (axe x) par pays (axe y) avec le texte « hover data » en dessous affichant « none ». Quand la souris survole la barre Australie, « none » ne change pas. Au clic sur cette barre, « None » devient un dictionnaire décrivant le point, incluant l'étiquette du pays et la valeur.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly