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グラフをいろいろな角度で表示することができます。

Plotly㉗（高精細な地図 mapbox）

mapboxを利用すると、より高精細な地図を表示することができます。

mapboxサイトで事前にアカウントを登録し、アクセストークンを取得しておきましょう。

mapbox - https://www.mapbox.jp/

高精細な地図 mapbox

mapboxを利用するには、layoutのmapbox属性にplotly.objects.layout.Mapboxインスタンスを設定します。

Mapboxクラスの引数は下記の通りです。

  • accesstoken
    mapboxのアクセストークン
  • center
    描画領域中央の緯度(lat)、経度(lon)
  • zoom
    ズームレベル

下記のコードでは、Scattermapboxクラスを使って、mapboxを利用した散布図を地図上に描画しています。
(Scattergeoと同様の引数を使用することができます。)

[Google Colaboratory]

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
import numpy as np
import plotly.graph_objects as go

populations = np.array([38_505_000, 34_365_000, 28_125_000])
area = np.array([8_223, 3_367, 2_240])
lon, lat = [139.691711, 106.845131, 77.216667], [35.6, -6.214620, 28.666668]
text = ["Tokyo", "Jakarta", "Delhi"]

mapbox_token = '********************' # アクセストークンを設定

go.Figure(
    go.Scattermapbox(
        lon=lon,
        lat=lat,
        text=text,
        marker={
            "size": populations / 1000000,
            "color": populations / area,
            "cmin": 1000,
            "cmax": 15000,
            "colorbar": {"title": "人口密度"}
        }
    ),
    layout={
        # Mapboxインスタンス
        "mapbox": go.layout.Mapbox(
            accesstoken=mapbox_token, center={"lat": 19, "lon": 95}, zoom=2
        )
    }
).show()

[実行結果]