始める無料で始める

上位顧客の所在地を分析する

あなたのこれまでのeコマース企業での成果を受けて、同社の国別売上レポートを拡張する支援を依頼されました。

営業マネージャーは、上位顧客がどこにいるのかを把握したいと考えています。ただし、現時点では「上位」が具体的に何を指すのか明確ではありません。理想的には、上位顧客とみなすための下限値をいくつか試し、カットオフ値を変えたときにグラフがどう変わるかを簡単に確認できるようにしたいと考えています。

あなたのタスクは、範囲入力を使って、最小の OrderValue 金額で売上をフィルタリングするライブ更新アプリを作成し、営業マネージャーを支援することです。

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

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

コースを見る

演習の手順

  • 34の下に、ユーザーが50から550までの値を選べるようにする識別子min_order_valdcc.Input(range入力)コンポーネントを追加します。
  • 53の下のコールバックで、input_val を確認し、選択された値より大きい OrderValuesales DataFrame をフィルタリングします。

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

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

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'

def make_break(num_breaks):
    br_list = [html.Br()] * num_breaks
    return br_list

def add_logo():
    corp_logo = html.Img(
        src=logo_link, 
        style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})
    return corp_logo

def style_c():
    layout_style={'display':'inline-block','margin':'0 auto','padding':'20px'}
    return layout_style
  
app = Dash()

app.layout = [
  add_logo(),
  *make_break(2),
  html.H1('Sales Dashboard'),
  *make_break(3),
  html.Div([
    html.H2('Controls', style=style_c()),
    html.H3('Set minimum OrderValue'),
    *make_break(2),
    dcc.Input(
      # Add a range input
      id='min_order_val', type='____', 
      ____=____, ____=____, value=50,
      debounce=False,
      style={'width':'300px', 'height':'30px'})],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 80px'}),
    html.Div([
      dcc.Graph(id='sales_country'),
      html.H2('Sales Quantity by Country', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
      style={'width':'500px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_country', component_property='figure'), 
    Input(component_id='min_order_val', component_property='value'))

def update_plot(input_val):
    sales = ecom_sales.copy(deep=True)
    # Check for input and filter sales
    if ____:
        input_val = round(float(input_val), 2)
        sales = sales[sales['OrderValue'] > ____] 
    fig = px.scatter(data_frame=sales, y='OrderValue', height=400,
                     x='Quantity', color='Country',
                     title=f'Orders of Min Value ${input_val}')
    return fig
      
if __name__ == '__main__':
    app.run(debug=True)
コードを編集して実行