磨きをかけた売上ダッシュボード
第1章で登場した e-commerce 企業から依頼があり、以前に作成した基本的な概念実証用の売上ダッシュボードを拡張するための予算が出ました。
スタイリングやレイアウトのスキルを身につけた今、このダッシュボードをプレゼンに耐える仕上がりにできます。
おさらいとして、同社は月次の総売上の折れ線グラフ、国別の総売上の棒グラフ、そして期間中の最大注文数量に関するハイレベルなサマリ統計を希望しています。今回は、これらを横並びで表示し、コーポレートのスタイルガイドに合わせて淡い青の背景にしてほしいとのことです。さらに、ブランドをはっきり示すため、メインタイトルの左右に 1 つずつロゴを配置してほしいという要望があります。
この演習はコースの一部です
Dash と Plotly で作るダッシュボード
演習の手順
- 行17の下に、
25pxのマージンを付けて、H1 の横に左側のロゴを追加します。 - 行22の下に、
25pxのマージンを付けて、H1 の横に右側のロゴを追加します。 - 行25の下に、折れ線グラフを
500pxの幅、横並び、5pxのマージンに設定します。 - 行28の下に、棒グラフを
350pxの幅、横並び、5pxのマージンに設定します。
実践的なインタラクティブ演習
このサンプルコードを完成させて、この演習に挑戦してみましょう。
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)