始める無料で始める

HTML と Dash の組み合わせ

あなたはある e-commerce 企業のデータ可視化を支援しており、今回はプレゼンテーションの質を一段引き上げます。

これまでに作成した折れ線グラフと棒グラフ（line_graph と bar_graph）を、1つの Dash ダッシュボード内に並べて表示するのが目標です。仕上がり感を出すため、レイアウトの上部にタイトルも追加しましょう。

折れ線グラフと棒グラフ（line_graph と bar_graph）は、あらかじめ用意されています。

この演習はコースの一部です

Dash と Plotly で作るダッシュボード

コースを見る

演習の手順

  • Dash アプリにタイトルを追加します。.H1() にテキスト 'Sales by Country & Over Time' を渡してください。
  • line_graph と bar_graph の図を Dash アプリのレイアウトに追加します。

実践的なインタラクティブ演習

このサンプルコードを完成させて、この演習に挑戦してみましょう。

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby(['Year-Month','Country'])['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
line_graph = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month', color='Country')
bar_graph = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h',title='Total Sales by Country')

app = Dash()

# Set up the layout
app.layout = [
  # Add a H1
  html.____('____'),
  # Add both graphs
  dcc.____(id='line_graph', figure=____),
  dcc.____(id='bar_graph', figure=____)
  ]

if __name__ == '__main__':
    app.run(debug=True)
コードを編集して実行