शुरू करेंमुफ़्त में शुरू करें

सेल्स डेटा के लिए स्लाइडर

ग्लोबल ई-कॉमर्स कंपनी के डेटा में रुझान और पैटर्न का विश्लेषण आपके डेट पिकर्स से काफ़ी बेहतर हो गया है. अब एक और अनुरोध है कि यह देखा जाए कि कौन-सी कैटेगरीज़ 'बिग टिकट' ऑर्डर्स को चला रही हैं.

कंपनी चाहती है कि आप एक ऐसा टूल बनाएँ जहाँ वे कोई भी वैल्यू चुन सकें और एक ग्राफ़ दिखाए कि उस वैल्यू से अधिक ऑर्डर वैल्यू वाले कितने सेल्स हुए, जिन्हें मेजर कैटेगरी के हिसाब से विभाजित किया गया हो.

आप जानते हैं कि यह एक रेंज इनपुट से अच्छी तरह संभव है.

यह अभ्यास पाठ्यक्रम का हिस्सा है

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

पाठ्यक्रम देखें

अभ्यास निर्देश

  • न्यूनतम ऑर्डर वैल्यू चुनने के लिए लाइन 16 के नीचे value_slider आइडेंटिफ़ायर के साथ dcc.Slider नाम का एक स्लाइडर कंपोनेंट जोड़ें.
  • स्लाइडर के value पैरामीटर को लाइन 20 के नीचे 0 पर सेट करें.
  • स्लाइडर के step पैरामीटर को लाइन 22 के नीचे 50 पर सेट करें.

इंटरैक्टिव व्यावहारिक अभ्यास

इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।

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'

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales breakdowns'),
  html.Div([
        html.H2('Controls'),
        html.Br(),
        html.H3('Minimum OrderValue Select'),
        # Add a slider input
        ____(id='value_slider',
            min=ecom_sales['OrderValue'].min(),
            max=ecom_sales['OrderValue'].max(),
            # Set the starting value of the slider
            ____=____,
            # Set the step increment of the slider
            ____=____,
            vertical=False)],
        style={'width':'350px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
		dcc.Graph(id='sales_cat'),
		html.H2('Sales by Major Category', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
		style={'width':'700px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='value_slider', component_property='value')
)
def update_plot(min_val):
    sales = ecom_sales.copy(deep=True)
    if min_val:
        sales = sales[sales['OrderValue'] >= min_val]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].size().reset_index(name='Total Sales Volume')
    bar_fig_major_cat = px.bar(
        title=f'Sales with order value: {min_val}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales Volume', y='Major Category')
    return bar_fig_major_cat
  
if __name__ == '__main__':
    app.run(debug=True)
कोड संपादित करें और चलाएँ