Dash⑥（コールバック）

コールバックを使うと、Dashアプリケーションに対して動的な変更を行うことができます。

前回記事で作成したアプリケーションにコールバックを追加して、ドロップダウンで選択された色に背景色を変更してみます。

コールバック

Dashでコールバックを設定するには、Dash.callbackデコレータでデコレートしたコールバック関数を定義します。（37～42行目）

コールバックの設定手順は下記の通りです。

  1. コールバック用のimport文追加。
  2. 入出力のコンポーネントにID追加。
  3. コールバック関数の定義。
    デコレータに対してコールバック関数の出力先と入力を指定。（ID名と属性名を指定）
    コールバックは入力要素の指定された属性が変化するたびに呼び出されます。

今回定義したコールバック関数は、ドロップダウンで選択された色を背景色の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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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     # 1. import追加

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

# 横幅を80%、中央寄せにし、上下に5%の余白
core_style = {'width':'80%', 'margin':'5% auto'}

app.layout = html.Div(
    [
        # 見出し
        html.H1('こんにちは、Dash', style={'textAlign':'center'}),
        # ドロップダウン
        dcc.Dropdown(
            id='dropdown',      # 2. ID名を追加
            options=[
                {'label':'white',  'value':'white'},
                {'label':'yellow', 'value':'yellow'}
            ],
            value='white',
            style=core_style
        ),
        # グラフ
        dcc.Graph(
            figure = px.bar(x=[1, 2, 3, 4, 5],
                            y=[3, 4, 2, 5, 1]),
            style=core_style
        )
    ],
    id='all-components'        # 2. ID名を追加
)

# 3. コールバックを定義
@app.callback(
    Output('all-components', 'style'),  # 戻り値の出力先を設定
    Input('dropdown', 'value')          # コールバックの呼び出し要素を指定
)
def update_background(selected_value):
    return {'backgroundColor':selected_value, 'padding':'3%'}   # 返り値

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

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

[ブラウザで表示]

ドロップボックスで色を選択すると、その色で背景色が変わるようになりました。

Dash⑤（レイアウト）

レイアウト

Dashでアプリケーションの見た目を調整するためには、コンポーネントを組み合わせてレイアウトを設定します。

次のコンポーネントを使って、タイトル、ドロップダウン、グラフを持つレイアウトを作成します。

  • Divコンポーネント（11行目）
  • H1コンポーネント（14行目）
  • Dropdownコンポーネント（16行目）
  • Graphコンポーネント（25行目）

複数のコンポーネントを持つレイアウトを作成するためには、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
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

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

# 横幅を80%、中央寄せにし、上下に5%の余白
core_style = {'width':'80%', 'margin':'5% auto'}

app.layout = html.Div(
    [
        # 見出し
        html.H1('こんにちは、Dash', style={'textAlign':'center'}),
        # ドロップダウン
        dcc.Dropdown(options=
            [
                {'label':'white',  'value':'white'},
                {'label':'yellow', 'value':'yellow'}
            ],
            value='white',
            style=core_style
        ),
        # グラフ
        dcc.Graph(
            figure = px.bar(x=[1, 2, 3, 4, 5],
                            y=[3, 4, 2, 5, 1]),
            style=core_style
        )
    ]
)

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

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

[ブラウザで表示]

タイトル、ドロップダウン、グラフを持つレイアウトを表示することができました。

Dash④（グラフ作成）

グラフ作成

Dashでグラフを表示するには、Graphコンポーネントの引数 figureに、plotly.pyで作成したfigureを設定します。

次のコードでは、bar関数を使って、棒グラフを作成しています。（10～11行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

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

app.layout = dcc.Graph(
    # bar関数で棒グラフを作成
    figure = px.bar(x=[1, 2, 3, 4, 5],
                    y=[3, 4, 2, 5, 1])
)

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

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

[ブラウザで表示]

棒グラフを表示することができました。

Dash③（スタイル設定）

スタイル設定

Dashでは、コンポーネントの引数 styleに辞書型でcssを設定すると、スタイルを設定することができます。

キーがcssのプロパティをキャメルケースにしたもので、値がcssのプロパティ値となります。

（キャメルケースとは、２つ目以降の単語の１文字目を大文字にする命名規則です。
　例：background-color ⇒ backgroundColor）

下記のコードでは、文字色を赤色に変更し、横位置を中央に設定しています。（8行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
import dash
import dash_html_components as html

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

# コンポーネントをlayout属性に設定
app.layout = html.H1('Hello Dash',
                     style={'color':'red', 'textAlign':'center'})   # スタイルを設定

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

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

[ブラウザで表示]

スタイルを設定して表示することができました。

Dash②（最小アプリケーション）

最小アプリケーション

Dashを使って、最小のアプリケーションを作成します。

作成手順は下記の通りです。

  1. Dashインスタンスを作成（4行目）
  2. コンポーネントをlayout属性に設定（6行目）
  3. アプリケーションを起動（9行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
import dash
import dash_html_components as html

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

app.layout = html.H1("Hello Dash")  # コンポーネントをlayout属性に設定

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

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

[ブラウザで表示]

とても簡単にDashアプリケーションを起動することができました。

Dash①（概要とインストール）

Dashとは

DashはPythonでデータ分析やレポート作成、モデリングなどを行うアプリケーションの構築ができるWebフレームワークです。

Dashには次のような特徴があり、インタラクティブに可視化できるアプリケーションを容易に作成できます。

  • グラフをplotly.pyやPlotly Expressを使って作成できる。
  • 複雑に動作するユーザインターフェースをPythonで簡潔に実装できる。
  • コールバックを用いて容易にユーザインターフェースを更新できる。

また、Dashアプリケーションはサーバやクラウドで共有することができます。

データを可視化し、アプリケーションをすばやく構築し共有することで、さまざまなフィードバックをえたり次のアクションに繋げることが可能です。

Dashでの可視化事例

GapminderではDashを使ってインタラクティブなアプリケーションを提供しています。

Gapminder - 世界の人口をバブルチャートで表示

[参考サイト]

Dashインストール

Dashをインストールするためには、コンソールから下記のコマンドを実行します。

[コンソール]

1
pip install dash

次回から、Dashを使って簡単なWebアプリケーションを構築していきます。

Plotly㉛（メッシュグラフ）

メッシュグラフ

メッシュグラフは３次元のデータをドロネー三角分割で算出された図形の面で表現します。

Plotlyでメッシュグラフを表示するにはMesh3dクラスを使用します。

Mesh3dクラスの引数 x、y、zにX値、Y値、Z値を設定します。

[Google Colaboratory]

1
2
3
4
5
6
7
8
import numpy as np
import plotly.graph_objects as go

np.random.seed(3)
mesh3d_data = np.random.randn(3, 60)
go.Figure(
    go.Mesh3d(x=mesh3d_data[0], y=mesh3d_data[1], z=mesh3d_data[2])
).show()

[実行結果]

グラフをドラッグすると、3Dグラフをいろいろな角度で表示することができます。

Plotly㉚（サーフェスグラフ）

サーフェスグラフ

サーフェスグラフは３次元のデータを面で表現します。

Plotlyでサーフェスグラフを表示するにはSurfaceクラスを使用します。

Surfaceクラスの引数 x、y、zにX値、Y値、Z値を設定します。

Z値はカラースケールで表示されます。

[Google Colaboratory]

1
2
3
4
5
6
import numpy as np
import plotly.graph_objects as go

surface_x, surface_y = np.mgrid[-20:20, -20:20]
surface_z = surface_x ** 3 + surface_y ** 3 + surface_x * surface_y
go.Figure(go.Surface(x=surface_x, y=surface_y, z=surface_z)).show()

[実行結果]

グラフをドラッグすると、3Dグラフをいろいろな角度で表示することができます。

Plotly㉙（3D折れ線グラフ）

3D折れ線グラフ

Plotlyで3D折れ線グラフを表示するにはScatter3dクラスを使用します。

Scatter3dクラスの引数 x、y、zにX値、Y値、Z値を設定します。（11～13行目）

折れ線グラフとして描画する場合は、引数 modeに“lines”を設定します。（14行目）

以下のコードでは三角関数で生成したデータを3D折れ線グラフで表示しています。

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import numpy as np
import plotly.graph_objects as go

line3d_z = np.linspace(-5, 5, 100)
theta = np.linspace(-4 * np.pi, 4 * np.pi, 100)
line3d_r = line3d_z ** 2 + 5
line3d_x = line3d_r * np.sin(theta)
line3d_y = line3d_r * np.cos(theta)
go.Figure(
    go.Scatter3d(
        x=line3d_x,
        y=line3d_y,
        z=line3d_z,
        mode="lines"    # 線で描画
    )
).show()

[実行結果]

グラフをドラッグすると、3Dグラフをいろいろな角度で表示することができます。

Plotly㉘（3D散布図）

3D散布図

Plotlyで3D散布図を表示するにはScatter3dクラスを使用します。

Scatter3dクラスの引数 x、y、zにX値、Y値、Z値を設定します。

散布図として描画する場合は、引数 modeに“markers”を設定します。

またScatterクラスと同様に、要素の色やサイズの大きさで表現することができます。

以下のコードでは5×100の乱数を生成し、それぞれの値(x,y,z)およびサイズ(size)と色(color)で表現した3D散布図を表示しています。

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import numpy as np
import plotly.graph_objects as go

np.random.seed(1)
bubble3d_data = np.random.rand(5, 100)
go.Figure(
    go.Scatter3d(
        x=bubble3d_data[0],
        y=bubble3d_data[1],
        z=bubble3d_data[2],
        mode="markers",   # 点で描画
        # 要素のサイズと色を指定
        marker={"size": bubble3d_data[3] * 10, "color": bubble3d_data[4]}
    )
).show()

[実行結果]

グラフをドラッグすると、3Dグラフをいろいろな角度で表示することができます。