होवर पर मुख्य आँकड़े दिखाएँ
ई-कॉमर्स कंपनी में मैनेजर को आपका डेमो पसंद आया और अब उन्होंने अपने लिए एक डैशबोर्ड बनाने का अनुरोध किया है. बहुत ज़्यादा विज़ुअलाइज़ेशन और बहुत सारा टेक्स्ट बिल्कुल स्वीकार्य नहीं है.
इसके बजाय, वे डैशबोर्ड को अत्यधिक इंटरएक्टिव चाहते हैं. उन्होंने एक स्कैटर प्लॉट माँगा है जो होवर करते ही दाएँ तरफ़ एक टेक्स्ट बॉक्स में कुछ अतिरिक्त प्रमुख आँकड़े दिखाए. स्कैटर प्लॉट पर नया पॉइंट होवर करने पर यह जानकारी बदलनी चाहिए.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
8के नीचे स्कैटर प्लॉट केcustom_dataपैरामीटर में'Country'कॉलम जोड़ें ताकि वहhoverDataप्रॉपर्टी में दिखाई दे. - लाइन
28के नीचे एक callback बनाएँ जोscatter_figग्राफ़ कोtext_outputएलिमेंट से जोड़े और स्कैटर प्लॉट पर होवर करने से ट्रिगर हो.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
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 ($)'})
# Add the country data to the scatter plot
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=400, ____=['____'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.5,x=1, yanchor='bottom', xanchor='right'), 'margin':dict(l=20, r=20, t=25, b=0)})
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px' }),
html.H1('Sales breakdowns'),
html.Div([
html.H2('Sales by Country'),
dcc.Graph(id='scatter_fig', figure=ecom_scatter)],
style={'width':'350px', 'height':'500px', 'display':'inline-block',
'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
html.Div([
html.H2('Key Stats'),
html.P(id='text_output', style={'width':'500px', 'text-align':'center'})],
style={'width':'700px', 'height':'650px','display':'inline-block'})
]
# Trigger callback on hover
@callback(
Output('text_output', 'children'),
____('scatter_fig', '____'))
def get_key_stats(hoverData):
if not hoverData:
return 'Hover over a country to see key stats'
country = hoverData['points'][0]['customdata'][0]
country_df = ecom_sales[ecom_sales['Country'] == country]
top_major_cat = country_df.groupby('Major Category').agg('size').reset_index(name='Sales Volume').sort_values(by='Sales Volume', ascending=False).reset_index(drop=True).loc[0,'Major Category']
top_sales_month = country_df.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False).reset_index(drop=True).loc[0,'Year-Month']
stats_list = [
f'Key stats for : {country}', html.Br(),
f'The most popular Major Category by sales volume was: {top_major_cat}', html.Br(),
f'The highest sales value month was: {top_sales_month}'
]
return stats_list
if __name__ == '__main__':
app.run(debug=True)