Plotly 3次元複数グラフを並べて表示(subplot)

plotly使い方

2021.10.28

　Plotly を使っていて複数のグラフを並べて表示したい！というときはありませんか？そのようなときにはmake_subplotを用いることで描くことができます！この方法については以前紹介しましたが、今回の記事ではその3次元版、そして2Dと3Dのグラフを並べて表示する方法について紹介していきます！

Plotly 複数のグラフを並べて表示 (make_subplots, set_subplots)

　グラフを可視化させるときに、下の図のように複数のグラフを並べて表示させたい場面ありますよね？matplotlibでは、 subplotで表せる機能ですが、plotlyではどのようにコードを書くのか？についてまとめていきます！...

3Dグラフを並べて表示！
1. make_subplots (基本部分)
2. サンプルコード
2D, 3D グラフを並べて表示！
1. グラフのtype
2. サンプルコード

3Dグラフを並べて表示！

　まずは、3次元グラフを2つ並べたイメージを見てもらえたらと思いますが、下の図のように描くことができます！ここでは、このグラフを描く流れを追いながら説明していけたらと思います！

make_subplots (基本部分)

make_subplotを用いて複数のグラフを並べることができますが、ここではmake_subplotについてまとめていきます！

　まず、基本となる流れについて！

➀ make_subplots を import する
➁ 縦・横に何行・何列で表示させるか？を定義
➂ 各グラフに何行目の何列目に配置するかを定義
④ specs でグラフの形式を指定

➀ make_subplots を import する

from plotly.subplots import make_subplots

➁ 縦・横に何行・何列で表示させるか？を定義

make_subplots関数を用いる場合は、別途 go.Figureで初期化する必要はなし
下の例だと、1行2列のsubplotを作成

fig = make_subplots(rows=1, cols=2)

➂ 各グラフに何行目の何列目に配置するかを定義

グラフについてを記述した後に、add_trace関数内に何行目か？(row)と何列目か？(col)を入力
下の例だと、 1行2列目

fig.add_trace(go.Scatter(
    x= theta,
    y= coss
), row=1, col=2)

④ specs でグラフの形式を指定

　specs でグラフの各要素のグラフ形式を指定します。
2次元グラフであれば省略可能ですが、3次元グラフの場合は 'scene'としておくほとんどのグラフは描くことができます！下の例では、1行1列のグラフはsceneというtype, 1行2列のグラフのグラフはsceneというtypeというように設定しています！
(scene : 3次元のデカルト座標系で書かれたグラフなら OK)

fig = make_subplots(rows=1, cols=2,specs=[[{'type': 'scene'}, {'type': 'scene'}]])

サンプルコード

ここまでの設定に加えて、グラフを書くコードを追加することで上のような図を描くことができます！

import plotly.graph_objects as go
from plotly.subplots import make_subplots

import numpy as np


fig = make_subplots(
    rows=1, cols=2,
    specs=[[{'type': 'scene'}, {'type': 'scene'}]])

t = np.linspace(0, 10, 100)


fig.add_trace(go.Scatter3d(
    x = np.sin(2*t), y = t, z = np.cos(2*t),
    mode='markers',
    opacity = 0.5),
    row=1, col=1
) 

u = np.linspace(0, 2 * np.pi, 100)
v = np.linspace(0, np.pi, 100)
x = np.outer(np.cos(u), np.sin(v))
y = np.outer(np.sin(u), np.sin(v))
z = np.outer(np.ones(np.size(u)), np.cos(v))

fig.add_trace(
    go.Surface(x= x, y=y, z=z, colorscale='RdBu', showscale=False),
    row=1, col=2)


fig.show()

2D, 3D グラフを並べて表示！

　ここまでは、3次元グラフを並べて表示していきましたが、2次元と3次元のグラフを混ぜて表示することもできます！下の図のように描くことができますよ！

make_subplotの使い方は上で紹介したものと同じです。違いはspecsをグラフの形式に合わせて設定する必要があるところなので、ここでは、グラフのtypeについて説明した上で2次元のグラフを加えて表示できるようにサンプルコードを示していきます！

グラフのtype

"xy": (デフォルト) 2Dのデカルト座標系のグラフ (例散布図, 棒グラフなど)
"scene": 3Dのデカルト座標系のグラフ (例 3D散布図など)
"polar": 極座標系のグラフ (例 scatterpolar, barpolar など)
"mapbox": 地図系のプロット (例 scattermapboxなど)

サンプルコード

import plotly.graph_objects as go
from plotly.subplots import make_subplots

import numpy as np


fig = make_subplots(
    rows=2, cols=2,
    specs=[[{'type': 'scene'}, {'type': 'scene'}],
           [{'type': 'xy'}, {'type': 'polar'}]])


t = np.linspace(0, 10, 100)


fig.add_trace(go.Scatter3d(
    x = np.sin(2*t), y = t, z = np.cos(2*t),
    mode='markers',
    opacity = 0.5),
    row=1, col=1
) 

u = np.linspace(0, 2 * np.pi, 100)
v = np.linspace(0, np.pi, 100)
x = np.outer(np.cos(u), np.sin(v))
y = np.outer(np.sin(u), np.sin(v))
z = np.outer(np.ones(np.size(u)), np.cos(v))

fig.add_trace(
    go.Surface(x= x, y=y, z=z, colorscale='RdBu', showscale=False),
    row=1, col=2)


fig.add_trace(
    go.Scatter(x=t, y=t**2),
    row=2, col=1)

fig.add_trace(
    go.Barpolar(theta=[0, 45, 120], r=[2, 3, 1]),
    row=2, col=2)

fig.update_layout(
    height=800,
    width=800
)

fig.show()