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

[実行結果]

Plotly㉖（地図上の折れ線グラフ）

地図上の折れ線グラフ

Plotlyで地図上に折れ線グラフを表示するにはScattergeoクラスを使用します。

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

  • lon
    経度を設定。（8行目）
  • lat
    緯度を設定。（9行目）
  • mode
    描画モードを設定。
    “lines”を設定すると折れ線グラフで表示。（10行目）

以下のコードでは、地図上の各地点を繋いだ折れ線グラフを描画しています。

layoutのgeo.projection属性に辞書型データを設定すると投影法などに変更することができます。（14行目）

[Google Colaboratory]

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

lon, lat = [139.691711, 106.845131, 77.216667], [35.6, -6.214620, 28.666668]
text = ["Tokyo", "Jakarta", "Delhi"]

go.Figure(
    go.Scattergeo(
        lon=lon + [-74.005966], # 経度
        lat=lat + [40.714272],  # 緯度
        mode="lines",           # 要素間を線で接続
        text=text
    ),
    # 投影法を指定
    layout={"geo": {"projection": {"type": "azimuthal equal area"}}}
).show()

[実行結果]

Plotly㉕（地図上の散布図）

地図上の散布図

Plotlyで地図上に散布図を表示するにはScattergeoクラスを使用します。

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

  • lon
    経度を設定。
  • lat
    緯度を設定。
  • mode
    描画モードを設定。
    “markers”を設定すると散布図で表示。

以下のコードでは、地図上に散布図を描画し、要素のサイズと色で値を表現しています。

[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
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"]
go.Figure(
    [
        go.Scattergeo(
            lon=lon,  # 経度
            lat=lat,  # 緯度
            marker={
                "size": populations / 1_000_000,    # 要素の大きさ
                "color": populations / area,        # 要素の色
                "cmin": 1000,                       # 色の下限値
                "cmax": 15000,                      # 色の上限値
                "colorbar": {"title": "人口密度"}   # カラーバーを表示し、タイトルを指定
            },
            text=text,      # ホバーツールに表示するテキスト
            mode="markers"  # 散布図として描画  
        )
    ],
    layout={"geo": {"scope": "asia"}}
).show()

[実行結果]

Plotly㉔（階級区分図）

階級区分図（コロプレスマップ）は、国民所得や人口密度などの統計数値に合わせて色調を塗り分けた地図です。

地域ごとに数値を比較し可視化する際に利用します。

階級区分図

Plotlyで階級区分図を表示するにはChoroplethクラスを使用します。

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

  • locations
    locationmodeに従った地域データ
  • locationmode
    地域データの定義を文字列で指定
  • z
    地域ごとの値となるデータ(リスト型など)

以下のコードではgapminderデータセットのcountry列を位置データとして指定し、lifeExp列の値を階級区分図で表示しています。

[Google Colaboratory]

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

gapminder = plotly.data.gapminder()

go.Figure(
    [
        go.Choropleth(
            locations=gapminder["country"],  # 国名
            locationmode="country names",    # 位置データを国名で指定
            z=gapminder["lifeExp"]
        )
    ]
).show()

[実行結果]

Plotly㉓（ファンネル図）

ファンネル図は値が絞り込まれる様子を漏斗（ろうと）の形で表現します。

値は長方形の長さで表現され、次の要素は初期値からの変化または前の値からの変化が描画されます。

ファンネル図

Plotlyでファンネル図を表示するにはFunnelクラスを使用します。

引数 xに各段階の値、引数 yに各段階のラベルを設定します。（7～8行目、16～17行目）

引数 textinfoには要素の表示形式と基準値をスペース区切りで設定します。（9行目、18行目）

基準値とは百分率を表示する場合の基準となる値で、次の3つのいずれかを指定します。

  • initial
    初期値
  • previous
    前の値
  • total
    合計値

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import plotly.graph_objects as go

funnel_fig = go.Figure()
funnel_fig.add_trace(
    go.Funnel(
        name="商品1",
        x=[350, 170, 25, 12],
        y=["閲覧", "クリック", "カートに追加", "購入"],
        textinfo="percent initial"  		# 百分率を表示し、初期値からの変化で描画
    )
)
funnel_fig.add_trace(
    go.Funnel(
        name="商品2",
        orientation="h",
        x=[210, 45, 17, 10],
        y=["閲覧", "クリック", "カートに追加", "購入"],
        textinfo="label+percent previous"  # ラベルと百分率を表示し、前の値からの変化で描画
    )
)
funnel_fig.show()

[実行結果]