एलिमेंट्स के बीच इंटरऐक्टिविटी

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

Between-element क्या है?

पहले: input से इंटरैक्ट कर के किसी figure में बदलाव ट्रिगर करें
अब: figure से इंटरैक्ट कर के दूसरे figure में बदलाव ट्रिगर करें

दो उपयोग केस:
- किसी figure पर hover करना
- किसी data point पर click करना

`hoverData` प्रॉपर्टी

# Create figure and layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

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

# Set up a callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

हमारा पहला hover

क्या होता है:

यूज़र hover करता है: figure की hoverData प्रॉपर्टी बदलती है
Callback इसे लेता है और .P() टैग में लौटाता है
आप पॉइंट-संबंधित जानकारी देख सकते हैं

कुल बिक्री (x-axis) बनाम Country (y-axis) के हॉरिज़ॉन्टल बार चार्ट का GIF, जिसके नीचे "hover data" टेक्स्ट है और उसके नीचे "none" लिखा है। जैसे ही माउस Australia वाले नीचे के बार पर hover करता है, "none" बदलकर एक dictionary दिखती है जिसमें hover किए गए पॉइंट का विवरण है, जैसे country लेबल और वैल्यू.

गुम जानकारी से सावधान

लक्ष्य: callback में 'country' का उपयोग करें (filter कर के ग्राफ़ फिर से बनाएं)
- पिछले उदाहरण में - hoverData में था
यह scatter plot देखें (ग्राफ़ टाइप और संबंधित ID अपडेट)
- यहाँ country नहीं है!

कुल बिक्री (x-axis) बनाम sales volume (y-axis) के scatter चार्ट का GIF, जहाँ हर पॉइंट अलग country है। नीचे "hover data" टेक्स्ट है और उसके नीचे "none" लिखा है। जैसे ही माउस Australia वाले पॉइंट पर hover करता है, "none" बदलकर एक dictionary दिखती है जिसमें दो वैल्यू हैं, लेकिन खास बात यह है कि Australia शब्द नहीं है.

कस्टम डेटा जोड़ना

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

अब customData में country शामिल है!

कुल बिक्री (x-axis) बनाम sales volume (y-axis) के scatter चार्ट का GIF, जहाँ हर पॉइंट अलग country है। नीचे "hover data" टेक्स्ट है और उसके नीचे "none" लिखा है। जैसे ही माउस Australia वाले पॉइंट पर hover करता है, "none" बदलकर एक dictionary दिखती है जिसमें दो वैल्यू हैं और इस बार customdata प्रॉपर्टी में Australia शब्द मौजूद है.

क्लिक करने पर क्या?

किसी पॉइंट पर click होने पर भी callback ट्रिगर कर सकते हैं
- बस एक बदलाव चाहिए (clickData प्रॉपर्टी)

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

ध्यान दें: यह तुरंत नहीं दिखता

कुल बिक्री (x-axis) बनाम Country (y-axis) के हॉरिज़ॉन्टल बार चार्ट का GIF, जिसके नीचे "hover data" टेक्स्ट है और उसके नीचे "none" लिखा है। जब माउस Australia वाले नीचे के बार पर hover करता है, टेक्स्ट नहीं बदलता। जब माउस इस बार पर click करता है, "None" बदलकर एक dictionary दिखती है जिसमें पॉइंट का विवरण है, जैसे country लेबल और वैल्यू.

अभ्यास करते हैं!

Dash और Plotly के साथ डैशबोर्ड बनाना