Cara Membuat Menu Dropdown Di Plotly

Feb 22 2023
Visualisasikan berbagai kategori dalam satu plot tunggal
Bayangkan Anda memiliki kumpulan data dengan banyak informasi yang diatur dalam kolom berbeda, yang ingin Anda visualisasikan. Selain itu, kontennya sendiri dapat ditampilkan dengan jenis plot yang sama, mis.
Foto oleh Jason Leung di Unsplash

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