始める無料で始める

ホバーで主要指標を表示する

あなたが e コマース企業のマネージャー向けに成果をデモしたところ、このステークホルダー向けのダッシュボード作成を依頼されました。可視化やテキストを詰め込みすぎることは厳禁です。

その代わり、ダッシュボードは高いインタラクティビティを備えている必要があります。具体的には、散布図にマウスオーバーした際、右側のテキストボックスに追加の主要指標が表示されるようにしてほしい、との要望です。散布図上の別の点にホバーしたときは、その内容が更新される必要があります。

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

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

コースを見る

演習の手順

  • 行8の下で、散布図の custom_data パラメータに 'Country' 列を追加し、hoverData プロパティに現れるようにします。
  • 行28の下でコールバックを作成し、scatter_fig グラフと text_output 要素を接続し、散布図へのホバーでトリガーされるようにします。

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

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

from dash import Dash, dcc, html, Input, Output, callback
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})

# Add the country data to the scatter plot
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=400, ____=['____'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.5,x=1, yanchor='bottom', xanchor='right'), 'margin':dict(l=20, r=20, t=25, b=0)})

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales breakdowns'),
  html.Div([
    html.H2('Sales by Country'),
    dcc.Graph(id='scatter_fig', figure=ecom_scatter)],
    style={'width':'350px', 'height':'500px', 'display':'inline-block', 
           'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
    html.H2('Key Stats'),
    html.P(id='text_output', style={'width':'500px', 'text-align':'center'})],
    style={'width':'700px', 'height':'650px','display':'inline-block'})
]

# Trigger callback on hover
@callback(
    Output('text_output', 'children'),
    ____('scatter_fig', '____'))

def get_key_stats(hoverData):
    if not hoverData:
        return 'Hover over a country to see key stats'
    country = hoverData['points'][0]['customdata'][0]
    country_df = ecom_sales[ecom_sales['Country'] == country]
    top_major_cat = country_df.groupby('Major Category').agg('size').reset_index(name='Sales Volume').sort_values(by='Sales Volume', ascending=False).reset_index(drop=True).loc[0,'Major Category']
    top_sales_month = country_df.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False).reset_index(drop=True).loc[0,'Year-Month']
    stats_list = [
      f'Key stats for : {country}', html.Br(),
      f'The most popular Major Category by sales volume was: {top_major_cat}', html.Br(),
      f'The highest sales value month was: {top_sales_month}'
    ]
    return stats_list

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