Interactivité entre éléments

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

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

Précédemment : interagir avec un input pour modifier une figure
Maintenant : interagir avec une figure pour modifier une autre figure

Deux cas d'usage :
- Survoler une figure
- Cliquer 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

Ce qui se passe :

L'utilisateur survole : la propriété hoverData de la figure change
Le rappel la récupère et l'envoie à la balise .P()
On voit l'info liée au point

Un GIF d'un diagramme à barres horizontal des ventes totales (axe des x) selon le pays (axe des y) avec le texte « hover data » dessous, affichant « none ». Quand la souris survole la barre pour Australia, « none » devient un dictionnaire contenant les détails du point survolé, dont l'étiquette du pays et la valeur.

Attention aux infos manquantes

Objectif : utiliser « country » dans le rappel (filtrer et régénérer un graphique)
- Exemple précédent – dans hoverData
Voici un nuage de points (type et ID mis à jour)
- Il n'y a pas de pays !

Un GIF d'un nuage de points des ventes totales (axe des x) selon le volume des ventes (axe des y) où chaque point représente un pays, avec le texte « hover data » dessous affichant « none ». Quand la souris survole un point, pour Australia, « none » devient un dictionnaire avec les 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'])

Maintenant, customData contient le pays !

Et le clic ?

On peut aussi déclencher un rappel lors d'un clic sur un point
- Un seul changement : la propriété clickData

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

À noter : rien n'apparaît tant qu'on ne clique pas

Un GIF d'un diagramme à barres horizontal des ventes totales (axe des x) selon le pays (axe des y) avec le texte « hover data » dessous affichant « none ». Quand la souris survole la barre pour Australia, le texte ne change pas. Au clic sur cette barre, « None » devient un dictionnaire contenant les détails du point, dont l'étiquette du pays et la valeur.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly