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コンポーネントを複数配置します。

Dash⑧（グラフの配置／plotly.py）

plotly.py

plotly.pyを使って、散布図を表示してみます。

前回記事同様、gapminderデータセットの2007年分データを利用します。

plotly.pyのFigureオブジェクトを作成し（10～28行目）、Graphコンポーネントの引数 figureに設定しています。

大陸ごとにScatter関数を実行し、グループ化しています。（凡例の大陸を選択することで表示／非表示を切替可能です）

[ソースコード]

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
import dash
import dash_core_components as dcc
import plotly
import plotly.graph_objects as go

gapminder = plotly.data.gapminder()
gapminder2007 = gapminder[gapminder["year"] == 2007]

# figureの作成
fig = go.Figure()
for c in gapminder2007.continent.unique():
    fig.add_trace(
        go.Scatter(
            x=gapminder2007.loc[gapminder2007['continent'] == c, 'gdpPercap'],
            y=gapminder2007.loc[gapminder2007['continent'] == c, 'pop'],
            name=c,
            mode='markers',
            marker={
                'size': gapminder2007.loc[gapminder2007['continent'] == c, 'lifeExp'] / 2
            },
            text=gapminder2007.loc[gapminder2007['continent'] == c, 'country']
        )
    )
fig.update_layout(
    xaxis={'type': 'log', 'title': 'gdpPercap'},
    yaxis={'type': 'log', 'title': 'pop'},
    title='Gapminder'
)

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

app.layout = dcc.Graph(
    figure=fig
)

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

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

[ブラウザで表示]

Dashアプリケーションで、plotly.pyを使い散布図を表示することができました。

Dash⑧（グラフの配置／Plotly Express）

Dashアプリケーションでは、Graphコンポーネントの引数 figureにfigureを設定してグラフを作成します。

Plotly Express

Plotly Expressを使って、散布図を表示してみます。

gapminderデータセットの2007年分データを利用し、散布図の各要素を次のように設定します。

  • X軸
    一人当たりのGDP “gdpPercap”
  • Y軸
    人口 “pop”
  • マーカーサイズ
    平均寿命 “lifeExp”
  • カラースケール
    大陸名 “continent”
  • ホバーツール
    国名 “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
import dash
import dash_core_components as dcc
import plotly.express as px

gapminder = px.data.gapminder()
gapminder2007 = gapminder[gapminder["year"] == 2007]

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

app.layout = dcc.Graph(
    figure=px.scatter(
        gapminder2007,          # データセット
        x="gdpPercap",          # X軸
        y="pop",                # Y軸
        size="lifeExp",         # マーカーサイズ
        color="continent",      # カラースケール
        hover_name="country",
        log_x=True,             # X軸を対数に設定
        log_y=True,             # Y軸を対数に設定
        title="Gapminder 2007"  # タイトル
    )
)

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

scatter関数で作成したfigureを、Graphコンポーネントの引数 figureに設定しています。

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

[ブラウザで表示]

Dashアプリケーションで、Plotly Expressを使い散布図を表示することができました。