Dash㉛（連鎖コールバック）

連鎖コールバック

連鎖コールバックとは、コールバックの出力を別のコールバックの入力に使用するコールバックです。

コールバックを連鎖させることにより、より複雑な動作を実現することができるようになります。

ドロップダウンでグラフの種類を選択し、ラジオボタンでグラフの表示データを変更するアプリケーションを作成します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output, State

tips = px.data.tips()   # データの読み込み

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1(id='title1'),
        html.Div(
            [
                dcc.Dropdown(
                    id='dropdown1',
                    options=[
                        {'value':'bar', 'label':'棒グラフ'},
                        {'value':'scatter', 'label':'散布図'}
                    ],
                    value='bar'
                ),
                html.Div(
                    [
                        html.P(id='title2'),
                        dcc.RadioItems(id='radio1')
                    ]
                )
            ],
            style={'width':'35%', 'float':'left'}
        ),
        html.Div(
            [dcc.Graph(id='graph1')],
            style={'width':'65%', 'height':800, 'display':'inline-block'}
        )
    ]
)

# コールバック１
@app.callback(
    Output('radio1', 'options'),    # RadioItems(id='radio1')の選択肢
    Output('radio1', 'value'),      # RadioItems(id='radio1')の値
    Output('title1', 'children'),   # H1(id='title1')に表示する文字
    Output('title2', 'children'),   # P(id='title2')に表示する文字
    Input('dropdown1', 'value')     # Dropdown(id='dropdown1')で選択された値
)
def update_selecter(dropdown1):
    if dropdown1 == 'bar':
        return (
            [
                {'value':'total_bill', 'label':'総額'},
                {'value':'sex', 'label':'性別'},
                {'value':'smoker', 'label':'喫煙／禁煙'},
                {'value':'time', 'label':'時間帯（昼／夜）'}
            ],
            'total_bill',
            'チップデータ（棒グラフ）',
            '棒グラフ選択肢'
        )
    else:
        return (
            [
                {'value':'total_bill', 'label':'総額'},
                {'value':'sex', 'label':'性別'},
                {'value':'smoker', 'label':'喫煙／禁煙'},
                {'value':'time', 'label':'時間帯（昼／夜）'}
            ],
            'smoker',
            'チップデータ（散布図）',
            '散布図選択肢'
        )

# コールバック２
@app.callback(
    Output('graph1', 'figure'),     # グラフ
    Input('radio1', 'value'),       # RadioItems(id='radio1')の選択肢
    State('dropdown1', 'value')     # Dropdown(id='dropdown1')で選択されている値
)
def update_graph(radio1, dropdown1):
    if dropdown1 == 'bar':
        return px.bar(
            tips,
            x='day',
            y='total_bill',
            color=radio1,
            barmode='group',
            height=600,
            title='チップデータ棒グラフ（要素：{}）'.format(radio1)
        )
    else:
        return px.scatter(
            tips,
            x='total_bill',
            y='tip',
            color=radio1,
            height=600,
            title='チップデータ散布図（要素：{}）'.format(radio1)
        )

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

連鎖コールバックの処理フローは以下の通りです。

  1. Dropdownコンポーネントのvalue属性の変化により、コールバックが呼び出され、RadioItemsコンポーネントの選択肢などを返す。（１つめのコールバック）
  2. RadioItemsコンポーネントのvalue属性の変化をきっかけに、グラフの種類とグラフのデータを反映したfigure（グラフ）を返す。（２つめのコールバック）

[ブラウザで表示]

ドロップダウンでグラフの種類が変更でき、ラジオボタンでグラフのデータが変更できることが確認できます。

Dash㉚（コールバック停止／部分）

コールバック停止（部分）

no_updateを使って、部分的にコールバックの更新を停止してみます。

コールバックのOuputを２つ設定し、値が存在しなければ片方の出力のみコールバック処理を停止します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()   # データの読み込み
gapminder2007 = gapminder[gapminder['year'] == 2007]

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1('Gapminder Graph'),
        # 散布図
        dcc.Graph(
            id='graph1',
            figure=px.scatter(
                gapminder2007, x='gdpPercap', y='lifeExp', hover_name='country'
            )
        ),
        # ホバーデータを表示するコンポーネント
        html.P(id='hover_text1', style={'fontSize':'40', 'textAlign':'center', 'backgroundColor':'#CCFFFF'}),
        html.P(id='hover_text2', style={'fontSize':'40', 'textAlign':'center', 'backgroundColor':'#FFD5EC'})
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック
@app.callback(
    Output('hover_text1', 'children'),  # データ状態に関係なくコールバック実行
    Output('hover_text2', 'children'),  # Noneであればコールバックを停止
    Input('graph1', 'hoverData')
)
def show_text1(text):
    if text is None:
        return json.dumps(text), dash.no_update
    return json.dumps(text), json.dumps(text)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数ではInputのhoverData属性が値をもたなければ、no_updateクラスを使って部分的にコールバックを停止しています。（40行目）

