국가별 매출을 위한 드롭다운
자리에 앉아 작업하던 중, 이커머스 회사의 글로벌 영업 관리자분이 새로운 과제를 가져오셨어요. 최근에 만든 매출 그래프가 마음에 들었지만, 국가별로 필터링하고 카테고리 데이터가 실시간으로 업데이트되는 모습을 보고 싶다고 하셨습니다.
승인된 국가 이름을 꼭 사용해 달라고 강조했어요: United Kingdom, Germany, France, Australia, 그리고 Hong Kong.
🛑 참고: 모든 요소가 나란히 보이도록 대시보드를 올바르게 확인하려면 전체 화면 모드로 전환해야 할 수 있어요.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
- 콜백에 사용할 수 있도록
16번 줄 아래에 식별자가country_dd인dcc.Dropdown컴포넌트를 추가하세요. 30번 줄 아래의 콜백에서 입력과 출력을 설정해country_dd드롭다운을major_cat그래프와 연결하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
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('Country Select'),
# Add a dropdown with identifier
dcc.____(
____='country_dd',
options=['United Kingdom', 'Germany', 'France', 'Australia', 'Hong Kong'],
style={'width': '200px', 'margin': '0 auto'})],
style={'width': '350px', 'height': '350px', 'display': 'inline-block', 'vertical-align': 'top', 'border': '1px solid black', 'padding': '20px'}),
html.Div([
dcc.Graph(id='major_cat'),
html.H2('Major Category', style={'border': '2px solid black', 'width': '200px', 'margin': '0 auto'})],
style={'width': '700px', 'display': 'inline-block'})
]
@callback(
# Set the input and output of the callback to link the dropdown to the graph
____(component_id='____', component_property='____'),
____(component_id='____', component_property='____')
)
def update_plot(input_country):
country_filter = 'All Countries'
sales = ecom_sales.copy(deep=True)
if input_country:
country_filter = input_country
sales = sales[sales['Country'] == country_filter]
ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(
title=f'Sales in {country_filter}', data_frame=ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category',
color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
return bar_fig_major_cat
if __name__ == '__main__':
app.run(debug=True)