Interaktivität zwischen Elementen

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Was heißt zwischen Elementen?

Bisher: Mit input interagieren, um eine Abbildung zu ändern
Jetzt: Mit einer Abbildung interagieren, um eine andere zu ändern

Zwei Anwendungsfälle:
- Über einer Abbildung hovern
- Auf einen Datenpunkt klicken

Die Eigenschaft 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)

Unser erstes Hover

So läuft es ab:

User hovert: Die Eigenschaft hoverData der Abbildung ändert sich
Callback nimmt sie und gibt sie an das .P()-Tag zurück
So sehen wir punktbezogene Infos

Ein GIF eines horizontalen Balkendiagramms der Gesamterlöse (x-Achse) vs. Country (y-Achse) mit dem Text „hover data" darunter, darunter steht „none". Wenn die Maus über den unteren Balken für Australia fährt, ändert sich „none" zu einem Dictionary mit Details zum betreffenden Punkt, einschließlich Länderlabel und Wert.

Achtung fehlende Infos

Ziel: „country" im Callback nutzen (filtern und ein Diagramm neu erzeugen)
- Vorheriges Beispiel – in hoverData
Sieh dir dieses Scatter-Plot an (Diagrammtyp und relevante IDs aktualisiert)
- Es gibt kein Country!

Ein GIF eines Streudiagramms der Gesamterlöse (x-Achse) vs. Verkaufsvolumen (y-Achse), bei dem die Punkte je ein anderes Land sind, mit dem Text „hover data" darunter, darunter steht „none". Wenn die Maus über einen Punkt für Australia fährt, ändert sich „none" zu einem Dictionary mit Details zum Punkt, enthält aber entscheidend nicht das Wort Australia.

Eigene Daten hinzufügen

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

Jetzt enthält customData das Land!

Ein GIF eines Streudiagramms der Gesamterlöse (x-Achse) vs. Verkaufsvolumen (y-Achse), bei dem die Punkte je ein anderes Land sind, mit dem Text „hover data" darunter, darunter steht „none". Wenn die Maus über einen Punkt für Australia fährt, ändert sich „none" zu einem Dictionary mit Details zum Punkt; diesmal steht im customdata-Property das Wort Australia.

Und beim Klicken?

Du kannst auch einen Callback auslösen, wenn auf einen Punkt geklickt wird
- Nur eine Änderung nötig (Eigenschaft clickData)

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

Beachte: Erscheint nicht sofort

Ein GIF eines horizontalen Balkendiagramms der Gesamterlöse (x-Achse) vs. Country (y-Achse) mit dem Text „hover data" darunter, darunter steht „none". Wenn die Maus über den unteren Balken für Australia fährt, ändert sich „none" nicht. Erst beim Klicken auf diesen Balken wechselt „None" zu einem Dictionary mit Details zum Punkt, einschließlich Länderlabel und Wert.

Lass uns üben!

Dashboards mit Dash und Plotly erstellen