[ブラウザで表示]

画面をロードした直後は、１つめのPコンポーネントには‘null’が表示されていますが、２つめのPコンポーネントには何も表示されていません。（ホバーデータがないのでコールバック処理が部分的に停止されたため）

グラフ上のデータをマウスオバーすると、両方のPコンポーネントに同じデータが表示されます。（ホバーデータがありコールバック処理が停止されなかったため）

Dash㉙（コールバック停止／全体）

コールバック停止の方法

コールバックは特定の条件で停止することができます。

コールバックの停止の方法は下記の２種類があります。

  • 全体停止
    PreventUpdateクラスを使用
  • 部分停止
    no_updateクラスを使用

コールバック停止（全体）

PreventUpdateクラスを使って、hoverData属性が値を持たない場合コールバックを停止してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()   # データの読み込み
gapminder2007 = gapminder[gapminder['year'] == 2007]

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1('Gapminder Graph'),
        # 散布図
        dcc.Graph(
            id='graph1',
            figure=px.scatter(
                gapminder2007, x='gdpPercap', y='lifeExp', hover_name='country'
            )
        ),
        # ホバーデータを表示するコンポーネント
        html.P(id='hover_text1', style={'fontSize':'40', 'textAlign':'center', 'backgroundColor':'#CCFFFF'}),
        html.P(id='hover_text2', style={'fontSize':'40', 'textAlign':'center', 'backgroundColor':'#FFD5EC'})
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック１
@app.callback(
    Output('hover_text1', 'children'),
    Input('graph1', 'hoverData')
)
def show_text1(text):
    return json.dumps(text)

# コールバック２
@app.callback(
    Output('hover_text2', 'children'),
    Input('graph1', 'hoverData')
)
def show_text2(text):
    if text is None:
        raise dash.exceptions.PreventUpdate # コールバック処理を停止
    return json.dumps(text)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

ホバーデータを返すコールバックを２つ定義し、２つ目のコールバックではホバーデータがない場合コールバック処理を停止しています。（47行目）

[ブラウザで表示]

画面をロードした直後は、１つめのPコンポーネントには‘null’が表示されていますが、２つめのPコンポーネントには何も表示されていません。（ホバーデータがないのでコールバック処理が停止されたため）

グラフ上のデータをマウスオバーすると、両方のPコンポーネントに同じデータが表示されます。（ホバーデータがありコールバック処理が停止されなかったため）

Dash㉘（マウス動作　ドラッグ操作）

ドラッグ操作

selectedData属性では、ドラッグ操作で複数要素を選択することもできます。

scatter関数の引数templateのdragmode属性に‘select’を設定し、複数要素選択に設定します。（デフォルトでは‘zoom’となっています。）

レイアウトにGraphコンポーネントを２つ設定して、ドラッグして選択した複数の要素を２種類の折れ線グラフに反映します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()   # データの読み込み
gapminder2007 = gapminder[gapminder['year'] == 2007]

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1('Gapminder Graph'),
        # 散布図
        dcc.Graph(
            id='graph1',
            figure=px.scatter(
                gapminder2007, x='gdpPercap', y='lifeExp', hover_name='country',
                template={'layout':{'dragmode':'select'}} # ドラッグモードをselectにする
            )
        ),
        html.Div(
            [
                dcc.Graph(id='graph2', className='six columns'),
                dcc.Graph(id='graph3', className='six columns')
            ]
        )
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック
@app.callback(
    Output('graph2', 'figure'),
    Output('graph3', 'figure'),
    Input('graph1', 'selectedData')   # GraphのselectedData属性を指定
)
def show_text(selectedData):
    if selectedData:
        selected_countries = [data['hovertext'] for data in selectedData['points']]
        selected_df = gapminder[gapminder['country'].isin(selected_countries)]
        fig2 = px.line(selected_df, x='year', y='pop', color='country', title='各国の人口')
        fig3 = px.line(selected_df, x='year', y='lifeExp', color='country', title='各国の平均寿命')
        return fig2, fig3
    raise dash.exceptions.PreventUpdate

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数では、ドラッグで選択された複数の国を抽出し、その国の人口と平均寿命を折れ線グラフに描画しています。

