Interatividade entre elementos

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

O que é entre-elementos?

Antes: interagir com o input para mudar uma figura
Agora: interagir com a figura para mudar outra figura

Dois casos de uso:
- Passar o mouse sobre uma figura
- Clicar em um ponto de dados

A propriedade 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)

Nosso primeiro hover

O que acontece:

Ao passar o mouse: a propriedade hoverData da figura muda
O callback recebe e devolve isso para a tag .P()
Dá para ver informações do ponto

Um gif de um gráfico de barras horizontal de vendas totais (eixo x) vs. Country (eixo y) com o texto "hover data" abaixo, que mostra a palavra "none". Ao passar o mouse sobre a barra de Australia, o texto muda para um dicionário com detalhes do ponto, incluindo o rótulo do país e o valor.

Atenção a informações ausentes

Objetivo: usar 'country' no callback (filtrar e recriar um gráfico)
- Exemplo anterior — em hoverData
Veja este gráfico de dispersão (tipo e IDs atualizados)
- Não tem country!

Um gif de um gráfico de dispersão de vendas totais (eixo x) vs. volume de vendas (eixo y) em que cada ponto é um país, com o texto "hover data" abaixo mostrando "none". Ao passar o mouse sobre um ponto de Australia, o texto muda para um dicionário com detalhes do ponto, incluindo dois valores, mas sem a palavra Australia.

Adicionando dados personalizados

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

Agora customData inclui o país!

E ao clicar?

Também dá para acionar um callback ao clicar em um ponto
- Só uma mudança necessária (propriedade clickData)

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

Observação: não aparece imediatamente

Um gif de um gráfico de barras horizontal de vendas totais (eixo x) vs. Country (eixo y) com o texto "hover data" abaixo mostrando "none". Ao passar o mouse sobre a barra de Australia, o texto não muda. Quando se clica nessa barra, "None" muda para um dicionário com detalhes do ponto, incluindo o rótulo do país e o valor.

Vamos praticar!

Construindo Dashboards com Dash e Plotly