किसी दूसरे प्लॉट को अपडेट करने के लिए होवर करें
ग्लोबल e-commerce कंपनी को आपके काम से उनके पुराने रिपोर्ट्स में आई नई ऊर्जा और नवाचार बहुत पसंद आ रहा है। जिस मैनेजर के लिए आपने हाल ही में key stats होवर डैशबोर्ड बनाया था, उन्होंने आपके लिए एक नया चैलेंज भेजा है। शब्द एक अच्छा स्नैपशॉट देते हैं, लेकिन तस्वीर हज़ार शब्दों के बराबर होती है! मैनेजर चाहते हैं कि आप ऐसे ग्राफ़ बनाएँ जो इस पर निर्भर करते हुए अलग-अलग सबसेट दिखाएँ कि किस पर होवर किया जा रहा है।
डेटा को फ़िल्टर करने और फ़िगर को फिर से जनरेट करने के लिए कॉलबैक इस्तेमाल करने का आपका पिछला अनुभव, और हाल के होवर-ट्रिगर्ड कॉलबैक्स के काम के साथ मिलकर, इस काम के लिए एकदम सही संयोजन होगा।
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
26के नीचे दिए गएscatterप्लॉट पर होवर करने परminor_catग्राफ़ को अपडेट करने के लिए एक कॉलबैक बनाएँ. - लाइन
41के नीचे दिए गएscatterप्लॉट पर होवर करने परmajor_catग्राफ़ को अपडेट करने के लिए एक कॉलबैक बनाएँ.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=550, custom_data=['Country'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.7,x=1, yanchor='bottom', xanchor='right')})
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px' }),
html.H1('Sales breakdowns'),
html.Div([
html.H3('Sales Volume vs Sales Amount by Country'),
dcc.Graph(id='scatter', figure=ecom_scatter)],
style={'width':'350px', 'height':'650px', 'display':'inline-block',
'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
html.Div([
dcc.Graph(id='major_cat'),
dcc.Graph(id='minor_cat')],
style={'width':'700px', 'height':'650px','display':'inline-block'})
]
# Create a callback to update the minor category plot
@callback(
Output('____', '____'),
Input('scatter', '____'))
def update_min_cat_hover(hoverData):
hover_country = 'Australia'
if hoverData:
hover_country = hoverData['points'][0]['customdata'][0]
minor_cat_df = ecom_sales[ecom_sales['Country'] == hover_country]
minor_cat_agg = minor_cat_df.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = px.bar(minor_cat_agg, x='Total Sales ($)', y='Minor Category', orientation='h', height=450, title=f'Sales by Minor Category for: {hover_country}')
ecom_bar_minor_cat.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'title':{'x':0.5}})
return ecom_bar_minor_cat
# Create a callback to update the major category plot
@callback(
Output('____', '____'),
Input('scatter', '____'))
def update_major_cat_hover(hoverData):
hover_country = 'Australia'
if hoverData:
hover_country = hoverData['points'][0]['customdata'][0]
major_cat_df = ecom_sales[ecom_sales['Country'] == hover_country]
major_cat_agg = major_cat_df.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_major_cat = px.bar(major_cat_agg, x='Total Sales ($)',
y='Major Category', height=300,
title=f'Sales by Major Category for: {hover_country}', color='Major Category',
color_discrete_map={'Clothes':'blue','Kitchen':'red', 'Garden':'green', 'Household':'yellow'})
ecom_bar_major_cat.update_layout({'margin':dict(l=10,r=15,t=40,b=0), 'title':{'x':0.5}})
return ecom_bar_major_cat
if __name__ == '__main__':
app.run(debug=True)