Callbacks in Dash

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Wat zijn callbacks?

Functionaliteit getriggerd door interactie
- Een gebruiker interacteert met een element
  - -> Een Python-functie wordt gestart
    - --> Iets verandert

Waarom? Maakt het interactief ✨

Callbacks in Dash

Begin met de decorator
- Gebruik from dash import Input, Output
Output: waar de return heen gaat
- component_id: welk component
- component_property: wat wordt aangepast
Input: wat de callback triggert
- component_property: wat te gebruiken in de functie

@callback(

   Output(component_id='my_plot', 
          component_property='figure'),

   Input(component_id='my_input', 
          component_property='value')

)

def some_function(data):
    # Subset Data
    # Recreate Figure
    return fig

Dropdowns in Dash

dcc.Dropdown(id='title_dd',
             options=['Title 1', 'Title 2'])

Lijst met waarden

Een dropdown-callback

app.layout =[

  dcc.Dropdown(id='title_dd',
      options=['Title 1', 'Title 2']),

  dcc.Graph(id='my_graph')])

@callback(
    Output(component_id='my_graph', 
           component_property='figure'),

    Input(component_id='title_dd', 
           component_property='value')
)

# @callback()
def update_plot(selection):
    title = "None Selected"
    if selection:
        title = selection

    bar_fig = px.bar(
      data_frame=ecom_sales, 
      title=f'{title}',
      x='Total Sales ($)', y='Country')

  return bar_fig

Onze eerste dropdown

Een gif van een Chrome-browser met een staafdiagram van totale omzet (x-as) en land (y-as) met erboven een dropdown met opties Title 1 en Title 2. De gif laat zien dat de muis deze selecteert en dat de grafiektitel wijzigt naar de dropdownwaarde

Dropdown als filter

Veelvoorkomend: dropdown filtert de plot-DataFrame

# @callback()
def update_plot(input_country):
    country = 'All Countries'

    sales = ecom_sales.copy(deep=True)

    if input_country:
        country = input_country
        sales = sales[sales['Country'] == country]

        bar_fig = px.bar(
            data_frame=sales, title=f"Sales in {country}",
            x='Total Sales ($)', y='Country')
    return bar_fig

De filter in actie

Een gif van een Chrome-browser met een staafdiagram van totale omzet (x-as) en land (y-as) met erboven een dropdown met landnamen. De gif laat zien dat de muis landen selecteert; de grafiektitel verandert mee en de grafiek filtert naar één staaf

Laten we oefenen!

Dashboards bouwen met Dash en Plotly