Plotly 3次元グラフ (update_layout：軸設定)

plotly使い方

2021.10.21

　これまでの記事でPlotlyの3次元グラフについてまとめてきて、散布図・折れ線グラフ・等高線を含めた Surface Plotsなどの個別のグラフについての記事は増えてきました。
　そこで今回の記事は、3次元グラフであれば共通して使える設定(主に update_layout)に関わる設定についてまとめていきたいと思うので、Plotlyをより使いこなすために見てもらえたらと思います！

3次元グラフの基本設定！
3次元グラフの設定実践編

3次元グラフの基本設定！

　Plotly側で用意されている設定は数多くありますが、全てのものをよく使うというわけではないので、その中でも厳選して特に覚えておいた方が良いもの2つを「基本設定」として、その他にこんなこともできるのか！と知っておけるとよいことを「実践編」と称して2つに分けてまとめていきます！

　まず、覚えておくと良い2つの設定についてですが、

各軸の範囲設定
各軸のタイトルの設定

の2つです！この2つはよく使いますよね！！

実際にらせん模様のグラフを書いてみましたが、このグラフに対して、2つの設定をどのように行うのか？という説明も合わせて紹介します！

1.各軸の範囲設定

　範囲設定に限らずなのですが、各軸の設定については基本はxaxis, yaxis, zaxisに辞書型(dict)で格納されています。
(このことを理解しておけるとこの後の実践編の理解もスムーズに進みますよ！)

　そして、範囲設定はrangeで設定できるので、範囲の下限と上限を設定することで範囲設定は完了です！

fig.update_layout(
    scene = dict(
        xaxis = dict(range=[-1,1],),
        yaxis = dict(range=[-1,10],),
        zaxis = dict(range=[-1,1],),
    )

2.各軸のタイトルの設定

　タイトルの設定で update_layout内で行うことは、2次元グラフと同じですが、3次元グラフではその中sceneを設定し、その内部で各軸のタイトルを記述します！

　タイトルの設定方法については、2次元グラフとほぼ同じで、Xaxis_title (X は x,y,z) で各軸のタイトルを設定することができます！

fig.update_layout(
    scene = dict(
        xaxis_title='X AXIS TITLE',
        yaxis_title='Y AXIS TITLE',
        zaxis_title='Z AXIS TITLE',
    )

サンプルコード

ここまでの要素をまとめて表示できるコードを書いて見ると、このサンプルコードのように書けます！

import plotly.graph_objects as go
import numpy as np

t = np.linspace(0, 10, 100)
x, y, z = np.sin(2*t), t , np.cos(2*t)

fig = go.Figure()
fig.add_trace(go.Scatter3d(
    x=x, y=y, z=z,
    mode='markers',
    opacity = 0.5
))
fig.update_layout(
    scene = dict(
        #各軸の範囲
        xaxis = dict(range=[-1,1],),
        yaxis = dict(range=[-1,10],),
        zaxis = dict(range=[-1,1],),
        #各軸のタイトル
        xaxis_title='X AXIS TITLE',
        yaxis_title='Y AXIS TITLE',
        zaxis_title='Z AXIS TITLE',
    ),
    width=700,
    margin=dict(r=20, l=10, b=10, t=10)
)

fig.show()

3次元グラフの設定実践編

　基本設定のところで、軸の設定は基本的にxaxis,yaxis,zaxisに辞書型として格納されているという話をしていました。その中身としては基本設定では範囲設定の rangeしか使っていませんでしたが、設定できる項目はたくさんあります！
　そこで、「実践編」としてここでは各軸の設定で行えることについてまとめていきます！
　ここで説明していく項目は以下の通り

背景色の設定 (backgroundcolor)
gridの色設定 (gridcolor)
背景の描画の有無 (showbackground)
ゼロの値を示す線 (zerolinecolor)

1.背景色の設定 (backgroundcolor)

　RGB表記で背景の色を設定することができます！

backgroundcolor="rgb(200, 100, 100)",

2.gridの色設定 (gridcolor)

格子(grid)の色を設定することができます！

ここでは白色を設定。

gridcolor="white",

3.背景の描画の有無 (showbackground)

背景の描画を True(あり)にするか？False(なし)にするか？をこのオプションにて設定できます。

showbackground=True,

4.ゼロの値を示す線 (zerolinecolor)

設定した軸が(例えばx軸の場合はxが) 0 となる点を結んだ線だけを設定した色で塗ることができます！

ここでは、xが0になるところが黒色になるように設定しました。

zerolinecolor="black",

サンプルコード

ここまでの要素をまとめて表示できるコードを書いて見ると、このサンプルコードのように書けます！

import plotly.graph_objects as go
import numpy as np

t = np.linspace(0, 10, 100)
x, y, z = np.sin(2*t), t , np.cos(2*t)

fig = go.Figure()
fig.add_trace(go.Scatter3d(
    x=x, y=y, z=z,
    mode='markers',
    opacity = 0.5
))
fig.update_layout(
    scene = dict(
        xaxis = dict(
            range=[-1,1],
            backgroundcolor="rgb(200, 100, 100)",
            gridcolor="white",
            showbackground=True,
            zerolinecolor="black",
        ),
        yaxis = dict(
            range=[-1,10],
            backgroundcolor="rgb(100, 200, 100)",
        ),
        zaxis = dict(range=[-1,1],),
        xaxis_title='X AXIS TITLE',
        yaxis_title='Y AXIS TITLE',
        zaxis_title='Z AXIS TITLE',

    ),
    width=700,
    margin=dict(r=20, l=10, b=10, t=10)
)

fig.show()