要素間のインタラクション

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

Alex Scriven

Data Scientist

between-elementとは

前回：入力で操作し、図を更新
今回：図で操作し、別の図を更新

ユースケースは2つ:
- 図にホバー
- データ点をクリック

hoverDataプロパティ

# 図とレイアウトを作成
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

# コールバックを設定
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

最初のホバー

起きること:

ユーザーがホバー：図のhoverDataが更新
コールバックが取得し、.P()タグに返す
点の情報が確認できる

合計売上（x軸）と国（y軸）の横棒グラフ。下に「hover data」と「none」。最下段のオーストラリアにホバーすると、noneがホバー中の点の詳細（国ラベルと値を含む辞書）に変わる。

情報欠落に注意

目的：コールバックで「country」を使う（フィルタして再描画）
- 先ほどの例―hoverData内
この散布図を確認（グラフ種とIDを更新）
- 国がない！

合計売上（x軸）と販売数（y軸）の散布図。各点は国。下に「hover data」と「none」。オーストラリアにホバーすると、noneが2つの値など点の詳細を含む辞書に変わるが、重要なことにAustraliaは含まれない。

カスタムデータを追加

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])

これでcustomDataに国が入ります！

合計売上（x軸）と販売数（y軸）の散布図。各点は国を表し、下に「hover data」と「none」の文字。オーストラリアの点にホバーすると、noneがホバー中の点の詳細を含む辞書に変わり、customdataプロパティにAustraliaが含まれる

クリックはどうなる？

点をクリック時にもコールバックを発火可能
- 変更は1点のみ（clickDataプロパティ）

@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)

注意：すぐには表示されません

合計売上（x軸）と国（y軸）の横棒グラフ。下に「hover data」と「none」。棒にホバーしてもnoneは変化しない。オーストラリアの棒をクリックすると、noneがクリックした点の詳細（国ラベルと値を含む辞書）に変わる。

Let's practice!

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