CSS で Dash アプリをスタイリングする
いよいよ CSS の力を活用して、ダッシュボードを一段レベルアップさせましょう。作成したマーケティングダッシュボードをより見やすくしたいと考えており、ビジネスのステークホルダーに見せたいアイデアがいくつかあります。
グラフやロゴのサイズを調整し、要素ごとに背景色を加えると、ぐっと見栄えが良くなります。
この演習はコースの一部です
Dash と Plotly で作るダッシュボード
演習の手順
- 行
16の下に、ロゴのサイズを幅215px、高さ240pxに設定します。 - 行
21の下に、棒グラフのサイズを幅500px、高さ350pxに設定します。 - 行
30の下に、コピーライト表記にlightgreyの背景色を追加します。
実践的なインタラクティブ演習
このサンプルコードを完成させて、この演習に挑戦してみましょう。
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_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})
app = Dash()
app.layout = [
html.Img(
src=logo_link,
# Set the size of the logo
style={'____':'____', '____':'____'}),
html.H1('Top Sales Categories'),
dcc.Graph(
figure=ecom_bar,
# Set the size of the bar graph
style={'____':'____', '____':'____', 'margin':'auto'}),
html.Br(),
html.Span(children=[
'The top category was: ',
html.B(top_cat),
html.Br(),
html.I(
'Copyright E-Com INC',
# Add a background color to the copyright notice
style={'____':'____'})])
]
if __name__ == '__main__':
app.run(debug=True)