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

[実行結果]

Plotly㉒（ウォーターフォール図）

ウォーターフォール図は初期値、累計値、値の増減を長方形の長さで表現します。

値が増加した場合は前の値が底辺となり、値が減少した場合は前の値が上辺となります。

初期値と累計値は0が底辺となります（値が正の場合）。

ウォーターフォール図

Plotlyでウォーターフォール図を表示するにはWaterfallクラスを使用します。

引数 xにラベルとなるデータ、引数 yに値となるデータを設定します。

引数 measureには“relative”（相対値）、または“total”（合計値）を設定します。

[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
31
32
33
34
35
36
37
import plotly.graph_objects as go

go.Figure(
    go.Waterfall(
        x=[
            "売上高",
            "売上原価",
            "売上総利益",
            "販売費及び一般管理費",
            "営業利益",
            "営業外収益",
            "営業外費用",
            "経常利益",
            "特別利益",
            "特別損失",
            "税引前当期純利益",
            "法人税等",
            "当期純利益"
        ],
        measure=[
            "relative",
            "relative",
            "total",
            "relative",
            "total",
            "relative",
            "relative",
            "total",
            "relative",
            "relative",
            "total",
            "relative",
            "total"
        ],
        y=[1000, -350, 0, -170, 0, 120, -80, 0, 30, -80, 0, -100, 0]
    )
).show()

[実行結果]

Plotly㉑（ローソク足）

ローソク足は時系列データを表現します。

頻度（週や月など）ごとの最大値（高値）と最小値（安値）を線分で表現し、開始値（始値）から終了値（終値）を長方形で表現します。

終値が始値より小さい場合と、大きい場合で違う色で描画されます。

ローソク足

Plotlyでローソク足を表示するにはCandlestickクラスを使用します。

まず、stock（株価）データセットを読み込みます。

[Google Colaboratory]

1
2
3
4
5
6
import plotly
import pandas as pd

stocks = plotly.data.stocks(indexed=True)
stocks.index = pd.to_datetime(stocks.index)
stocks.head()

[実行結果]


Candlestickクラスの引数 open、high、low、closeにそれぞれ始値、高値、安値、終値のデータを設定します。

以下のコードでは、データを１か月ごと（月足）にリサンプリングしたDataFrameを作成し、ローソク足を描画しています。

[Google Colaboratory]

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

ohlc_df = (
    stocks["AMZN"]
    .resample("1M")   # 1週間ごとにリサンプル
    .ohlc()           # 4本値にリサンプル
)
go.Figure(
    [
        go.Candlestick(
            x=ohlc_df.index,
            open=ohlc_df["open"],   # 始値
            high=ohlc_df["high"],   # 高値
            low=ohlc_df["low"],     # 安値
            close=ohlc_df["close"]  # 終値
        )
    ]
).show()

[実行結果]