Interactivitate între elemente

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Ce înseamnă interactivitate între elemente?

Anterior: Interacțiune cu input pentru a modifica un grafic
Acum: Interacțiune cu graficul pentru a modifica alt grafic

Două scenarii:
- Trecerea mouse-ului peste un grafic
- Clic pe un punct de date

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

Primul hover

Ce se întâmplă:

Utilizatorul trece cu mouse-ul: proprietatea hoverData a graficului se modifică
Callback-ul preia și returnează aceasta către tag-ul .P()
Putem vedea informații despre punct

Un gif cu un grafic cu bare orizontale al vânzărilor totale (axa x) față de țară (axa y), cu textul „date hover" dedesubt și cuvântul „none" sub acesta. La trecerea mouse-ului peste bara de jos (Australia), „none" se schimbă într-un dicționar cu detalii despre punctul respectiv, inclusiv eticheta țării și valoarea.

Atenție la informațiile lipsă

Scop: Utilizarea „country" în callback (filtrare și regenerare grafic)
- Exemplul anterior - în hoverData
Grafic scatter (tip și ID-uri actualizate)
- Țara lipsește!

Un gif cu un grafic scatter al vânzărilor totale (axa x) față de volumul vânzărilor (axa y), fiecare punct reprezentând o țară, cu textul „date hover" dedesubt și cuvântul „none" sub acesta. La trecerea mouse-ului peste un punct (Australia), „none" se schimbă într-un dicționar cu detalii despre punctul respectiv, inclusiv două valori, dar fără cuvântul Australia

Adăugarea datelor personalizate

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

Acum customData conține țara!

Un gif cu un grafic scatter al vânzărilor totale (axa x) față de volumul vânzărilor (axa y), fiecare punct reprezentând o țară, cu textul „date hover" dedesubt și cuvântul „none" sub acesta. La trecerea mouse-ului peste un punct pentru Australia, „none" se schimbă într-un dicționar cu detalii despre punctul respectiv, inclusiv două valori și, în proprietatea customdata, cuvântul Australia

Ce se întâmplă la clic?

Se poate declanșa un callback și la clic pe un punct
- O singură modificare necesară (proprietatea clickData)

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

Atenție: Nu apare imediat

Un gif cu un grafic cu bare orizontale al vânzărilor totale (axa x) față de țară (axa y), cu textul „date hover" dedesubt și cuvântul „none" sub acesta. La trecerea mouse-ului peste bara de jos (Australia), textul nu se schimbă. La clic pe această bară, „None" se schimbă într-un dicționar cu detalii despre punctul respectiv, inclusiv eticheta țării și valoarea.

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly