Cara Membuat Menu Dropdown Di Plotly
Bayangkan Anda memiliki kumpulan data dengan banyak informasi yang diatur dalam kolom berbeda, yang ingin Anda visualisasikan. Selain itu, konten itu sendiri dapat ditampilkan dengan tipe plot yang sama, misalnya plot garis atau garis, tetapi tidak masuk akal untuk menampilkannya sekaligus. Jelas, Anda dapat membuat beberapa subplot dan memvisualisasikannya satu di bawah yang lain. Tapi itu mungkin tidak terkendali jika Anda memiliki terlalu banyak kategori untuk ditampilkan. Untungnya, ada solusi sederhana untuk itu dengan membuat menu tarik-turun di Plotly. Jadi mari kita lihat bagaimana melakukannya.
Menggores Data
Pertama, kita perlu mendapatkan datanya. Dalam contoh ini, kami akan menghapus statistik NBA untuk masing-masing pemain dari www.basketball-reference.com . Sederhananya, kami hanya akan fokus pada sepuluh pemain teratas terkait poin, rebound, dan assist per game:
# 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
Pada langkah selanjutnya, kita akan membuat objek figur, yang berisi tiga plot batang. Setiap plot batang mewakili kategori yang berbeda (poin, pantulan, bantuan), yang telah kami bedakan dengan membuat tiga kerangka data pada langkah sebelumnya. Harap dicatat, penting untuk menyetel parameter yang terlihat hanya untuk plot batang pertama ke True dan yang lainnya ke 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
Sekarang mari tambahkan menu dropdown ke objek figure dengan metode update_layout . Di dalam parameter updatemenus kita perlu memberikan daftar kamus untuk parameter tombol . Setiap kamus menentukan yang berikut ini:
- label: nama yang muncul di tombol → misalnya Points
- metode: tindakan yang harus diambil pada klik → perbarui
- args: daftar dengan kamus yang menentukan plot yang terlihat setelah klik pada masing-masing label → [Benar, Salah, Salah] untuk menampilkan hanya plot batang pertama yang telah ditambahkan oleh metode add_trace pada langkah sebelumnya
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
Pada artikel ini, saya menjelaskan cara membuat menu tarik-turun di Plotly untuk memvisualisasikan banyak kategori yang ada di kolom berbeda dari kerangka data. Ini sangat berguna jika Anda memiliki banyak kategori untuk ditampilkan, tetapi tidak ingin membuat plot tersendiri untuk masing-masing kategori. Saya harap ini bermanfaat bagi Anda dan terima kasih telah membaca!
Artikel Terkait
Jika Anda menyukai artikel ini, Anda mungkin juga tertarik dengan hal berikut:
Tingkatkan Pengkodean
Terima kasih telah menjadi bagian dari komunitas kami! Sebelum kamu pergi:
- Tepuk tangan untuk ceritanya dan ikuti penulisnya
- Lihat lebih banyak konten di publikasi Level Up Coding
- Kursus wawancara coding gratis ⇒ Lihat Kursus
- Ikuti kami: Twitter | LinkedIn | Buletin

![Apa itu Linked List? [Bagian 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)



































