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が表示されるのでブラウザで表示します。

[ブラウザで表示]

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

Dash⑮（コールバック／スライダー）

スライダー

Sliderコンポーネントのハンドル位置に応じて、見出しに表示される値が変化するDashアプリケーションを作成します。

app.callbackデコレータの出力項目に見出しのIDと属性、入力項目にはSliderコンポーネントのIDと属性を設定します。（21～24行目）

コールバック関数はSliderコンポーネントの値を返り値とします。（25～26行目）

[ソースコード]

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
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

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

app.layout = html.Div(
    [
        html.H1(id='head-title'),
        dcc.Slider(
            id='slider1',
            value=0,
            min=0,
            max=10,
            updatemode='drag'
        )
    ]
)

@app.callback(
    Output('head-title', 'children'),
    Input('slider1', 'value'),
)
def update_title(num_value):
    return num_value

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

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

[ブラウザで表示]

スライダーの位置を変えると、見出しの数字が変わるアプリケーションができました。

Dash⑭（コールバック／ボタン）

コールバック

コールバックは、インタラクティブなDashアプリケーションを作成するときに重要な機能です。

ユーザによるスライダーなどでの選択や、グラフ上でのマウスの動きをもとに、コールバックを利用することでインタラクティブなアプリケーションを構築できます。

ボタンクリック

ボタンをクリックするとテキストエリアへ入力された文字を見出しに反映するDashアプリケーションを作成します。

コールバックを実装するためには下記の設定を行います。

  1. レイアウトの作成で、各コンポーネントにIDを設定。（10行目、12行目、15行目）
  2. コールバック関数を定義。（19～25行目）

[ソースコード]

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
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

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

app.layout = html.Div(
    [
        html.H1(id='head-title'),
        dcc.Textarea(
            id='text-content',
            value='初期値',
        ),
        html.Button(id='btn1', n_clicks=0, children='submit')
    ]
)

@app.callback(
    Output('head-title', 'children'),
    Input('btn1', 'n_clicks'),
    State('text-content', 'value')
)
def update_title(n_clicks, text_value):
    return text_value

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

コールバック関数は次のように動作します。

  1. コールバック関数の引数に、InputインスタンスとStateインスタンスに指定された属性が割り当てられる。
  2. コールバック関数はInputインスタンスで指定した属性が更新されると呼び出され、その返り値をOutputインスタンスで指定した属性で渡す。

コールバック関数の関数名と引数名は任意です。(24行目)

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

[ブラウザで表示]

テキストエリアに文字を入力してボタンを押すと、上部のテキストを変更されます。

Dash⑬（複数のコンポーネントを組み合わせた配置）

複数のコンポーネントを組み合わせた配置

コンポーネントの配置を利用して、いろいろなコンポーネントを配置してみます。

コンポーネントの配置が複雑になる場合は、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
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
117
118
119
120
121
122
123
124
import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

style1 = {
    'width':'40%',              # 横幅
    'height':'280px',           # 高さ
    'backgroundColor':'yello',  # 背景色
    'margin':'2%',              # マージン
    'display':'inline-block'    # 横並びにする
}

style2 = {
    'width':'27%',              # 横幅
    'height':'280px',           # 高さ
    'backgroundColor':'skyblue',# 背景色
    'margin':'2%',              # マージン
    'display':'inline-block'    # 横並びにする
}

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

# 左上のマークダウン
top_left = html.Div(
    [
        html.H1('Dashアプリケーション'),
        dcc.Markdown(
            '''
            5つのDivクラスの領域に、複数のコンポーネントを配置
            ''',
            style={
                'fontsize':20,
                'textAlign':'left',
                'backgroundColor':'lightgray',
                'padding':'3%'
            }
        )
    ],
    style=style1
)

# グラフの定義
fig=px.line(
    x=[1,2,3,4,5],
    y=[[4,3,5,2,6],[3,5,4,6,3]],
    title='Dash Graph'
)
fig.data[0].name='茨城'
fig.data[1].name='千葉'


# 右上のグラフ
top_right = html.Div(
    [
        dcc.Graph(
            figure=fig
        )
    ],
    style=style1
)

# 左下のドロップダウンとスライダー
buttom_left = html.Div(
    [
        html.H3('ドロップダウン'),
        dcc.Dropdown(
            options=[{'label':'埼玉','value':'埼玉'},
                     {'label':'栃木','value':'栃木'}],
            value='栃木'
        ),
        html.H3('スライダー'),
        dcc.Slider(min=-10, max=10, marks={i: f'label{i}' for i in range(-10, 11, 5)})
    ],
    style=style2
)

# 左中央のテキストエリアとボタン
buttom_center = html.Div(
    [
        html.H3('テキストエリア'),
        html.Textarea(style={'height':60, 'width':'60%'}),
        html.Button('ボタン')
    ],
    style=style2
)

# 右下のチェックリストとラジオボタン
buttom_right = html.Div(
    [
        html.H3('チェックリスト'),
        dcc.Checklist(
            options=[
                {'label':'福岡', 'value':'福岡'},
                {'label':'佐賀', 'value':'佐賀'},
                {'label':'宮崎', 'value':'宮崎'}
            ],
            value=['福岡','宮崎'],
            className='five columns'
        ),
        html.H3('ラジオボタン'),
        dcc.RadioItems(
            options=[
                {'label':'高松', 'value':'高松'},
                {'label':'松山', 'value':'松山'},
                {'label':'高知', 'value':'高知'}
            ],
            value='松山',
            className='five columns'
        ),
    ],
    style=style2
)