[ブラウザで表示]

散布図上でドラッグし複数要素を選択すると、その要素をもとに下側の折れ線グラフが描画されることが確認できます。

Dash㉗（マウス動作　複数選択）

複数選択 (selectedData属性)

selectedData属性を使うと、グラフ上のデータを複数選択することができます。

複数選択できるようにするためには、scatter関数の引数templateのキー‘layout’のclickmode属性に‘event+select’を設定します。（23行目）

また、コールバックの入力項目に‘selectedData’を設定します。（35行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()   # データの読み込み
gapminder2007 = gapminder[gapminder['year'] == 2007]

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1('Gapminder Graph'),
        # 散布図
        dcc.Graph(
            id='graph1',
            figure=px.scatter(
                gapminder2007, x='gdpPercap', y='lifeExp', hover_name='country',
                template={'layout':{'clickmode':'event+select'}} # クリック＋Shiftで複数データを選択
            )
        ),
        # ホバーデータを表示するコンポーネント
        html.P(id='hover_text', style={'fontSize':'40', 'textAlign':'center'})
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック
@app.callback(
    Output('hover_text', 'children'),
    Input('graph1', 'selectedData')   # GraphのselectedData属性を指定
)
def show_text(text):
    return json.dumps(text)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

[ブラウザで表示]

Shiftキーを押しながら、グラフ上のデータを選択すると複数選択でき、そのデータがグラフ下に表示されます。

Dash㉖（グラフ上のマウス動作）

マウス動作

DashではGraphコンポーネントの属性から、グラフ上の要素の情報をマウス操作から取得することができます。

マウス操作で取得できる情報は下記の通りです。

属性 内容
hoverData グラフ上の１つの要素をホバーで取得する。
clickData グラフ上の１つの要素をクリックで取得する。
relayoutData グラフ上の指定した範囲の位置データを取得する。
selectedData グラフ上の複数要素を「右クリック＋Shift」またはドラッグで取得する。

ホバー取得 (hoverData属性)

hoverData属性を使って、マウスカーソルをあてた散布図のデータを表示するアプリケーションを作成します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()   # データの読み込み
gapminder2007 = gapminder[gapminder['year'] == 2007]

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1('Gapminder Graph'),
        # 散布図
        dcc.Graph(
            id='graph1',
            figure=px.scatter(
                gapminder2007, x='gdpPercap', y='lifeExp', hover_name='country'
            )
        ),
        # ホバーデータを表示するコンポーネント
        html.P(id='hover_text', style={'fontSize':'40', 'textAlign':'center'})
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック
@app.callback(
    Output('hover_text', 'children'),
    Input('graph1', 'hoverData')
)
def show_text(text):
    return json.dumps(text)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数の入力項目にはhoverDataを指定し、関数内ではhoverData属性から取得した文字列を返しています。

[ブラウザで表示]

グラフ上をマウスオーバーすると、グラフの下にカーソルをあてた箇所のデータが表示されます。

Dash㉕（レイアウトごとのコールバック　テーブル編）

レイアウトごとのコールバック（テーブル）

前回記事では、画面遷移先のページのグラフにコールバックを追加しました。

今回は画面遷移先のテーブルにコールバックを追加します。

前回同様 suppress_callback_exceptions に True を設定し、コールバックで使われるIDとレイアウトに存在するIDの一致チェックを無効化します。（10行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output

iris = px.data.iris()   # データの読み込み

app = dash.Dash(__name__, suppress_callback_exceptions=True)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        dcc.Location(id='location1'),
        html.Br(),
        dcc.Link('home', href='/'),
        html.Br(),
        dcc.Link('/table', href='/table'),
        html.Br(),
        html.Div(
            id='div1',
            style={'fontSize':'40', 'textAlign':'center', 'height':350}
        )
    ],
    style={'fontSize':'40', 'textAlign':'center'}
)

# ページごとのコンテンツ作成
home = html.H1('irisデータ')

# テーブル用
table = html.Div(
    [
        html.Div(
            [
                dcc.Dropdown(
                    id='dropdown1',
                    options=[
                        {'label':col, 'value':col} for col in iris.columns[:4]
                    ],
                    multi=True,
                    value=['sepal_length', 'sepal_width']
                )
            ],
            style={'width':'60%', 'margin':'auto'}
        ),
        dcc.Graph(id='table1')
    ]
)

# ページ切替用コールバック
@app.callback(
    Output('div1', 'children'),
    Input('location1', 'pathname')
)
def update_location(pathname):
    # pathnameごとにコンテンツを返す
    if pathname == '/table':
        return table
    else:
        return home

# テーブル更新用コールバック
@app.callback(
    Output('table1', 'figure'),
    Input('dropdown1', 'value')
)
def update_table(selected_value):
    iris_df = iris[selected_value]
    return go.Figure(
        data=go.Table(
            header={'values':iris_df.columns},
            cells={'values':[iris_df[col].tolist() for col in iris_df.columns]}
        ),
        layout=go.Layout(title='irisデータテーブル')
    )

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

[ブラウザで表示]

テーブル画面に遷移した後に、ドロップダウンから項目を選択するとその項目がテーブルに追加されます。

ドロップダウンで選択されている項目の×マークを選択すると、その項目がテーブルから削除されます。

Dash㉔（レイアウトごとのコールバック　グラフ編）

レイアウトごとのコールバック（グラフ）

前回記事では、リンクをクリックすると画面遷移を行うアプリケーションを作成しました。

今回は、画面遷移先のページのグラフにコールバックを追加します。

ポイントは10行目のsuppress_callback_exceptionsです。

Dashはアプリケーション起動時に、コールバックで使われるIDとレイアウトに存在するIDを確認し、一致しない場合は例外が発生してしまいます。

これを回避するためsuppress_callback_exceptionsにTrueを設定します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output

iris = px.data.iris()   # データの読み込み

app = dash.Dash(__name__, suppress_callback_exceptions=True)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        dcc.Location(id='location1'),
        html.Br(),
        dcc.Link('home', href='/'),
        html.Br(),
        dcc.Link('/graph', href='/graph'),
        html.Br(),
        html.Div(
            id='div1',
            style={'fontSize':'40', 'textAlign':'center', 'height':350}
        )
    ],
    style={'fontSize':'40', 'textAlign':'center'}
)

# ページごとのコンテンツ作成
home = html.H1('irisデータ')

# グラフ用
graph = html.Div(
    [
        html.Div(
            [
                html.Div(
                    [
                        html.P('X軸：'),
                        dcc.RadioItems(
                            id='radio_x',
                            options=[
                                {'label':col, 'value':col} for col in iris.columns[:4]
                            ],
                            value='sepal_width'
                        )
                    ],
                    style={'display':'inline-block'}
                ),
                html.Div(
                    [
                        html.P('Y軸：'),
                        dcc.RadioItems(
                            id='radio_y',
                            options=[
                                {'label':col, 'value':col} for col in iris.columns[:4]
                            ],
                            value='sepal_width'
                        )
                    ],
                    style={'display':'inline-block'}
                )
            ]
        ),
        dcc.Graph(id='graph1')
    ]
)

# テーブル用
table = html.Div(
    [
        html.Div(
            [
                dcc.Dropdown(
                    id='dropdown1',
                    options=[{'valuel':col, 'label':col} for col in iris.columns],
                    multi=True,
                    value=['sepal_length', 'sepal_width']
                )
            ],
            style={'width':'60%', 'margin':'auto'}
        ),
        dcc.Graph(id='table1')
    ]
)

# ページ切替用コールバック
@app.callback(
    Output('div1', 'children'),
    Input('location1', 'pathname')
)
def update_location(pathname):
    # pathnameごとにコンテンツを返す
    if pathname == '/graph':
        return graph
    else:
        return home

# グラフ更新用コールバック
@app.callback(
    Output('graph1', 'figure'),
    Input('radio_x', 'value'),
    Input('radio_y', 'value')
)
def update_graph(selected_x, selected_y):
    return px.scatter(
        iris,
        x=selected_x,
        y=selected_y,
        color='species',
        marginal_x='box',
        marginal_y='violin',
        title='irisグラフ'
    )

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

[ブラウザで表示]

グラフ画面に遷移した後に、ラジオボタンを選択すると散布図とバイオリン図のデータを変更することができます。

Dash㉓（画面遷移）

画面遷移

URLのリンクをクリックするとコンテンツが切り替わる（画面遷移する）Dashアプリケーションを作成します。

irisのデータセットを使用します。

レイアウトとしては以下の３つを配置します。

  • URLを生成するためのLocationコンポーネント
  • URLを切り替えるためのLinkコンポーネント
  • コンテンツを表示するDivコンポーネント

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output

iris = px.data.iris()   # データの読み込み

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        dcc.Location(id='location1'),       # Locationコンポーネント
        html.Br(),
        dcc.Link('home', href='/'),         # Linkコンポーネント
        html.Br(),
        dcc.Link('/graph', href='/graph'),  # Linkコンポーネント
        html.Br(),
        dcc.Link('/table', href='/table'),  # Linkコンポーネント
        html.Br(),
        html.Div(                           # Divコンポーネント
            id='div1',
            style={'fontSize':'40', 'textAlign':'center', 'height':350}
        )
    ],
    style={'fontSize':'40', 'textAlign':'center'}
)

# ページごとのコンテンツ作成
home = html.H1('irisデータ')

graph = dcc.Graph(
    figure=px.scatter(
        iris,
        x='sepal_width',
        y='sepal_length',
        color='species',
        title='irisグラフ'
    )
)

table = dcc.Graph(
    figure=go.Figure(
        data=go.Table(
            header={'values':iris.columns},
            cells={'values':[iris[col].tolist() for col in iris.columns]}
        ),
        layout=go.Layout(title='irisデータテーブル')
    )
)

# コールバックの定義
@app.callback(
    Output('div1', 'children'),
    Input('location1', 'pathname')
)
def update_location(pathname):
    # pathnameごとにコンテンツを返す
    if pathname == '/graph':
        return graph
    elif pathname == '/table':
        return table
    else:
        return home

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

各ページのコンテンツとしては、タイトル・散布図・テーブルを作成します。

コールバック関数では、作成したコンテンツを 引数 pathname ごとに返します。

[ブラウザで表示]

最初の画面としては、タイトルとリンクが並んだページが表示されます。

“/graph”をクリックするとグラフが表示され、“/table”をクリックするとテーブルが表示されるようになりました。

Dash㉒（パターンマッチング・コールバック／ALLSMALLERセレクタ その２）

ALLSMALLERセレクタでグラフ表示

ALLSMALLERセレクタを使ってグラフを表示してみます。

２つ目のコールバック関数(update_graph)の一つ目のInputでALLSMALLERセレクタを指定しています。

こうするとコンポーネントを追加する前のドロップダウンで選択された国名を全て取得することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output, State, MATCH, ALLSMALLER

gapminder = px.data.gapminder()   # データの読み込み
# コンポーネントを横に並べるためのスタイル
half_style = {'width':'50%', 'display':'inline-block'}

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.Button('Push', id='button1', n_clicks=0),
        html.Div(id='div1', children=[])
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
    Output('div1', 'children'),
    Input('button1', 'n_clicks'),
    State('div1', 'children'),
    prevent_initial_calll=True
)
def update_layout(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'dropdown1', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            ),
            dcc.Dropdown(
                id={'type':'dropdown2', 'index':n_clicks},
                options=[
                    {'label':col, 'value':col} for col in gapminder.columns[3:6]
                ],
                value="lifeExp"
            ),
            dcc.Graph(id={'type':'graph1', 'index':n_clicks})
        ],
        style=half_style
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output({'type':'graph1',    'index':MATCH}, 'figure'),
    Input({'type': 'dropdown1', 'index':ALLSMALLER}, 'value'),
    Input({'type': 'dropdown1', 'index':MATCH}, 'value'),
    Input({'type': 'dropdown2', 'index':MATCH}, 'value')
)
def update_graph(allsmaller_value, matching_values, selected_col):
    selected_value = allsmaller_value + [matching_values]
    selecred_coountries = gapminder[gapminder['country'].isin(selected_value)]
    return px.line(selecred_coountries, x='year', y=selected_col, color='country')

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

２つ目のコールバック関数(update_graph)では、追加前のコンポーネントと自身のコンポーネントで取得した国名のリストを作成しています。

そのリストをもとにDataFrameを作成し、そのDataFrameを使って折れ線グラフを作成します。

[ブラウザで表示]

ボタンを押すと、ドロップダウンと折れ線グラフが追加されます。

ALLSMALLERセレクタを使うことにより、折れ線グラフには追加前のドロップダウンで選択されている全ての国名と自身のドロップダウンで選択された国名が表示されます。

またドロップダウンの選択を変えることにより、コンポーネント追加後の全ての折れ線グラフに選択した国のデータが反映されることが確認できます。