판매 데이터용 슬라이더
글로벌 e-commerce 기업의 데이터를 날짜 선택기(date picker)로 분석하면서 추세와 패턴 파악이 크게 개선되었어요. 이제 '고액' 주문을 이끄는 카테고리가 무엇인지 보고 싶다는 추가 요청이 있네요.
회사는 사용자가 어떤 값이든 선택하면, 그 값을 초과하는 주문 금액을 가진 판매 건수가 주요 카테고리별로 얼마나 되는지 보여주는 그래프를 만들기를 요청했습니다.
이 기능은 범위 입력으로 구현하면 아주 적합하다는 것을 알고 있어요.
이 연습은 강의의 일부입니다
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)