Öğe arası etkileşim

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Öğe arası nedir?

Önce: Değişikliği tetiklemek için girdi ile etkileşim
Şimdi: Başka bir grafiği tetiklemek için grafik ile etkileşim

İki kullanım:
- Grafiğin üzerine gelme
- Veri noktasına tıklama

hoverData özelliği

# Figure ve yerleşimi oluştur
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

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

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

def capture_hover_data(hoverData):
    return str(hoverData)

İlk hover’ımız

Ne olur:

Kullanıcı üzerine gelir: grafiğin hoverData özelliği değişir
Callback bunu alır ve .P() etiketine döndürür
Nokta bilgilerini görebiliriz

Toplam satışlar (x ekseni) ve Ülke (y ekseni) yatay çubuk grafiği. Altında "hover data" ve onun altında "none" yazısı var. Fare alt çubukta (Avustralya) gezinince, none metni ülke etiketi ve değeri dâhil ayrıntıları içeren bir sözlüğe dönüşür.

Eksik bilgiye dikkat

Amaç: Callback içinde 'country' kullanmak (filtreleyip grafiği yenilemek)
- Önceki örnek - hoverData içinde
Bu dağılım grafiğine bakın (grafik türü ve ilgili ID’ler güncellendi)
- Ülke yok!

Toplam satışlar (x ekseni) ve satış hacmi (y ekseni) dağılım grafiği. Noktalar ülkeleri temsil eder. Altında "hover data" ve onun altında "none" yazısı var. Fare bir noktada (Avustralya) gezinince, none metni iki değeri içeren ama "Australia" içermeyen bir sözlüğe dönüşür.

Özel veri ekleme

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

Artık customData ülkeyi içeriyor!

Toplam satışlar (x ekseni) ve satış hacmi (y ekseni) dağılım grafiği. Noktalar ülkeleri temsil eder. Altında "hover data" ve onun altında "none" yazısı var. Fare bir noktada (Avustralya) gezinince, none metni, üzerine gelinen noktanın ayrıntılarını içeren bir sözlüğe dönüşür; bu kez customdata alanında "Australia" yer alır.

Peki tıklama?

Bir noktaya tıklanınca da callback tetiklenebilir
- Sadece bir değişiklik gerekir (clickData özelliği)

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

Not: Hemen görünmez

Toplam satışlar (x ekseni) ve Ülke (y ekseni) yatay çubuk grafiği. Altında "hover data" ve onun altında "none" yazısı var. Fare alt çubukta (Avustralya) gezinince metin değişmez. Çubuğa tıklanınca, None metni ülke etiketi ve değeri dâhil ayrıntıları içeren bir sözlüğe dönüşür.

Ayo berlatih!

Dash ve Plotly ile Paneller Oluşturma