Interaktivita mezi prvky

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

Co je interaktivita mezi prvky?

Dříve: Interakce se vstupem vyvolá změnu v grafu
Nyní: Interakce s grafem vyvolá změnu v jiném grafu

Dva případy použití:
- Najetí myší na graf
- Kliknutí na datový bod

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

První hover

Co se děje:

Najetí myší: vlastnost hoverData grafu se změní
Callback předá tuto hodnotu do tagu .P()
Zobrazí se informace o daném bodu

Animace vodorovného sloupcového grafu celkových tržeb (osa x) vs. země (osa y). Pod grafem je text „hover data" s hodnotou „none". Po najetí myší na sloupec Austrálie se hodnota none změní na slovník s podrobnostmi o daném bodu, včetně názvu země a hodnoty.

Pozor na chybějící informace

Cíl: Použít „country" v callbacku (filtrovat a znovu vykreslit graf)
- Předchozí příklad – v hoverData
Bodový graf (aktualizovaný typ a ID)
- Název země chybí!

Animace bodového grafu celkových tržeb (osa x) vs. objemu prodeje (osa y), kde každý bod představuje jinou zemi. Pod grafem je text „hover data" s hodnotou „none". Po najetí myší na bod Austrálie se hodnota none změní na slovník s podrobnostmi o daném bodu, včetně dvou hodnot, ale název Australia není uveden.

Přidání vlastních dat

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

Nyní customData obsahuje název země!

Co kliknutí?

Callback lze spustit také kliknutím na bod
- Stačí jedna změna (vlastnost clickData)

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

Pozor: nezobrazí se okamžitě

Animace vodorovného sloupcového grafu celkových tržeb (osa x) vs. země (osa y). Pod grafem je text „hover data" s hodnotou „none". Při najetí myší na sloupec Austrálie se hodnota none nemění. Po kliknutí na sloupec se hodnota None změní na slovník s podrobnostmi o daném bodu, včetně názvu země a hodnoty.

Let's practice!

Tvorba dashboardů s Dash a Plotly