시작하기무료로 시작하기

로고와 메모 추가하기

그림(또는 그래프)이 수천 마디 말보다 더 많은 정보를 줄 때도 있지만, 대시보드에는 때로 추가 설명이 필요해요. 다행히 여러분은 Dash 앱에 텍스트와 이미지, 그리고 레이아웃 구조를 추가하고 서식화하는 기술을 연습해 왔죠.

회사 로고, 하나의 그래프, 그리고 간단한 설명 메모가 포함된 대시보드를 만들어 봅시다.

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

Dash와 Plotly로 대시보드 만들기

강의 보기

연습 안내

  • 13번째 줄 아래에 logo_link URL을 사용하여 회사 로고를 추가하세요.
  • 20번째 줄의 제공된 텍스트 뒤에 top_country 변수를 굵게 추가하세요.
  • 24번째 줄 아래에 회사 저작권 문구 ' Copyright E-Com INC'를 기울임꼴로 추가하세요.

실습형 인터랙티브 연습

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

from dash import Dash, dcc, html
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/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']            
bar_fig_country = px.bar(ecom_bar, x='Total Sales ($)', y='Country', color='Country', color_discrete_map={'United Kingdom':'lightblue', 'Germany':'orange', 'France':'darkblue', 'Australia':'green', 'Hong Kong':'red'})         
    
app = Dash()

app.layout = [
  # Add the company logo
  html.____(src=____),
  html.H1('Sales by Country'),
  dcc.Graph(
    figure=bar_fig_country,
    style={'width':'750px', 'margin':'auto'}),
  html.Span(children=[
    # Add the top country text
    'This year, the most sales came from: ', 
    html.____(____),
    html.Br(),
    # Italicize copyright notice
    html.____(' Copyright E-Com INC')])
    ]

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