Como criar um menu suspenso em Plotly
Vamos imaginar que você tenha um conjunto de dados com muitas informações organizadas em diferentes colunas, que deseja visualizar. Além disso, o próprio conteúdo pode ser exibido com o mesmo tipo de gráfico, por exemplo, gráfico de barras ou linha, mas não faz sentido exibi-lo de uma só vez. Obviamente, você pode criar vários subplots e visualizá-los um abaixo do outro. Mas isso pode ficar fora de controle se você tiver muitas categorias para exibir. Felizmente, existe uma solução simples para isso, criando um menu suspenso no Plotly. Então, vamos dar uma olhada em como fazê-lo.
Extraindo Dados
Primeiro, precisamos obter os dados. Neste exemplo, coletaremos estatísticas da NBA para jogadores individuais de www.basketball-reference.com . Para simplificar, vamos nos concentrar apenas nos dez melhores jogadores em pontos, rebotes e assistências por jogo:
# Scraping individual stats from www.basketball-reference.com
df = pd.read_html('https://www.basketball-reference.com/leagues/NBA_2023_per_game.html')[0]
# Filtering out irrelevant entries
df = df[df['Player'] != 'Player']
# Converting columns into numeric type if possible
for col in df.columns:
try:
df[col] = pd.to_numeric(df[col])
except:
pass
# Filtering and sorting for categories of interest
df_pts = df[['Player', 'PTS']].sort_values('PTS', ascending=False)[:10]
df_trb = df[['Player', 'TRB']].sort_values('TRB', ascending=False)[:10]
df_ast = df[['Player', 'AST']].sort_values('AST', ascending=False)[:10]
Image: df_pts, df_trb, df_ast
Na próxima etapa, vamos criar um objeto de figura, que contém três gráficos de barras. Cada gráfico de barras representa uma categoria diferente (pontos, rebotes, assistências), que distinguimos criando os três dataframes na etapa anterior. Observe que é importante definir o parâmetro visível apenas para o primeiro gráfico de barras como True e para os outros como false :
# Initializing figure object
fig = go.Figure()
# Adding points bar plot
fig.add_trace(
go.Bar(
y=list(df_pts['Player']),
x=list(df_pts['PTS']),
name='Points',
orientation='h'
)
)
# Adding rebounds bar plot
fig.add_trace(
go.Bar(
y=list(df_trb['Player']),
x=list(df_trb['TRB']),
name='Rebounds',
visible=False,
orientation='h'
)
)
# Adding assists bar plot
fig.add_trace(
go.Bar(
y=list(df_ast['Player']),
x=list(df_ast['AST']),
name='Assists',
visible=False,
orientation='h'
)
)
# Minor layout adjustments
fig.update_layout(title='<b>Top 10 Leaders</b>',
title_x=0.5,
margin=dict(t=50),
yaxis=dict(autorange="reversed", ticksuffix=" ")
)
fig.show()
Image: points bar plot
Agora vamos adicionar o menu suspenso ao objeto figure com o método update_layout . Dentro do parâmetro updatemenus precisamos passar uma lista de dicionários para o parâmetro botões . Cada dicionário especifica o seguinte:
- label: nome que aparece no botão → ex. Pontos
- método: ação a ser executada em um clique → atualizar
- args: lista com um dicionário que define os gráficos visíveis após um clique no respectivo rótulo → [True, False, False] para mostrar apenas o primeiro gráfico de barras que foi adicionado pelo método add_trace na etapa anterior
fig.update_layout(
updatemenus=[
dict(
xanchor='left',
x=-0.15,
yanchor='top',
y=1.1,
active=0,
buttons=list([
dict(label="Points",
method="update",
args=[{"visible": [True, False, False]}]
),
dict(label="Rebounds",
method="update",
args=[{"visible": [False, True, False]}]
),
dict(label="Assists",
method="update",
args=[{"visible": [False, False, True]}]
)
]),
)
])
fig.show()
Image: bar plot with dropdown menu
Neste artigo, expliquei como criar um menu suspenso no Plotly para visualizar várias categorias que estão presentes em diferentes colunas de um dataframe. Isso é especialmente útil se você tiver muitas categorias para exibir, mas não quiser criar um gráfico individual para cada uma. Espero que isso tenha sido útil para você e obrigado pela leitura!
Artigos relacionados
Se você gostou deste artigo, talvez também se interesse pelo seguinte:
Codificação de nível
Obrigado por fazer parte da nossa comunidade! Antes de você ir:
- Bata palmas para a história e siga o autor
- Veja mais conteúdo na publicação Level Up Coding
- Curso gratuito de entrevista de codificação ⇒ Veja o curso
- Siga-nos: Twitter | Linkedin | Boletim de Notícias





































![O que é uma lista vinculada, afinal? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)