시작하기무료로 시작하기

더 다듬어진 매출 대시보드

1장의 이커머스 회사가 다시 연락을 해왔고, 이전에 만든 기본 개념 증명용 매출 대시보드를 확장할 수 있도록 예산을 배정했어요.

이제 스타일링과 배치 역량을 갖추셨으니, 이 대시보드를 발표용 수준으로 다듬어 봅시다.

요청 사항을 다시 정리하면, 월별 총매출에 대한 꺾은선 차트, 국가별 총매출에 대한 막대 차트, 그리고 해당 기간의 최대 주문 수량에 대한 상위 수준 요약 통계를 원해요. 다만 이 시각화들은 나란히 배치해 주길 바라며, 기업 스타일 가이드에 따라 연한 파란색 배경을 사용해 달라고 했어요. 또한 메인 제목의 양쪽에 로고를 하나씩 배치해 브랜드가 잘 드러나도록 해 달라고 요청했습니다.

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

Dash와 Plotly로 대시보드 만들기

강의 보기

연습 안내

  • 왼쪽 로고를 H1 옆에 추가하고, 아래 여백 25px을 line 17 아래에 설정하세요.
  • 오른쪽 로고를 H1 옆에 추가하고, 아래 여백 25px을 line 22 아래에 설정하세요.
  • 꺾은선 그래프를 500px 너비로 설정하고, 나란히 배치되도록 아래 여백 5px을 line 25 아래에 설정하세요.
  • 막대 그래프를 350px 너비로 설정하고, 나란히 배치되도록 아래 여백 5px을 line 28 아래에 설정하세요.

실습형 인터랙티브 연습

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

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='TotalSales')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='TotalSales',title='Total Sales by Month')
line_fig.update_layout({'paper_bgcolor':'rgb(224, 255, 252)' }) 
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='TotalSales')
bar_fig = px.bar(data_frame=ecom_bar, x='TotalSales', y='Country', orientation='h',title='Total Sales by Country')
bar_fig.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'}) 

app = Dash()

app.layout = [
	html.Img(src=logo_link, 
		# Add the left-side logo next to the H1 with 25px margin
		style={'display':'____', 'margin':'____'}),
	html.H1(children=['Sales Figures'],
		style={'display':'inline-block'}),
	html.Img(src=logo_link,
		# Add the right-side logo next to the H1 with 25px margin
		style={'display':'____', 'margin':'____'}),
	dcc.Graph(figure=line_fig, 
		# Set line graph to 500px wide, side-by-side with 5px margin
		style={'width':'____', 'display':'____', 'margin':'____'}), 
	dcc.Graph(figure=bar_fig,
		# Set bar graph to 350px wide, side-by-side with 5px margin
		style={'width':'____', 'display':'____', 'margin':'____'}), 
	html.H3(f'The largest order quantity was {ecom_sales.Quantity.max()}')
	]

if __name__ == '__main__':
    app.run(debug=True)
코드 편집 및 실행