Aan de slagBegin gratis

Schuifregelaar voor verkoopgegevens

De analyse van trends en patronen in de data van het wereldwijde e-commercebedrijf is flink verbeterd met je datumkiezers. Er is nog een verzoek om te zien welke categorieën de 'dure' orders aanjagen.

Het bedrijf heeft je gevraagd een tool te bouwen waarmee ze een waarde kunnen selecteren (echt elke waarde!) en een grafiek laat zien hoeveel verkopen een orderwaarde hadden die groter is dan die waarde, uitgesplitst naar hoofdcategorie.

Je weet dat dit zich goed leent voor een bereikinvoer.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Voeg onder regel 16 een slidercomponent dcc.Slider met de identifier value_slider toe om een minimale orderwaarde te selecteren.
  • Stel onder regel 20 de parameter value van de slider in op 0.
  • Stel onder regel 22 de parameter step van de slider in op 50.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren