Interactie tussen elementen

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Wat is tussen-element?

Eerder: Interactie met een input triggert wijziging in een figuur
Nu: Interactie met een figuur triggert wijziging in een andere figuur

Twee use-cases:
- Hoveren over een figuur
- Klikken op een datapunt

De eigenschap hoverData

# Figuur en layout maken
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("De hover data:"),
   html.P(id='text_output')

# Callback instellen 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

Onze eerste hover

Wat gebeurt er:

Gebruiker hovert: hoverData van de figuur verandert
Callback leest dit en zet het in de .P()-tag
Je ziet info over het punt

Een gif van een horizontale staafgrafiek van totale omzet (x-as) vs. land (y-as) met de tekst "hover data" eronder, met "none" daaronder. Als de muis over de onderste balk (Australië) gaat, verandert none in een dictionary met details over het gehoverde punt, inclusief het landlabel en de waarde.

Let op ontbrekende info

Doel: 'country' in de callback gebruiken (filteren en grafiek vernieuwen)
- Vorig voorbeeld - in hoverData
Zie deze scatterplot (type grafiek en relevante ID's aangepast)
- Het land ontbreekt!

Een gif van een spreidingsdiagram van totale omzet (x-as) vs. verkoopvolume (y-as) met punten per land en de tekst "hover data" eronder met "none". Wanneer de muis over een punt (Australië) gaat, verandert none in een dictionary met details over het punt, inclusief twee waarden, maar cruciaal: het bevat niet het woord Australia

Custom data toevoegen

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

Nu bevat customData het land!

Een gif van een spreidingsdiagram van totale omzet (x-as) vs. verkoopvolume (y-as) met punten per land en de tekst "hover data" eronder met "none". Wanneer de muis over een punt (Australië) gaat, verandert none in een dictionary met details over het punt, inclusief de twee waarden en ditmaal staat in de customdata-eigenschap het woord Australia

En klikken?

Je kunt ook een callback triggeren bij een klik
- Slechts één wijziging nodig (clickData-eigenschap)

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

Let op: verscheen niet direct

Een gif van een horizontale staafgrafiek van totale omzet (x-as) vs. land (y-as) met de tekst "hover data" eronder met "none". Als de muis over de onderste balk (Australië) gaat, verandert none niet. Bij een klik op deze balk verandert None in een dictionary met details over het aangeklikte punt, inclusief het landlabel en de waarde.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly