【plotly】グラフの切り替え！ボタンの設定方法 -button-

2024年3月17日2024年5月22日

本記事は，plotlyを使ったボタンの設定についてまとめてあります。

ボタンを使うことでグラフのプロットやレイアウトの切り替えを行うことができ，非常に便利な機能です。
↓のグラフを触ってみてください！イメージがよりできるかと思います。

このボタンの設定について詳しくみていきたいと思います！

*このグラフのコードは，最後のまとめにあります。一括でコピペしたい場合は，そちらを参考にしてください。

データ，ライブラリの読み込み

まずライブラリとデータの読み込みを行います。

今回，ライブラリにはsklearn，pandas，plotly.graph_objectsを使います。
sklearn，pandasはデータセットの読み込みやデータの整形のために使っているので，グラフの作成にはplotly.graph_objectsのみがあれば大丈夫です。

データには，wineのデータセットを使いました（5行目のdata=datasets.load_wine()）。

コードは↓になります。

from sklearn import datasets
import pandas as pd
import plotly.graph_objects as go

data =  datasets.load_wine()
X=data['data']
Y=data['target']
wine_X = pd.DataFrame(X, columns=data['feature_names'])
df_wine = wine_X.copy()
df_wine['target']=Y

#データの分割
wine_target0=df_wine[df_wine['target']==0]
wine_target1=df_wine[df_wine['target']==1]
wine_target2=df_wine[df_wine['target']==2]

wineのデータセットには，3品種のデータが含まれているのでそれぞれ”wine_target0″, “wine_target1”, “wine_target2″としてデータを分割しました(13-15行目)。

ボタンなしのグラフ作成

まずは，ボタンなしのグラフを作成してみたいと思います。
この章で作成したグラフ・コードを基にボタンありの作図をしますので，すでにご存知の方も軽くお付き合いください。

この章で作成できるグラフは↓です。
wineのデータセットに含まれる3品種をそれぞれ色を変えてプロットし，y軸に”alcohol”のデータ，x軸に”color_intensity”のデータになります。

コードは↓になります。

fig=go.Figure()
#wine_target0
trace0=go.Scatter(x=wine_target0['color_intensity'],
                         y=wine_target0['alcohol'],
                         mode='markers',
                         marker=dict(color='blue', size=10),
                         name='target0')
#wine_target1
trace1=go.Scatter(x=wine_target1['color_intensity'],
                         y=wine_target1['alcohol'],
                         mode='markers',
                         marker=dict(color='red',size=10),
                         name='target1')
#wine_target2
trace2=go.Scatter(x=wine_target2['color_intensity'],
                         y=wine_target2['alcohol'],
                         mode='markers',
                         marker=dict(color='green',size=10),
                         name='target2')

data=[trace0, trace1, trace2]
fig.add_traces(data=data)

# 背景，軸の色
fig.update_layout(plot_bgcolor='white')
fig.update_xaxes(title='alcohol', linecolor='black', gridcolor='gray', mirror=True)
fig.update_yaxes(title='alcohol', linecolor='black', gridcolor='gray', mirror=True)

fig.show()

今回は，1つのグラフに複数のデータをプロットしています。グラフ作成の大まかな流れですが（他にも方法はありますが，）以下のようになります。

グラフ作成の流れ

1. fig = go.Figure() : グラフ（インスタンス）の作成
2. fig.add_traces(data=data) : グラフデータの設定
3. fig.update_layout() : グラフの軸やタイトルの設定
（fig.update_xaxes, fig.update_yaxes でも設定可能）
4. fig.show() : グラフの表示
5. ( fig.write_html() ) : グラフ保存

この後のボタンありのグラフの作成にも繋がっていくのですが，fig.add_traces(data=data)のdataにプロットしたいデータを格納をしている点をご確認ください。

散布図の書き方については，↓の記事でまとめていますので，よろしければご確認ください。
ちなみに，この記事ではfig.add_trace(go.Scatter(…))を複数記述することで，1つのグラフに複数データをプロットしています（fig.add_traceに「s」のあり/なしにご注意ください）。

ボタンの設定方法の概要

ボタンの設定方法は少し複雑なので，まずこの章では簡単に概要を説明したいと思います。
（先に，グラフやコードを確認したい！という方は次の章を見てから戻ってきてください）

plotly公式の解説はこちらを参考にしてください。

ボタンの設定について概要をまとめたので下図をご覧ください。
ボタンなしグラフで作成したように，
　・fig=go.Figure()
　・fig.add_traces()
　・fig.update_layout()
　・fig.show()
をベースとして作成していきます。

fig.add_traces()のdata内に，今回表示したいデータプロット(trace0, trace1, trace2)を格納します。
ここはボタンなしの時の同じです。

fig.add_layout()ですが，updatemenus内にボタンに関する情報やグラフを切り替えるための情報などが格納されます。
そして，ボタンについては1つ１つのボタンを押したときの挙動を，button0, button1などで記載していき，最終的にbuttonsでリストにまとめるようにしました。

button0の中身のmethodは
　・restyle : データプロットの切り替え
　・relayout : グラフのタイトルや軸のレイアウト情報の切り替え
　・update : データプロットおよびレイアウト情報の両方の切り替え
を設定することでボタンを押したきの挙動を設定できます。
button0のargsは2つのdict()から構成しています。
　・1つ目のdict(visible=[…])：どのデータプロットを可視化するかの情報
　　　　　　　　　　　　　　　（→ methodがrestyle，updateのとき有効）
　・2つ目のdict(…) ：どのタイトルや軸のレイアウトを可視化するかの情報
　　　　　　　　　　　　　　　（→ methodがrelayout，updateのとき有効）

dict(visible=[…])とデータプロットが格納されているdata=[…]との関係は，下図のようになっており順に表示/非表示をTrue/Falseで設定していきます。

以上が，ボタンの設定方法の概要となります。

それでは，次の章からmethodがrestyle，relayout, updateの挙動について，実際のグラフとコードで確認したいと思います！

データプロットの切り替えボタン -button=dict(method=restyle)-

この章では，グラフのデータプロットの表示を切り替えるボタンの設定を行いたいと思います。
作成できるグラフは↓になります。

ここで，”target0”, “target1”, “target2”, “All”のボタンは，それぞれtarget0, target1, target2，および全てのグラフを表示することができます。
実際に，下のグラフで試してみてください!

コードはこちら↓です。
だいぶ長くなっていますが，基本的には概要で説明した通りに記載してあります。

# プロット用のデータ_wine-target0
trace0=go.Scatter(x=wine_target0['color_intensity'],
                  y=wine_target0['alcohol'],
                  mode='markers',
                  marker=dict(color='blue', size=10),
                  name='target0',showlegend=True)

# プロット用のデータ_wine-target1
trace1=go.Scatter(x=wine_target1['color_intensity'],
                  y=wine_target1['alcohol'],
                  mode='markers',
                  marker=dict(color='red', size=10),
                  name='target1',showlegend=True)

# プロット用のデータ_wine-target2
trace2=go.Scatter(x=wine_target2['color_intensity'],
                  y=wine_target2['alcohol'],
                  mode='markers',
                  marker=dict(color='green', size=10),
                  name='target2',showlegend=True)

# trace0, trace1, trace2をリストにまとめる
data=[trace0, trace1, trace2]

# trace0表示用のボタン
button0 = dict(
    label='target0',
    method='restyle',
    args=[
        dict(visible=[True, False, False]),  #dataリストに格納された順に表示設定を行う，trace0のみ表示
        dict(title='target0-plot'),
    ]
)
# trace1表示用のボタン
button1 = dict(
    label='target1',
    method='restyle',
    args=[
        dict(visible=[False, True, False]),  #dataリストに格納された順に表示設定を行う，trace1のみ表示
        dict(title='target1-plot'),
    ]
)
# trace2表示用のボタン
button2 = dict(
    label='target2',
    method='restyle',
    args=[
        dict(visible=[False, False, True]),  #dataリストに格納された順に表示設定を行う，trace2のみ表示
        dict(title='target2-plot'),
    ]
)
# 全てのデータ表示用のボタン
button3 = dict(
    label='All',
    method='restyle',
    args=[
        dict(visible=[True, True, True]),  #dataリストに格納された順に表示設定を行う，全て表示
        dict(title='all-plot'),
    ]
)
# ボタンをリストにまとめる
buttons = [button0, button1, button2, button3]

# updatemenusの設定
updatemenus = [
    dict(
        active=0,  
        type='buttons',
        direction='right',
        x=0.5, y=1.05,
        xanchor='center', yanchor='bottom',
        buttons=buttons,  
    )
]

# グラフの表示
fig=go.Figure()
fig.add_traces(data=data)
fig.update_layout(updatemenus=updatemenus)

# 背景，軸の色
fig.update_layout(plot_bgcolor='white')
fig.update_xaxes(title='color_intensity', linecolor='black', gridcolor='gray', mirror=True, range=(1,14))
fig.update_yaxes(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15))

fig.show()

ここでは，概要で説明しきれなかった箇所についてみたいと思います。

まず，24-31行目，32-33行目，33-33行目でtrace0, trace1, trace2の可視化用のボタンを設定しました。
33-33行目は，dict(visible=[…])内が全て”True”なので，全てのグラフを表示することができます。
button=dict(label=‘…’)では，グラフ化したときのボタンのラベルを指定しています。

updatemenusについては↓でまとめたので，こちらを参考にしてください。

ボタンの設定

updatemenus = [
    dict(
        active= <VALUE>,
        type= <VALUE>,
        direction= <VALUE>,
        x= <VALUE>, 
        y= <VALUE>,
        xanchor= <VALUE>, 
        yanchor= <VALUE>,
        buttons= <VALUE>,
    )
]

active= ○○○		初期状態でアクティブとなるボタンを設定
bgcolor= ○○○		ボタンの背景色の設定
bordercolor= ○○○		ボタンの囲み線の色の設定
borderwidth= ○○○		ボタンの囲み線の太さの設定
direction= ○○○		ボタンの設置方向を以下から選択・’left’ / ‘right’ / ‘up’ / ‘down’
font=dictI(…)	color= ○○○	ボタンの文字の色
	size= ○○○	ボタンの文字の大きさ
type= ○○○		ボタンの種類の設定 “dropdown”, “buttons”から選択
x= ○○○		ボタンを設置するx座標
xanchor= ○○○		ボタンを設置する始点のx座標位置 ‘left’: 左端 ’center’: 中心 ’right’: 右端
y= ○○○		ボタンを設置するy座標
yanchor= ○○○		ボタンを設置する始点のy座標位置 ‘left’: 左端 ’center’: 中心 ’right’: 右端

データレイアウトの切り替えボタン -button=dict(method=relayout)-

次は，タイトルや軸に関するレイアウトを切り替えるボタンの設定を行います。
method=relayoutの場合になります。

下図は，ボタンによって
　・グラフタイトル
　・軸のタイトルと軸の色
　・target0の最大/最小値をコメントで表示
を表示できるようにしてみました。実際に触って確かめてみてください！

コードはこちら↓です。

# プロット用のデータ_wine-target0
trace0=go.Scatter(x=wine_target0['color_intensity'],
                  y=wine_target0['alcohol'],
                  mode='markers',
                  marker=dict(color='blue', size=10),
                  name='target0',showlegend=True)
# プロット用のデータ_wine-target1
trace1=go.Scatter(x=wine_target1['color_intensity'],
                  y=wine_target1['alcohol'],
                  mode='markers',
                  marker=dict(color='red', size=10),
                  name='target1',showlegend=True)
# プロット用のデータ_wine-target2
trace2=go.Scatter(x=wine_target2['color_intensity'],
                  y=wine_target2['alcohol'],
                  mode='markers',
                  marker=dict(color='green', size=10),
                  name='target2',showlegend=True)
data=[trace0, trace1, trace2]



