Callbacks en Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

¿Qué son los callbacks?

Funcionalidad por interacción
- La persona usuaria interactúa con un elemento
  - -> Se ejecuta una función de Python
    - --> Algo cambia

¿Por qué? Aumenta la interactividad ✨

Callbacks en Dash

Empieza con la función decorator
- Usa from dash import Input, Output
Output: dónde enviar el return de la función
- component_id: identifica el componente
- component_property: qué se cambiará
Input: qué dispara el callback
- component_property: qué usar en la función

@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

Desplegables en Dash

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

Lista de valores

Un callback con desplegable

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

Nuestro primer desplegable

Un GIF de un navegador Chrome con un gráfico de barras de ventas totales (eje x) por país (eje y) y un menú desplegable arriba con opciones Title 1 y Title 2. El GIF muestra el ratón seleccionando cada una y el título del gráfico cambia al valor del desplegable

Desplegable como filtro

Caso común: el desplegable filtra el DataFrame de la gráfica

# @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

El filtro en acción

Un GIF de un navegador Chrome con un gráfico de barras de ventas totales (eje x) por país (eje y) y un menú desplegable arriba con nombres de países. El GIF muestra el ratón eligiendo cada uno; el título cambia al valor y el gráfico se filtra a una sola barra

¡Vamos a practicar!

Creación de paneles con Dash y Plotly