Interactividad entre elementos

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

¿Qué es entre elementos?

Antes: interactuar con un input para cambiar una figura
Ahora: interactuar con una figura para cambiar otra figura

Dos casos de uso:
- Pasar el ratón sobre una figura
- Clic en un punto de datos

La propiedad hoverData

# Crear figura y layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

# Configurar un callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

Primer hover

Qué pasa:

Al pasar el ratón: cambia hoverData de la figura
El callback lo envía al tag .P()
Vemos info del punto

Un GIF de un gráfico de barras horizontal de ventas totales (eje x) vs. país (eje y) con el texto "hover data" debajo que muestra "none". Al pasar el ratón sobre la barra inferior, Australia, el texto cambia a un diccionario con detalles del punto, incluido el país y el valor.

Cuidado con lo que falta

Objetivo: usar "country" en el callback (filtrar y regenerar un gráfico)
- En el ejemplo anterior: en hoverData
Mira este scatter (tipo de gráfico e IDs actualizados)
- ¡No hay país!

Un GIF de un diagrama de dispersión de ventas totales (eje x) vs. volumen de ventas (eje y) donde cada punto es un país distinto, con el texto "hover data" debajo que muestra "none". Al pasar el ratón sobre un punto, Australia, el texto cambia a un diccionario con detalles del punto, incluidos dos valores, pero no contiene la palabra Australia.

Añadir datos personalizados

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

Ahora customData incluye el país.

Un GIF de un diagrama de dispersión de ventas totales (eje x) vs. volumen de ventas (eje y) donde cada punto es un país distinto, con el texto "hover data" debajo que muestra "none". Al pasar el ratón sobre un punto, Australia, el texto cambia a un diccionario con los detalles del punto, incluidos los dos valores y, esta vez, en la propiedad customdata aparece la palabra Australia

¿Y al hacer clic?

También puedes lanzar un callback al hacer clic en un punto
- Solo cambia una cosa (propiedad clickData)

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

Ojo: No aparece hasta que haces clic

Un GIF de un gráfico de barras horizontal de ventas totales (eje x) vs. país (eje y) con el texto "hover data" debajo que muestra "none". Al pasar el ratón sobre la barra inferior, Australia, el texto no cambia. Cuando se hace clic en esa barra, "none" cambia a un diccionario con detalles del punto, incluido el país y el valor.

¡Vamos a practicar!

Creación de paneles con Dash y Plotly