# trace0用のボタン
target0_color_intensity_Ymax=wine_target0['alcohol'].max() #alcoholの最大値の取得
target0_color_intensity_Xmax=wine_target0['color_intensity'][wine_target0['alcohol']==wine_target0['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target0_color_intensity_Ymin=wine_target0['alcohol'].min() #alcoholの最小値の取得
target0_color_intensity_Xmin=wine_target0['color_intensity'][wine_target0['alcohol']==wine_target0['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button0 = dict(
    label='traget0',
    method='relayout',  # レイアウト情報の切り替え
    args=[
        dict(title='target0-plot',
             xaxis=dict(title='color_intensity', linecolor='blue', gridcolor='gray', mirror=True, range=(1,14),griddash='dot'),
             yaxis=dict(title='alcohol', linecolor='blue', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target0_alcohol-max", font=dict(color='blue', size=15), showarrow=True, ax=-100, ay=-30, x=target0_color_intensity_Xmax, y=target0_color_intensity_Ymax),
                          dict(text="target0_alcohol-min", font=dict(color='blue', size=15), showarrow=True, ax=100, ay=100, x=target0_color_intensity_Xmin, y=target0_color_intensity_Ymin)]),

    ]
)

# trace1用のボタン
target1_color_intensity_Ymax=wine_target1['alcohol'].max() #alcoholの最大値の取得
target1_color_intensity_Xmax=wine_target1['color_intensity'][wine_target1['alcohol']==wine_target1['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target1_color_intensity_Ymin=wine_target1['alcohol'].min() #alcoholの最小値の取得
target1_color_intensity_Xmin=wine_target1['color_intensity'][wine_target1['alcohol']==wine_target1['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button1 = dict(
    label='traget1',
    method='relayout',  # レイアウト情報の切り替え
    args=[
        dict(title='target1-plot',
             xaxis=dict(title='color_intensity', linecolor='red', gridcolor='gray', mirror=True, range=(1,14),griddash='dot'),
             yaxis=dict(title='alcohol', linecolor='red', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target1_alcohol-max", font=dict(color='red', size=15), showarrow=True, ax=-80, ay=-30, x=target1_color_intensity_Xmax, y=target1_color_intensity_Ymax),
                          dict(text="target1_alcohol-min", font=dict(color='red', size=15), showarrow=True, ax=50, ay=30, x=target1_color_intensity_Xmin, y=target1_color_intensity_Ymin)])

    ]
)

# trace2用のボタン
target2_color_intensity_Ymax=wine_target2['alcohol'].max() #alcoholの最大値の取得
target2_color_intensity_Xmax=wine_target2['color_intensity'][wine_target2['alcohol']==wine_target2['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target2_color_intensity_Ymin=wine_target2['alcohol'].min() #alcoholの最小値の取得
target2_color_intensity_Xmin=wine_target2['color_intensity'][wine_target2['alcohol']==wine_target2['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button2 = dict(
    label='traget2',
    method='relayout',  # レイアウト情報の切り替え
    args=[
        dict(title='target2-plot',
             xaxis=dict(title='color_intensity', linecolor='green', gridcolor='gray', mirror=True, range=(1,14),griddash='dot' ),
             yaxis=dict(title='alcohol', linecolor='green', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target2_alcohol-max", font=dict(color='green', size=15), showarrow=True, ax=-100, ay=-14, x=target2_color_intensity_Xmax, y=target2_color_intensity_Ymax),
                          dict(text="target2_alcohol-min", font=dict(color='green', size=15), showarrow=True, ax=100, ay=25, x=target2_color_intensity_Xmin, y=target2_color_intensity_Ymin)])
           ]
)

# 全てのデータ表示用のボタン
button3 = dict(
    label='All',
    method='relayout',  # レイアウト情報の切り替え
    args=[
        dict(title='all plot',
             xaxis=dict(title='color_intensity', linecolor='blue', gridcolor='gray', mirror=True, range=(1,14),griddash='dot' ),
             yaxis=dict(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target0_alcohol-max", font=dict(color='blue', size=15), showarrow=True, ax=-100, ay=-30, x=target0_color_intensity_Xmax, y=target0_color_intensity_Ymax),
                          dict(text="target0_alcohol-min", font=dict(color='blue', size=15), showarrow=True, ax=100, ay=100, x=target0_color_intensity_Xmin, y=target0_color_intensity_Ymin),
                          dict(text="target1_alcohol-max", font=dict(color='red', size=15), showarrow=True, ax=-80, ay=-30, x=target1_color_intensity_Xmax, y=target1_color_intensity_Ymax),
                          dict(text="target1_alcohol-min", font=dict(color='red', size=15), showarrow=True, ax=50, ay=30, x=target1_color_intensity_Xmin, y=target1_color_intensity_Ymin),
                          dict(text="target2_alcohol-max", font=dict(color='green', size=15), showarrow=True, ax=-100, ay=-14, x=target2_color_intensity_Xmax, y=target2_color_intensity_Ymax),
                          dict(text="target2_alcohol-min", font=dict(color='green', size=15), showarrow=True, ax=100, ay=25, x=target2_color_intensity_Xmin, y=target2_color_intensity_Ymin)])
    ]
)
# ボタンをリストにまとめる
buttons = [button0, button1, button2, button3]

# updatemenusの設定
updatemenus = [
    dict(
        active=0,
        type='buttons',
        direction='right',
        x=0.5, y=1.05,
        xanchor='center', yanchor='bottom',
        buttons=buttons,
    )
]

# グラフの表示
fig=go.Figure()
fig.add_traces(data=data)
fig.update_layout(updatemenus=updatemenus)

# 背景，軸の色
fig.update_layout(plot_bgcolor='white')
fig.update_xaxes(title='color_intensity', linecolor='black', gridcolor='gray', mirror=True, range=(1,14))
fig.update_yaxes(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15))

fig.show()

method=relayoutとしているため，データプロットの切り替えは効かないので前章までにあったdict(visible=[…])は削除しています。
代わりに，レイアウトに関する情報をargs=[dict(…)]内に記載しています。
ここで記載している設定については↓でまとめていますので参考にしてください。

ボタンの設定

args = [
    dict(
        title=0,
        xaxes=dict(title= <VALUE>,
                   linecolor= <VALUE>,
                   gridcolor= <VALUE>,
                   mirror= <VALUE>,
                   range= <VALUE>,
                   griddash= <VALUE>),
        yaxes=dict(…),  # ← xaxesと同様なので省略
        annotations=[dict(text= <VALUE>,
                          font=dict(color= <VALUE>, size= <VALUE>),
                          showarrow= <VALUE>,
                          ax= <VALUE>,
                          ay= <VALUE>,
                          x= <VALUE>,
                          y= <VALUE>
                    )]
        )]

title= ○○○			グラフのタイトル
xaxes= dict(…)	title= ○○○		ボタンの背景色の設定
	linecolor= ○○○		軸線の色
	gridcolor= ○○○		目盛線の色
	mirror= ○○○		‘True’で反対の軸に設定が反映される
	range= ○○○		軸の表示範囲
	griddash= ○○○		目盛線の種類の設定。以下かから選択・’solid’ (デフォルト), ・‘dot’, ・‘dash’, ・‘longdash’, ・‘dashdot’, ・‘longdashdot’
annotations=[dict(…)]	text= ○○○		コメント文字
	font= dict	color= ○○○	コメント文字の色
		size= ○○○	コメント文字の大きさ
	showarrow= ○○○		矢印の有無の設定。’True’で有り，’False’で無し。
	ax= ○○○		コメント文字のx方向の位置。数値が’+’で右から左方向の向き
	ay= ○○○		コメント文字のy方向の位置。数値が’+’で下から上方向の向き
	x= ○○○		コメント文字から出る線の先頭のx座標
	y= ○○○		コメント文字から出る線の先頭のy座標

プロット&レイアウトの切り替えボタン -button=dict(method=update)-

最後に，method=updateとした場合を見たいと思います。
method=relayoutとすることで，データプロット，レイアウトの両方をボタンで切り替えることができます。

ボタンの設定としては，上の章で見てきたmethod=restyleとmethod=relayoutの両方の設定を入れ込んでいます。
実際に触って確かめてみてください！

コードは↓です。

# プロット用のデータ_wine-target0
trace0=go.Scatter(x=wine_target0['color_intensity'],
                  y=wine_target0['alcohol'],
                  mode='markers',
                  marker=dict(color='blue', size=10),
                  name='target0',showlegend=True)
# プロット用のデータ_wine-target1
trace1=go.Scatter(x=wine_target1['color_intensity'],
                  y=wine_target1['alcohol'],
                  mode='markers',
                  marker=dict(color='red', size=10),
                  name='target1',showlegend=True)
# プロット用のデータ_wine-target2
trace2=go.Scatter(x=wine_target2['color_intensity'],
                  y=wine_target2['alcohol'],
                  mode='markers',
                  marker=dict(color='green', size=10),
                  name='target2',showlegend=True)
data=[trace0, trace1, trace2]



# trace0用のボタン
target0_color_intensity_Ymax=wine_target0['alcohol'].max() #alcoholの最大値の取得
target0_color_intensity_Xmax=wine_target0['color_intensity'][wine_target0['alcohol']==wine_target0['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target0_color_intensity_Ymin=wine_target0['alcohol'].min() #alcoholの最小値の取得
target0_color_intensity_Xmin=wine_target0['color_intensity'][wine_target0['alcohol']==wine_target0['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button0 = dict(
    label='traget0',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[True, False, False]),  #dataリストに格納された順に表示設定を行う，trace0のみ表示
        dict(title='target0-plot',
             xaxis=dict(title='color_intensity', linecolor='blue', gridcolor='gray', mirror=True, range=(1,14),griddash='dot'),
             yaxis=dict(title='alcohol', linecolor='blue', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target0_alcohol-max", font=dict(color='blue', size=15), showarrow=True, ax=-100, ay=-30, x=target0_color_intensity_Xmax, y=target0_color_intensity_Ymax),
                          dict(text="target0_alcohol-min", font=dict(color='blue', size=15), showarrow=True, ax=100, ay=100, x=target0_color_intensity_Xmin, y=target0_color_intensity_Ymin)]),

    ]
)

# trace1用のボタン
target1_color_intensity_Ymax=wine_target1['alcohol'].max() #alcoholの最大値の取得
target1_color_intensity_Xmax=wine_target1['color_intensity'][wine_target1['alcohol']==wine_target1['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target1_color_intensity_Ymin=wine_target1['alcohol'].min() #alcoholの最小値の取得
target1_color_intensity_Xmin=wine_target1['color_intensity'][wine_target1['alcohol']==wine_target1['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button1 = dict(
    label='traget1',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[False, True, False]),  #dataリストに格納された順に表示設定を行う，trace1のみ表示
        dict(title='target1-plot',
             xaxis=dict(title='color_intensity', linecolor='red', gridcolor='gray', mirror=True, range=(1,14),griddash='dot'),
             yaxis=dict(title='alcohol', linecolor='red', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target1_alcohol-max", font=dict(color='red', size=15), showarrow=True, ax=-80, ay=-30, x=target1_color_intensity_Xmax, y=target1_color_intensity_Ymax),
                          dict(text="target1_alcohol-min", font=dict(color='red', size=15), showarrow=True, ax=50, ay=30, x=target1_color_intensity_Xmin, y=target1_color_intensity_Ymin)])

    ]
)

# trace2用のボタン
target2_color_intensity_Ymax=wine_target2['alcohol'].max() #alcoholの最大値の取得
target2_color_intensity_Xmax=wine_target2['color_intensity'][wine_target2['alcohol']==wine_target2['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target2_color_intensity_Ymin=wine_target2['alcohol'].min() #alcoholの最小値の取得
target2_color_intensity_Xmin=wine_target2['color_intensity'][wine_target2['alcohol']==wine_target2['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button2 = dict(
    label='traget2',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[False, False, True]),  #dataリストに格納された順に表示設定を行う，trace2のみ表示
        dict(title='target2-plot',
             xaxis=dict(title='color_intensity', linecolor='green', gridcolor='gray', mirror=True, range=(1,14),griddash='dot' ),
             yaxis=dict(title='alcohol', linecolor='green', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target2_alcohol-max", font=dict(color='green', size=15), showarrow=True, ax=-100, ay=-14, x=target2_color_intensity_Xmax, y=target2_color_intensity_Ymax),
                          dict(text="target2_alcohol-min", font=dict(color='green', size=15), showarrow=True, ax=100, ay=25, x=target2_color_intensity_Xmin, y=target2_color_intensity_Ymin)])
           ]
)

# 全てのデータ表示用のボタン
button3 = dict(
    label='All',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[True, True, True]),  #dataリストに格納された順に表示設定を行う，全て表示
        dict(title='all plot',
             xaxis=dict(title='color_intensity', linecolor='blue', gridcolor='gray', mirror=True, range=(1,14),griddash='dot' ),
             yaxis=dict(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target0_alcohol-max", font=dict(color='blue', size=15), showarrow=True, ax=-100, ay=-30, x=target0_color_intensity_Xmax, y=target0_color_intensity_Ymax),
                          dict(text="target0_alcohol-min", font=dict(color='blue', size=15), showarrow=True, ax=100, ay=100, x=target0_color_intensity_Xmin, y=target0_color_intensity_Ymin),
                          dict(text="target1_alcohol-max", font=dict(color='red', size=15), showarrow=True, ax=-80, ay=-30, x=target1_color_intensity_Xmax, y=target1_color_intensity_Ymax),
                          dict(text="target1_alcohol-min", font=dict(color='red', size=15), showarrow=True, ax=50, ay=30, x=target1_color_intensity_Xmin, y=target1_color_intensity_Ymin),
                          dict(text="target2_alcohol-max", font=dict(color='green', size=15), showarrow=True, ax=-100, ay=-14, x=target2_color_intensity_Xmax, y=target2_color_intensity_Ymax),
                          dict(text="target2_alcohol-min", font=dict(color='green', size=15), showarrow=True, ax=100, ay=25, x=target2_color_intensity_Xmin, y=target2_color_intensity_Ymin)])
    ]
)
# ボタンをリストにまとめる
buttons = [button0, button1, button2, button3]

# updatemenusの設定
updatemenus = [
    dict(
        active=0,
        type='buttons',
        direction='right',
        x=0.5, y=1.05,
        xanchor='center', yanchor='bottom',
        buttons=buttons,
    )
]

# グラフの表示
fig=go.Figure()
fig.add_traces(data=data)
fig.update_layout(updatemenus=updatemenus)

# 背景，軸の色
fig.update_layout(plot_bgcolor='white')
fig.update_xaxes(title='color_intensity', linecolor='black', gridcolor='gray', mirror=True, range=(1,14))
fig.update_yaxes(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15))

fig.show()

method=relayoutとすることで，データプロット，レイアウトの両方を切り替えていますのでargs=[…]内では，データプロットのdict(visible=[…])とレイアウトのdict(visible=[…])があるのでご確認ください。

まとめ

この記事では，plotyによるボタンの設定を確認しました。
ボタンの設定を行うことで，データプロットやレイアウトを切り替えることができます。

概要を下図になりますので，再度ご確認下さい。

冒頭のグラフのコードはこちら

from sklearn import datasets
import pandas as pd
import plotly.graph_objects as go

data =  datasets.load_wine()
X=data['data']
Y=data['target']
wine_X = pd.DataFrame(X, columns=data['feature_names'])
df_wine = wine_X.copy()
df_wine['target']=Y


#データの分割
wine_target0=df_wine[df_wine['target']==0]
wine_target1=df_wine[df_wine['target']==1]
wine_target2=df_wine[df_wine['target']==2]


# プロット用のデータ_wine-target0
trace0=go.Scatter(x=wine_target0['color_intensity'],
                  y=wine_target0['alcohol'],
                  mode='markers',
                  marker=dict(color='blue', size=10),
                  name='target0',showlegend=True)
# プロット用のデータ_wine-target1
trace1=go.Scatter(x=wine_target1['color_intensity'],
                  y=wine_target1['alcohol'],
                  mode='markers',
                  marker=dict(color='red', size=10),
                  name='target1',showlegend=True)
# プロット用のデータ_wine-target2
trace2=go.Scatter(x=wine_target2['color_intensity'],
                  y=wine_target2['alcohol'],
                  mode='markers',
                  marker=dict(color='green', size=10),
                  name='target2',showlegend=True)
data=[trace0, trace1, trace2]



# trace0用のボタン
target0_color_intensity_Ymax=wine_target0['alcohol'].max() #alcoholの最大値の取得
target0_color_intensity_Xmax=wine_target0['color_intensity'][wine_target0['alcohol']==wine_target0['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target0_color_intensity_Ymin=wine_target0['alcohol'].min() #alcoholの最小値の取得
target0_color_intensity_Xmin=wine_target0['color_intensity'][wine_target0['alcohol']==wine_target0['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button0 = dict(
    label='traget0',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[True, False, False]),  #dataリストに格納された順に表示設定を行う，trace0のみ表示
        dict(title='target0-plot',
             xaxis=dict(title=dict(text='color_intensity',font=dict(color='blue')), linecolor='blue', gridcolor='gray', mirror=True, range=(1,14),griddash='dot'),
             yaxis=dict(title=dict(text='alcohol',font=dict(color='blue')), linecolor='blue', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target0_alcohol-max", font=dict(color='blue', size=15), showarrow=True, ax=-100, ay=-30, x=target0_color_intensity_Xmax, y=target0_color_intensity_Ymax),
                          dict(text="target0_alcohol-min", font=dict(color='blue', size=15), showarrow=True, ax=100, ay=100, x=target0_color_intensity_Xmin, y=target0_color_intensity_Ymin)]),

    ]
)

# trace1用のボタン
target1_color_intensity_Ymax=wine_target1['alcohol'].max() #alcoholの最大値の取得
target1_color_intensity_Xmax=wine_target1['color_intensity'][wine_target1['alcohol']==wine_target1['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target1_color_intensity_Ymin=wine_target1['alcohol'].min() #alcoholの最小値の取得
target1_color_intensity_Xmin=wine_target1['color_intensity'][wine_target1['alcohol']==wine_target1['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button1 = dict(
    label='traget1',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[False, True, False]),  #dataリストに格納された順に表示設定を行う，trace1のみ表示
        dict(title='target1-plot',
             xaxis=dict(title=dict(text='color_intensity',font=dict(color='red')), linecolor='red', gridcolor='gray', mirror=True, range=(1,14),griddash='dot'),
             yaxis=dict(title=dict(text='alcohol',font=dict(color='red')), linecolor='red', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target1_alcohol-max", font=dict(color='red', size=15), showarrow=True, ax=-80, ay=-30, x=target1_color_intensity_Xmax, y=target1_color_intensity_Ymax),
                          dict(text="target1_alcohol-min", font=dict(color='red', size=15), showarrow=True, ax=50, ay=30, x=target1_color_intensity_Xmin, y=target1_color_intensity_Ymin)])

    ]
)

# trace2用のボタン
target2_color_intensity_Ymax=wine_target2['alcohol'].max() #alcoholの最大値の取得
target2_color_intensity_Xmax=wine_target2['color_intensity'][wine_target2['alcohol']==wine_target2['alcohol'].max()].values[0] #alcoholの最大のときのcolor_intensityの取得
target2_color_intensity_Ymin=wine_target2['alcohol'].min() #alcoholの最小値の取得
target2_color_intensity_Xmin=wine_target2['color_intensity'][wine_target2['alcohol']==wine_target2['alcohol'].min()].values[0] #alcoholの最小のときのcolor_intensityの取得

button2 = dict(
    label='traget2',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[False, False, True]),  #dataリストに格納された順に表示設定を行う，trace2のみ表示
        dict(title='target2-plot',
             xaxis=dict(title=dict(text='color_intensity',font=dict(color='green')), linecolor='green', gridcolor='gray', mirror=True, range=(1,14),griddash='dot' ),
             yaxis=dict(title=dict(text='alcohol',font=dict(color='green')), linecolor='green', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target2_alcohol-max", font=dict(color='green', size=15), showarrow=True, ax=-100, ay=-14, x=target2_color_intensity_Xmax, y=target2_color_intensity_Ymax),
                          dict(text="target2_alcohol-min", font=dict(color='green', size=15), showarrow=True, ax=100, ay=25, x=target2_color_intensity_Xmin, y=target2_color_intensity_Ymin)])
           ]
)

# 全てのデータ表示用のボタン
button3 = dict(
    label='All',
    method='update',  # レイアウト情報の切り替え
    args=[
        dict(visible=[True, True, True]),  #dataリストに格納された順に表示設定を行う，全て表示
        dict(title='all plot',
             xaxis=dict(title='color_intensity', linecolor='black', gridcolor='gray', mirror=True, range=(1,14),griddash='dot' ),
             yaxis=dict(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15),griddash='dot'),
             annotations=[dict(text="target0_alcohol-max", font=dict(color='blue', size=15), showarrow=True, ax=-100, ay=-30, x=target0_color_intensity_Xmax, y=target0_color_intensity_Ymax),
                          dict(text="target0_alcohol-min", font=dict(color='blue', size=15), showarrow=True, ax=100, ay=100, x=target0_color_intensity_Xmin, y=target0_color_intensity_Ymin),
                          dict(text="target1_alcohol-max", font=dict(color='red', size=15), showarrow=True, ax=-80, ay=-30, x=target1_color_intensity_Xmax, y=target1_color_intensity_Ymax),
                          dict(text="target1_alcohol-min", font=dict(color='red', size=15), showarrow=True, ax=50, ay=30, x=target1_color_intensity_Xmin, y=target1_color_intensity_Ymin),
                          dict(text="target2_alcohol-max", font=dict(color='green', size=15), showarrow=True, ax=-100, ay=-14, x=target2_color_intensity_Xmax, y=target2_color_intensity_Ymax),
                          dict(text="target2_alcohol-min", font=dict(color='green', size=15), showarrow=True, ax=100, ay=25, x=target2_color_intensity_Xmin, y=target2_color_intensity_Ymin)])
    ]
)
# ボタンをリストにまとめる
buttons = [button0, button1, button2, button3]

# updatemenusの設定
updatemenus = [
    dict(
        active=0,
        type='buttons',
        direction='right',
        x=0.5, y=1.05,
        xanchor='center', yanchor='bottom',
        buttons=buttons,
    )
]

# グラフの表示
fig=go.Figure()
fig.add_traces(data=data)
fig.update_layout(updatemenus=updatemenus)

# 背景，軸の色
fig.update_layout(plot_bgcolor='white')
fig.update_xaxes(title='color_intensity', linecolor='black', gridcolor='gray', mirror=True, range=(1,14))
fig.update_yaxes(title='alcohol', linecolor='black', gridcolor='gray', mirror=True, range=(10,15))

fig.show()

読了，お疲れ様でした。

以上，【plotly】簡単作図！ヒートマップの設定方法 -heatmap-でした！