Interaktywność między elementami

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Co to jest interaktywność między elementami?

Poprzednio: interakcja z wejściem wywołuje zmianę na wykresie
Teraz: interakcja z wykresem wywołuje zmianę w innym wykresie

Dwa przypadki użycia:
- Najechanie kursorem na wykres
- Kliknięcie punktu danych

Właściwość 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)

Pierwsze najechanie kursorem

Co się dzieje:

Użytkownik najeżdża: właściwość hoverData wykresu zmienia się
Callback pobiera tę wartość i zwraca ją do tagu .P()
Wyświetlane są informacje o punkcie

Animacja poziomego wykresu słupkowego z całkowitą sprzedażą (oś x) i krajem (oś y) oraz napisem „hover data" z wartością „none". Po najechaniu na słupek Australii wartość „none" zmienia się na słownik zawierający szczegóły punktu, w tym etykietę kraju i wartość.

Uwaga na brakujące dane

Cel: użycie "kraju" w callbacku (filtrowanie i regenerowanie wykresu)
- Poprzedni przykład – w hoverData
Ten wykres punktowy (zaktualizowany typ i identyfikatory)
- Brak kraju!

Animacja wykresu punktowego z całkowitą sprzedażą (oś x) i wolumenem sprzedaży (oś y), gdzie punkty odpowiadają krajom. Poniżej widnieje napis „hover data" z wartością „none". Po najechaniu na punkt Australii wartość „none" zmienia się na słownik z detalami punktu, ale nie zawiera słowa Australia.

Dodawanie niestandardowych danych

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

Teraz customData zawiera kraj!

Animacja wykresu punktowego z całkowitą sprzedażą (oś x) i wolumenem sprzedaży (oś y), gdzie punkty odpowiadają krajom. Poniżej widnieje napis „hover data" z wartością „none". Po najechaniu na punkt Australii wartość „none" zmienia się na słownik zawierający szczegóły punktu, a właściwość customdata zawiera słowo Australia

A co z kliknięciem?

Callback można też wyzwolić kliknięciem punktu
- Wymagana tylko jedna zmiana (właściwość clickData)

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

Uwaga: dane nie pojawiają się natychmiast

Animacja poziomego wykresu słupkowego z całkowitą sprzedażą (oś x) i krajem (oś y) oraz napisem „hover data" z wartością „none". Po najechaniu na słupek Australii wartość nie zmienia się. Po kliknięciu słupka wartość „None" zmienia się na słownik zawierający szczegóły punktu, w tym etykietę kraju i wartość.

Ćwiczmy!

Tworzenie dashboardów z Dash i Plotly