app.layout = html.Div(
    children=[
        html.Div([top_left, top_right]),
        html.Div([buttom_left, buttom_center, buttom_right])
    ]
)

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

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

[ブラウザで表示]

いろいろな種類のコンポーネントを配置することができました。

Dash⑫（複数コンポーネントの配置／スタイルシートをカスタマイズ）

スタイルシートをカスタマイズ

今回は、Dashの公式ドキュメントで用いられるスタイルシートと引数 styleを併用して、複数のDivコンポーネントを配置します。

要素の横並びのcssはスタイルシートのクラス名を引数 classNameに設定します。

[ソースコード]

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
import dash
import dash_html_components as html

ex_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
# ファイル名をアプリ名として起動。その際に外部CSSを指定する。
app = dash.Dash(__name__, external_stylesheets=ex_stylesheets)

# 1段目用のcss辞書
style1 = {'height':'200px', 'margin':'2%', 'backgroundColor':'green'}

# 2段目用のcss辞書
style2 = {'height':'200px', 'backgroundColor':'skyblue'}

app.layout = html.Div(
    [
        html.H1('5つの長方形を並べたアプリケーション'),
        # 1段目の2つの長方形
        html.Div(
            [
                html.Div(style=style1, className='five columns'),
                html.Div(style=style1, className='five columns')
            ]
        ),
        html.Div(
            [
                html.Div(style=style2, className='four columns'),
                html.Div(style=style2, className='four columns'),
                html.Div(style=style2, className='four columns')
            ]
        )
    ]
)

if __name__ == '__main__':
    # `debug=True`でhot-reloadingモードを有効にし、コード上の変更を画面に反映する。
    app.run_server(debug=True)

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

[ブラウザで表示]

スタイルシートと引数 styleを併用して、複数のDivコンポーネントを配置することができました。

Dash⑪（複数コンポーネントの配置／外部css）

外部cssを使ったスタイル設定

今回は外部cssを使って、複数コンポーネントを配置します。

まずは、下記のようにcssを定義します。

Divコンポーネントのスタイルを設定するcss（①②）と、横並びにするcss（③）を定義しています。

[ソースコード]

assets/style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* ①みどり色の長方形 */
.green_square {
    width:40%;
    height:200px;
    background-color:green;
    margin:2%;
}

/* ②スカイブルーの長方形 */
.skyblue_square {
    width:27%;
    height:200px;
    background-color:skyblue;
    margin:2%;
}

/* ③要素を横並びにする */
.columns {
    float:left;
}

上記のcssファイルは、assetsフォルダの配下に格納しておきます。

次に、外部cssを参照するDashアプリケーションを作成します。

各コンポーネントのclassName属性に対応するcssのクラス名を渡し、各コンポーネントのスタイルを設定します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import dash
import dash_html_components as html

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

app.layout = html.Div(
    [
        html.H1('５つの長方形を並べたアプリケーション'),
        # 1行目、2つの長方形
        html.Div(
            [html.Div(className='green_square columns'),
             html.Div(className='green_square columns')]
        ),
        # 1行目、2つの長方形
        html.Div(
            [html.Div(className='skyblue_square columns'), 
             html.Div(className='skyblue_square columns'), 
             html.Div(className='skyblue_square columns')]
        )
    ]
)

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

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

[ブラウザで表示]

外部cssを使って、複数のDivコンポーネントを配置することができました。

Dash⑩（複数コンポーネントの配置／引数 style）

複数Divコンポーネントの配置

２種類の長方形スタイルを定義し、１行目に２つ、２行目に３つの長方形を表示してみます。

Divコンポーネントに複数の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
import dash
import dash_html_components as html

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

style1 = {
    'width':'40%',              # 横幅
    'height':'200px',           # 高さ
    'backgroundColor':'green',  # 背景色
    'margin':'2%',              # マージン
    'display':'inline-block'    # 横並びにする
}

style2 = {
    'width':'27%',              # 横幅
    'height':'200px',           # 高さ
    'backgroundColor':'skyblue',# 背景色
    'margin':'2%',              # マージン
    'display':'inline-block'    # 横並びにする
}

app.layout = html.Div(
    [
        # 1行目、2つの長方形
        html.Div(
            [html.Div(style=style1), html.Div(style=style1)],
            id='first_leader'
        ),
        # 2行目、3つの長方形
        html.Div(
            [html.Div(style=style2), html.Div(style=style2), html.Div(style=style2)],
            id='second_leader'
        )
    ],
    id='leader'
)

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

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

[ブラウザで表示]

複数のDivコンポーネントを配置することができました。

Dash⑨（複数コンポーネントの配置／引数 style）

複数コンポーネントの配置

Dashで、複数のコンポーネントを配置するには、下記の３種類の方法があります。

  • Divコンポーネントの引数 styleを使う。
  • 外部cssを使う。
  • Divコンポーネントにコンポーネントを渡す。

Divコンポーネントの引数 styleを使った配置

今回は引数 styleを使った複数コンポーネントの配置を試していきます。

まずは、Divコンポーネントを確認しやすくするために、cssを用いて形や色を設定します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import dash
import dash_html_components as html

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

app.layout = html.Div(
    # スタイルを設定
    style = {
        'width':'400px',            # 横幅
        'height':'250px',           # 高さ
        'backgroundColor':'yellow', # 背景色
        'margin':'50px auto 50px'   # マージン領域を上下50pxにして、中央寄せ
    }
)

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

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

[ブラウザで表示]

黄色の長方形（Divコンポーネント）がブラウザの中央に表示されました。

次回は、今回のように色付けしたDivコンポーネントを複数配置します。