Interaktivitas antar-elemen

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Apa itu antar-elemen?

Sebelumnya: Berinteraksi dengan input untuk mengubah figur
Kini: Berinteraksi dengan figur untuk mengubah figur lain

Dua kasus:
- Melayang di atas figur (hover)
- Mengeklik titik data

Properti hoverData

# Buat figur dan layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

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

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

def capture_hover_data(hoverData):
    return str(hoverData)

Hover pertama kita

Yang terjadi:

Pengguna melayang: properti hoverData pada figur berubah
Callback mengambil dan menampilkannya ke tag .P()
Kita melihat info terkait titik

GIF batang horizontal penjualan total (sumbu-x) vs. Country (sumbu-y) dengan teks "hover data" di bawahnya bertuliskan "none". Saat kursor melayang di batang Australia, teks none berubah menjadi kamus berisi detail titik, termasuk label negara dan nilainya.

Waspadai info yang hilang

Tujuan: Gunakan 'country' dalam callback (memfilter dan membuat grafik baru)
- Contoh sebelumnya - ada di hoverData
Lihat scatter plot ini (jenis grafik dan ID relevan diperbarui)
- Tidak ada country!

GIF sebar (scatter) penjualan total (sumbu-x) vs. volume penjualan (sumbu-y); tiap titik mewakili negara, dengan teks "hover data" di bawahnya bertuliskan "none". Saat kursor melayang di titik Australia, teks none berubah menjadi kamus berisi detail titik, termasuk dua nilai, namun tidak memuat kata Australia

Menambahkan data kustom

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

Kini customData memuat negara!

Bagaimana dengan klik?

Dapat juga memicu callback saat titik diklik
- Hanya ubah satu properti (clickData)

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

Perhatikan: Tidak langsung muncul

GIF batang horizontal penjualan total (sumbu-x) vs. Country (sumbu-y) dengan teks "hover data" di bawahnya bertuliskan "none". Saat kursor melayang di batang Australia, teks none tidak berubah. Saat batang diklik, None berubah menjadi kamus berisi detail titik, termasuk label negara dan nilainya.

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly