시작하기무료로 시작하기

상위 고객 위치 분석

여러분이 전자상거래 회사에서 좋은 성과를 낸 덕분에, 국가별 매출 보고서를 확장하는 업무를 맡게 되었어요.

영업 관리자는 상위 고객이 어디에 있는지 파악하고 싶어 합니다. 아직 '상위'의 기준이 명확하지 않기 때문에, 이상적으로는 다양한 기준값을 쉽게 바꿔 보면서 누가 상위 고객에 해당하는지 정하고, 기준값에 따라 그래프가 어떻게 달라지는지 확인할 수 있어야 해요.

여러분의 과제는 범위 입력을 사용해 최소 OrderValue 금액으로 매출을 필터링하는 실시간 업데이트 앱을 만들어, 영업 관리자가 손쉽게 탐색할 수 있도록 돕는 것입니다.

이 연습은 강의의 일부입니다

Dash와 Plotly로 대시보드 만들기

강의 보기

연습 안내

  • 34번째 줄 아래에 식별자 min_order_val을 가진 dcc.Input 범위 입력 컴포넌트를 추가해, 사용자が 50부터 550까지의 값을 선택할 수 있도록 하세요.
  • 53번째 줄 아래의 콜백에서 input_val을 확인하고, 선택한 값보다 큰 OrderValuesales DataFrame을 필터링하세요.

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
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'

def make_break(num_breaks):
    br_list = [html.Br()] * num_breaks
    return br_list

def add_logo():
    corp_logo = html.Img(
        src=logo_link, 
        style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})
    return corp_logo

def style_c():
    layout_style={'display':'inline-block','margin':'0 auto','padding':'20px'}
    return layout_style
  
app = Dash()

app.layout = [
  add_logo(),
  *make_break(2),
  html.H1('Sales Dashboard'),
  *make_break(3),
  html.Div([
    html.H2('Controls', style=style_c()),
    html.H3('Set minimum OrderValue'),
    *make_break(2),
    dcc.Input(
      # Add a range input
      id='min_order_val', type='____', 
      ____=____, ____=____, value=50,
      debounce=False,
      style={'width':'300px', 'height':'30px'})],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 80px'}),
    html.Div([
      dcc.Graph(id='sales_country'),
      html.H2('Sales Quantity by Country', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
      style={'width':'500px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_country', component_property='figure'), 
    Input(component_id='min_order_val', component_property='value'))

def update_plot(input_val):
    sales = ecom_sales.copy(deep=True)
    # Check for input and filter sales
    if ____:
        input_val = round(float(input_val), 2)
        sales = sales[sales['OrderValue'] > ____] 
    fig = px.scatter(data_frame=sales, y='OrderValue', height=400,
                     x='Quantity', color='Country',
                     title=f'Orders of Min Value ${input_val}')
    return fig
      
if __name__ == '__main__':
    app.run(debug=True)
코드 편집 및 실행