Interaktivitet mellan element

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Vad är interaktivitet mellan element?

Tidigare: Interagera med indata för att utlösa förändring i en figur
Nu: Interagera med figuren för att utlösa förändring i en annan figur

Två användningsfall:
- Hovra över en figur
- Klicka på en datapunkt

Egenskapen 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)

Vår första hover

Vad händer:

Användaren hovrar: figurens hoverData-egenskap uppdateras
Callback tar emot och skickar detta till .P()-taggen
Vi kan se information om den aktuella punkten

En gif av ett horisontellt stapeldiagram över total försäljning (x-axel) mot land (y-axel) med texten "hover data" nedanför, och ordet "none" under den. När muspekaren hovrar över det nedersta strecket, för Australien, ändras texten none till en ordbok med uppgifter om den hovrade punkten, inklusive landets etikett och värdet.

Se upp för saknad information

Mål: Använd 'country' i callback (filtrera och återskapa ett diagram)
- Tidigare exempel – finns i hoverData
Se detta spridningsdiagram (diagramtyp och relevanta ID:n uppdaterade)
- Inget land finns med!

En gif av ett spridningsdiagram över total försäljning (x-axel) mot försäljningsvolym (y-axel) där varje punkt representerar ett land, med texten "hover data" nedanför och ordet "none" under den. När muspekaren hovrar över en punkt, för Australien, ändras texten none till en ordbok med uppgifter om punkten inklusive två värden, men ordet Australien saknas.

Lägga till anpassad data

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

Nu innehåller customData landet!

Vad händer vid klick?

Kan även utlösa en callback när en punkt klickas
- Bara en ändring krävs (egenskapen clickData)

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

Observera: visades inte direkt

En gif av ett horisontellt stapeldiagram över total försäljning (x-axel) mot land (y-axel) med texten "hover data" nedanför och ordet "none" under den. När muspekaren hovrar över det nedersta strecket, för Australien, ändras inte texten none. När muspekaren klickar på strecket ändras ordet None till en ordbok med uppgifter om den klickade punkten, inklusive landets etikett och värdet.

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly