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

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

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

ALLSMALLERセレクタ

ALLSMALLERセレクタを使うと、属性”type”の値が同じ かつ 属性”index”の値が小さい 全てのコンポーネントの属性値をコールバック関数で利用することができます

[ソースコード]

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
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()   # データの読み込み

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_layouth(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]
            ),
            html.P(id={'type':'text_show', 'index':n_clicks})
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output({'type':'text_show', 'index':MATCH}, 'children'),
#    Input({'type': 'dropdown1', 'index':MATCH}, 'value')
    Input({'type': 'dropdown1', 'index':ALLSMALLER}, 'value')   # MATCHセレクタをALLSMALLERセレクタに変更
)
def update_graph(selected_values):
    return str(selected_values)

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

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

Pコンポーネントの属性”index”よりも小さな値を持つドロップダウンのvalue属性の値が、リストに格納されPコンポーネントに表示されます。

[ブラウザで表示]

ボタンを押すたびにドロップダウンとリストの内容を表示するPコンポーネントが追加され、自身よりも上部に表示されている（つまり属性indexの値が小さい）ドロップダウンの値が全て表示されていることを確認できます。

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

MATCHセレクタでグラフ表示

MATCHセレクタを使って、ボタンをクリックすると２つドロップダウンとグラフが追加されるアプリケーションを作成します。

ドロップダウンで選択した国名と項目をそれぞれのグラフに表示します。

[ソースコード]

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
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

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':MATCH}, 'value'),
    Input({'type': 'dropdown2', 'index':MATCH}, 'value')
)
def update_graph(selected_values, selected_col):
    gap = gapminder[gapminder['country'] == selected_values]
    return px.line(gap, x='year', y=selected_col)

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

１つ目のコールバック(update_layout関数)では、ボタンをクリックすると２つのドロップダウンとグラフを追加します。

２つ目のコールバック(update_graph関数)では、ドロップダウンの国名または項目を選択すると、選択された国名と項目の折れ線グラフを返します。

出力項目、入力項目の指定ではIDキー”index”にMATCHが設定されているため、IDキー”index”が同じコンポーネントのみにコールバックが適用されます。

[ブラウザで表示]

ボタンを押すごとに、ドロップダウンとグラフがそれぞれ追加され、ドロップダウンの選択に応じて折れ線グラフが変化することを確認できます。

Dash⑲（パターンマッチング・コールバック／MATCHセレクタ）

MATCHセレクタ

MATCHセレクタを使うと、IDキー”index”の値が一致するコンポーネントにして、コールバックを適用することができます。

gapminderデータセットを使って国名のドロップダウンをUIに追加し、その値を出力するアプリケーションを作成し、MATCHセレクタの動作を確認してみます。

[ソースコード]

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
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()   # データの読み込み

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_layouth(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]
            ),
            html.P(id={'type':'text_show', 'index':n_clicks})
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output({'type':'text_show', 'index':MATCH}, 'children'),
    Input({'type': 'dropdown1', 'index':MATCH}, 'value')
)
def update_graph(selected_values):
    return str(selected_values)

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

レイアウトには、ボタンと新たなコンポーネントを追加するためのDivコンポーネントを配置します。

１つ目のコールバック(update_layout関数)では、ボタンがクリックされるとドロップダウンとＰコンポーネントを追加します。

２つ目のコールバック(update_graph関数)では、入力項目と出力項目の指定IDキー”index”にMATCHを設定します。

こうすることでIDキー”index”に渡された値が同じもの同士に、コールバックが適用されドロップダウンで選択された値がそれぞれ表示されます。

[ブラウザで表示]

ボタンを押すたびに、ドロップダウンとＰコンポーネントが追加され、ドロップダウンの選択値がそれそれのＰコンポーネントに表示されることが確認できます。

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

ALLセレクタでグラフ表示

前回記事では、ALLセレクタを使って複数のコンポーネントの選択値をまとめて取得することができました。

今回は、選択した複数の選択値を折れ線グラフに反映します。

[ソースコード]

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
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, ALL

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

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

app.layout = html.Div(
    [
        html.Button('Push', id='button1', n_clicks=0),
        html.Div(id='div1', children=[]),
        html.Div(id='select1', 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_layouth(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]
            )
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output('select1', 'children'),
    Input({'type': 'dropdown1', 'index':ALL}, 'value'),
    prevent_initial_calll=True
)
def update_graph(selected_values):
    # 全てのドロップダウンで選択された国のデータを作成し、可視化する。
    selected_countries = gapminder[gapminder["country"].isin(selected_values)]
    return dcc.Graph(
        figure=px.line(selected_countries, x='year', y='lifeExp', color='country')
    )

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

２つめのコールバック関数(update_graph)で、各ドロップダウンで選択された全ての値を折れ線グラフに反映しています。

[ブラウザで表示]

国名を複数選択すると、そのデータが折れ線グラフに反映されることが確認できます。

Dash⑰（パターンマッチング・コールバック／ALLセレクタ）

パターンマッチング・コールバック

パターンマッチング・コールバックとは、条件に合ったコンポーネントの値を利用するコールバックです。

パターンマッチング・コールバックを使うと、UIに新たにコンポーネントを加えたり、そのコンポーネントに対してコールバックを適用したりすることができます。

パターンマッチング・コールバックを作成するために、次の３種類のセレクタを条件に使用します。

  • ALLセレクタ
  • MATCHセレクタ
  • ALLSMALLERセレクタ

ALLセレクタ

ALLセレクタは、IDキー”type”が一致する全てのコンポーネントをコールバックで利用できるセレクタです。

今回は、ボタンをクリックすると新たにドロップダウンが追加されるアプリケーションを作成します。

ドロップダウンではcountry列に含まれる国名が選択でき、各ドロップダウンで選択された全ての国名を画面下部に表示します。

[ソースコード]

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 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, ALL

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

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

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

# コールバックの定義①
@app.callback(
    Output('show_drop', 'children'),
    Input('add_button', 'n_clicks'),
    State('show_drop', 'children'),
    prevent_initial_calll=True
)
def update_layout(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'my_dropdown', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            )
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output('content', 'children'),
    Input({'type': 'my_dropdown', 'index':ALL}, 'value'),
    prevent_initial_calll=True
)
def update_graph(selected_values):
    # 全てのドロップダウンで選択された国のリストを文字列にして返す
    return str(selected_values)

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

１つ目のコールバック関数(update_layout)では、ボタンがクリックされるとUIにドロップダウンを追加します。

２つ目のコールバック関数(update_graph)では、全てのドロップダウンの選択結果を文字列にして返すために、ALLセレクタをInputのインスタンスに設定しています。

パターンマッチング・コールバックでは、Inputメソッドなどの IDキー”index” に対して、セレクタを渡すことにより選択するコンポーネントを指定します。

今回はALLセレクタを使って、IDキーが “type”:”my_dropdown”となっているコンポーネントの全てのvalue値をコールバックで返します。

[ブラウザで表示]

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

またそれぞれのドロップダウンで国名を選択すると、選択された国名が全て画面下部にテキストで表示されます。

Dash⑯（コールバック／複数入力）

tipsデータセットを用いて、出力と入力が２つずつあるアプリケーションを作成します。

複数の入出力があるコールバック

曜日を選択するドロップダウンと、グラフを選択するドロップダウンを配置します。

グラフはドロップダウンで選択されたグラフ（棒グラフ／散布図）が表示されます。

  • 棒グラフ
    曜日ごとの売り上げの累計を表示。
  • 散布図
    X軸に会計額、Y軸にチップの金額を表示。

コールバック関数では選択された曜日とグラフの種類を抽出します。

この選択された曜日とグラフの種類に合わせてグラフを描画し、見出しと図形（figure）を返します。

[ソースコード]

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
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

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

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

app.layout = html.Div(
    [
        html.H3(id='title', style={'textAlign':'center'}),
        html.Div(
            [
                html.Div(
                    [
                        html.H4('曜日選択'),
                        dcc.Dropdown(
                            id='day_selector',
                            options=[
                                {'value':d, 'label':d}
                                for d in tips.day.unique()
                            ],
                            multi=True,
                            value=['Thur', 'Fri', 'Sat', 'Sun']
                        )
                    ]
                ),
                html.Div(
                    [
                        html.H4('グラフ選択'),
                        dcc.Dropdown(
                            id='graph_selector',
                            options=[
                                {'value':'bar', 'label':'bar'},
                                {'value':'scatter', 'label':'scatter'}
                            ],
                            value='bar',
                        )
                    ]
                )
            ]
        ),
        dcc.Graph(id='app-graph')
    ]
)

# コールバックの定義
@app.callback(
    Output('title', 'children'),
    Output('app-graph', 'figure'),
    Input('day_selector', 'value'),
    Input('graph_selector', 'value'),
)
def update_graph(selected_days, selected_graph):
    selected_df = tips[tips['day'].isin(selected_days)]     # データフレーム作成
    if selected_graph == 'bar':
        title = ('曜日ごとの売り上げ（棒グラフ）',)
        figure = px.bar(selected_df, x='day', y='total_bill', height=500)
    else:
        title = ('テーブルごとデータ（散布図）',)
        figure = px.scatter(selected_df, x='total_bill', y='tip', color='smoker', height=500)
    return title, figure

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

曜日選択用のドロップダウンは複数選択とし、グラフ選択用のドロップダウンは単数選択としました。

曜日の選択肢は、データのday列のユニーク要素を使って作成しています。

上記ソースを実行すると、コンソールにURLが表示されるのでブラウザで表示します。

[ブラウザで表示]

選択された曜日がグラフに反映され、選択された種類のグラフが表示されることを確認できます。