क्लिक करके दूसरा प्लॉट अपडेट करें
hover से अपडेट होने वाला प्लॉट लोगों को बहुत पसंद आया. कमाल कर दिया! आपका काम थके हुए, स्थिर विज़ुअल्स को सजीव अनुभवों में बदल रहा है.
पिछले लेसन में बनाए गए डैशबोर्ड में बदलाव का अनुरोध आया है. ई-कॉमर्स कंपनी की रिपोर्टिंग हायरार्की देश से शुरू होती है, फिर major category, और उसके बाद minor category. इसलिए वे चाहते हैं कि hover करने पर नीचे वाला बार चार्ट अपडेट न हो.
इसके बजाय, वे चाहते हैं कि आप major category वाले बार चार्ट पर क्लिक करें और उससे नीचे वाला बार चार्ट अपडेट हो जाए. यह इसलिए माँगा गया है ताकि समझा जा सके कि देशों के बीच major category के हिसाब से बिक्री का अनुपात कैसे बदलता है.
क्लिक और hover पर आपके हालिया काम से, आपको ठीक-ठीक पता है कि इसे कैसे लागू करना है!
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- यह सुनिश्चित करें कि
'Major Category'क्लिक डेटा में उपलब्ध हो, इसके लिए लाइन37के नीचे दिए गए major category बार चार्ट केcustom_dataपैरामीटर में इसे जोड़ें. - लाइन
45के नीचे एक कॉलबैक सेट करें जोmajor_catचार्ट में किसी बार पर क्लिक होने परminor_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'})
]
@callback(
Output('major_cat', 'figure'),
Input('scatter', 'hoverData'))
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 ($)',
# Ensure the Major Category will be available
____=['Major Category'],
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
# Set up a callback for click data
@callback(
Output('minor_cat', 'figure'),
Input('____', '____'))
def update_major_cat_click(clickData):
click_cat = 'All'
major_cat_df = ecom_sales.copy()
total_sales = major_cat_df.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
if clickData:
click_cat = clickData['points'][0]['customdata'][0]
major_cat_df = ecom_sales[ecom_sales['Major Category'] == click_cat]
country_mj_cat_agg = major_cat_df.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
country_mj_cat_agg['Sales %'] = (country_mj_cat_agg['Total Sales ($)'] / total_sales['Total Sales ($)'] * 100).round(1)
ecom_bar_country_mj_cat = px.bar(country_mj_cat_agg, x='Sales %', y='Country',
orientation='h', height=450, range_x = [0,100], text='Sales %',
title=f'Global Sales % by Country for Major Category: {click_cat}')
ecom_bar_country_mj_cat.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'title':{'x':0.5}})
return ecom_bar_country_mj_cat
if __name__ == '__main__':
app.run(debug=True)