MENU
Pythonで0から学んでいくブログ
※ 当サイトは、アフィリエイト広告を利用しています
  1. ホーム
  2. plotly
  3. 【plotly】これだけ！目盛線/x=0,y=0の設定 -griddash, zeroline –

【plotly】これだけ！目盛線/x=0,y=0の設定 -griddash, zeroline –

plotly

plotlyの目盛線は，デフォルトでは直線となっています。
また、x＝0，y＝0のzerolineはデフォルトの色は白で，通常のgridcolorとは別設定になっています。

しかし，グラフの見せ方によっては，目盛線の種類は破線などの方が良いことや，x=0，y=0の色の設定を行いたいことがあります。
そこで、この記事ではplotlyの目盛線の設定やx=0，y=0の線の設定をしたいと思います。

この記事の目標

目盛線の色/太さの設定
目盛線の種類（破線など）の設定
x=0，y=0の線の設定

今回の目標とするグラフは↓になります。

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

目次

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

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

データには，scikit-learnのワインのデータセットを用います。
scikit-learn公式のデータセットの解説はこちらこちらをご確認ください。

#ライブラリのインポート
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
df_wine

df_wineの中身は以下の画像のようになっています。

ここから，”color_intensity”をx軸，”alcohol”をy軸としてグラフの作成を行います。

グラフの作成

まずはひとまず，散布図のグラフを作成します。
wineデータセットの中から”color_intensity” と”alcohol”をx軸とy軸に設定しています。

ここでは，x＝0とy＝0の線を確認するため，x，y軸の表示範囲を−2からとしています。
このグラフについて，

  • 目盛線の設定
  • x＝0とy＝0の設定

をしていきます。コードは以下の通りです。

fig = go.Figure()
#color_intensity vs alcohol
fig.add_trace(go.Scatter(x=df_wine['color_intensity'],
                         y=df_wine['alcohol'],
                         mode='markers',
                         name='alcohol'
                         ))
# 背景，軸ラベル
fig.update_xaxes(title=dict(text='color_intensity'),
                 range=(-1, 14),
                 dtick=1,
                 )
fig.update_yaxes(title=dict(text='alcohol'),
                 range=(-2,16),
                 dtick=2,
                 )

fig.show()

散布図の基本的な書き方については以下の記事も参考にしてください。

あわせて読みたい
【plotly】コピペでOK！散布図の書き方_Scatter pythonで大量のデータをグラフ化するがときに，グラフ作成後に拡大したいな/各プロット点の数値を知りたいなと思うことが，これまでよくありました。 そんな中，plotly…

目盛線の色/太さの設定

まず，目盛線の色/太さの設定を行いたいと思います。

ここでは目盛線の色をわかりやすくするため，グラフの背景をplot_bgcolor=”white”で白色に設定しています。

x＝0とy＝0の線がデフォルトが白色なので，背景に埋もれていることも確認できます。

このグラフのコードは↓です

fig = go.Figure()
#color_intensity vs alcohol
fig.add_trace(go.Scatter(x=df_wine['color_intensity'],
                         y=df_wine['alcohol'],
                         mode='markers',
                         name='alcohol'
                         ))

# 背景，軸ラベル
fig.update_layout(plot_bgcolor="white")
fig.update_xaxes(title=dict(text='color_intensity'),
                 range=(-1, 14),
                 dtick=1,
                 linecolor='black',
                 linewidth=1,                 
                 mirror=True,
                 gridcolor='gray',
                 gridwidth=1
                 )
fig.update_yaxes(title=dict(text='alcohol'),
                 range=(-2,16),
                 dtick=2,
                 linecolor='black',
                 linewidth=1,                 
                 mirror=True,
                 gridcolor='gray',
                 gridwidth=1
                 )
fig.show()

14-18行目でx軸, 23-27行目でy軸の，色および線の太さの設定を行なっています。

各種項目の設定は以下の通りです。
x軸，y軸の中身は同じでなのでx軸について記載します。

目盛線の色/太さの設定
fig.update_xaxes(…
                 linecolor= <VALUE>,
                 linewidth= <VALUE>,
                 mirror= <VALUE>,
                 gridcolor= <VALUE>,
                 gridwidth= <VALUE>,
                 )
linecolor= ○○○軸線の色
linewidth= ○○○軸線の太さ
mirror= ○○○‘True’で反対の軸に設定が反映される
gridcolor= ○○○目盛線の色
gridwidth= ○○○目盛線の太さ

以下では，linecolorとgridcolorを変更した場合のグラフの様子を確認したいと思います。

linecolorの設定

まずは，xaxes, yaxesともにlinecolor=’blue’としています。

こちらでは，yaxesを‘lime’としみました。

gridcolorの設定

次にgridcolorの設定を変更した場合です。

まずは，xaxes, yaxesともにgridcolor=’lime’としています。

こちらは，yaxesがgreenです。

目盛線の種類の設定（dot線）

さて次に，目盛線種類の設定をしていきたいと思います。plotlyの公式HPはこちらです。
グラフのフォーマットが決まっている場合や，見やすさを重視する際には目盛線の設定は必須となります。

この章では，以下のグラフのように目盛線の種類を変えたグラフを作成します。

目盛線を点線で表示してみました。
コードは↓で，先ほどのコードに追記しています。

fig = go.Figure()
#color_intensity vs alcohol
fig.add_trace(go.Scatter(x=df_wine['color_intensity'],
                         y=df_wine['alcohol'],
                         mode='markers',
                         name='alcohol'
                         ))

# 背景，軸ラベル
fig.update_layout(plot_bgcolor="white")
fig.update_xaxes(title=dict(text='color_intensity'),
                 range=(-1, 14),
                 dtick=1,
                 linecolor='black',
                 linewidth=1,                 
                 mirror=True,
                 gridcolor='gray',
                 gridwidth=1,
                 griddash='dot'                 
                 )
fig.update_yaxes(title=dict(text='alcohol'),
                 range=(-2,16),
                 dtick=2,
                 linecolor='black',
                 linewidth=1,                 
                 mirror=True,
                 gridcolor='gray',
                 gridwidth=1,
                 griddash='dot'                 
                 )
fig.show()

目盛線種類の設定は24，25行目のfig.update_xaxes(x軸)， fig.update_yaxes(y軸)で設定を行います。

x軸，y軸についての中身は同じで設定です。
以下は，x軸について目盛線の設定をまとめました。

目盛線種類の設定
fig.update_xaxes(…,
                 griddash= <VALUE>
                 )
griddash= ○○○目盛線の種類の設定。以下かから選択
・’solid’ (デフォルト),
・‘dot’,
・‘dash’,
・‘longdash’,
・‘dashdot’,
・‘longdashdot’

次からは，giriddahの設定を変更した場合のグラフを確認してみます。

griddash=’dash’の設定

griddash=’dash’とした時の設定を見てみます。

*上記はページの読み込み速度軽減のためpngです。

griddash=’longdash’の設定

次に，griddash=’longdash’の場合を確認してみます。

*上記はページの読み込み速度軽減のためpngです。

griddash=’dashdot’の設定

次は，griddash=’dashdot’です。

*上記はページの読み込み速度軽減のためpngです。

griddash=’longdashdot’の設定

最後は，griddash=’longdashdot’です。

*上記はページの読み込み速度軽減のためpngです。

x=0, y=0の設定（zeroline）

この章では，x=0，y=0の設定を行います。
デフォルトでは，x=0, y=0は白色で背景色によっては見えづらいので，この章で設定方法を確認してみましょう。

以下のグラフでは，x=0, y=0をgrayの色に設定してみました。

このグラフを作成するためのコードはこちら↓になります。

fig = go.Figure()
#color_intensity vs alcohol
fig.add_trace(go.Scatter(x=df_wine['color_intensity'],
                         y=df_wine['alcohol'],
                         mode='markers',
                         name='alcohol'
                         ))

# 背景，軸ラベル
fig.update_layout(plot_bgcolor="white")
fig.update_xaxes(title=dict(text='color_intensity'),
                 range=(-1, 14),
                 dtick=1,
                 linecolor='black',
                 linewidth=1,                 
                 mirror=True,
                 gridcolor='gray',
                 gridwidth=1,
                 griddash='dot'                 
                 )
fig.update_yaxes(title=dict(text='alcohol'),
                 range=(-2,16),
                 dtick=2,
                 linecolor='black',
                 linewidth=1,                 
                 mirror=True,
                 gridcolor='gray',
                 gridwidth=1,
                 griddash='dot'                 
                 )
# x=0, y=0の設定
fig.update_xaxes(zeroline=True, zerolinecolor='teal',zerolinewidth=0.5)
fig.update_yaxes(zeroline=True, zerolinecolor='teal',zerolinewidth=0.5)
fig.show()

x=0，y＝0の設定は，fig.update_xaxes， fig.update_yaxes内で行っています。
ここでは見やすくするために新たに28，29行目にfig.update_xaxes， fig.update_yaxesを追記しています。

x=0，y＝0の設項目は下表の通りです。
x=0，y＝0の項目はどちらも同じなので，下表では代表してx=0を記載しています。

x＝0の設定
fig.update_xaxes(zeroline= <VALUE>, zerolinecolor= <VALUE>, zerolinewidth= <VALUE>)
zeroline = ○○○‘True’でx=0の線を表示する
zerolinecolor = ○○○x=0の線の色
zerolinewidth = ○○○x=0の線の太さ


zerolinecolor, zerolinewidthの設定を変更したときのグラフを確認してみます。

fig.update_xaxes(zeroline=True, zerolinecolor=’blue’,zerolinewidth=1.5)
fig.update_yaxes(zeroline=True, zerolinecolor=’blue’,zerolinewidth=0.1)
とした場合には，グラフは↓のようになります。

いろいろなグラフへの目盛線の設定

ここでは，散布図以外へのグラフについて設定をしたいと思います。

ヒストグラム

ヒストグラムの場合においても，これまで確認したように目盛線を簡単に設定できます。

*上記はページの読み込み速度軽減のためpngです。

コードはこちら
#ライブラリのインポート
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
df_wine

#ヒストグラムの作図
fig = go.Figure()
fig.add_trace(go.Histogram(x=df_wine['alcohol'],
                           name='wine',
                           visible=True,
                           showlegend=True,
                           marker=dict(color='red',
                                       line=dict(color='black',width=1),
                                       opacity=0.8)
                           ))

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


fig.show()

ヒストグラムの作図については，よろしければ↓の記事もご覧ください。

あわせて読みたい
【plotly】これでわかる！ヒストグラムの作図方法 本記事は，“plotlyはグラフをインタラクティブに操作できて興味あるけど，思い通りにヒストグラムの作図ができない！”という方の一助になればと思いまとめました。 本記…

バブルチャート

バルブチャートであっても同様に設定できます。

コードはこちら
#ライブラリのインポート
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
df_wine

#バブルチャートの作図
fig = go.Figure()
fig.add_trace(go.Scatter(x=df_wine['color_intensity'], 
                         y=df_wine['alcohol'],         
                         mode='markers',
                         text=df_wine['alcalinity_of_ash'],
                         marker=dict(
                            size=df_wine['alcalinity_of_ash'],
                            color=df_wine['alcalinity_of_ash'],
                            cmin=10,
                            cmax=25,
                            colorbar=dict(
                                title='alcalinity_of_ash'),
                            colorscale="viridis",
                            showscale=True)
                         ))
# 背景，軸の色
fig.update_layout(plot_bgcolor="white")
fig.update_xaxes(title=dict(text='color_intensity'),
                 linecolor='black',
                 mirror=True,
                 gridcolor='gray',
                 griddash='dot'
                 )
fig.update_yaxes(title=dict(text='alcohol'),
                 linecolor='black',
                 mirror=True,
                 gridcolor='gray',
                 griddash='dot'
                 )


fig.show()

バブルチャートの作図は下記の記事でまとめていますので，併せてご確認ください。

あわせて読みたい
【plotly】3次元データを2次元の散布図で表現する3つの方法 データの解析などをしているとどうしても，3次元のデータを扱うことがあるかと思います。2次元であれば，単純な散布図で傾向が直感的につかめるのですが，３次元のグラ…

まとめ

plotlyでの目盛線やx=0，y=0の線の設定をみてきました。

目盛線の設定および，x=0，y＝0の設定は，fig.update_xaxes(x軸)， fig.update_yaxes(y軸)内で行います。

目盛線および，x=0,y=0の設定
#目盛線の設定
fig.update_xaxes(…
                 linecolor= <VALUE>,
                 linewidth= <VALUE>,
                 mirror= <VALUE>,
                 gridcolor= <VALUE>,
                 gridwidth= <VALUE>,
                 griddash= <VALUE>
                 )
#x=0, y=0の設定
fig.update_xaxes(zeroline= <VALUE>, zerolinecolor= <VALUE>, zerolinewidth= <VALUE>)
# 目盛線の設定
## 目盛線の色/太さ
linecolor= ○○○軸線の色
linewidth= ○○○軸線の太さ
mirror= ○○○‘True’で反対の軸に設定が反映される
gridcolor= ○○○目盛線の色
gridwidth= ○○○目盛線の太さ
## 目盛線の種類
griddash= ○○○目盛線の種類の設定。以下かから選択
・’solid’ (デフォルト),
・‘dot’,
・‘dash’,
・‘longdash’,
・‘dashdot’,
・‘longdashdot’
# x=0, y=0の設定
zeroline = ○○○‘True’でx=0やy=0の線を表示する
zerolinecolor = ○○○x=0やy=0の線の色
zerolinewidth = ○○○x=0やy=0の線の太さ

説明の都合上，目盛線の設定および，x=0，y＝0の設定をそれぞれfig.update_xaxes(x軸)を設定しますが、まとめて一つにすることも可能です。

冒頭のグラフのコードはこちらです
#ライブラリのインポート
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
df_wine

#グラフ描画
fig = go.Figure()
#color_intensity vs alcohol
fig.add_trace(go.Scatter(x=df_wine['color_intensity'],
                         y=df_wine['alcohol'],
                         mode='markers',
                         name='alcohol'
                         ))

# 背景，軸ラベル
fig.update_layout(plot_bgcolor="white")
fig.update_xaxes(title=dict(text='color_intensity'),
                 linecolor='black',
                 mirror=True,
                 range=(-1, 14),
                 dtick=1,
                 gridcolor='gray',
                 griddash='dot'
                 )
fig.update_yaxes(title=dict(text='alcohol'),
                 linecolor='black',
                 mirror=True,
                 range=(-2,16),
                 dtick=2,
                 gridcolor='gray',
                 griddash='dot'
                 )
# x=0, y=0の設定
fig.update_xaxes(zeroline=True, zerolinecolor='gray',zerolinewidth=0.3)
fig.update_yaxes(zeroline=True, zerolinecolor='gray',zerolinewidth=0.3)
fig.show()

本記事では，目盛線の設定や，x=0,y=0の設定方法をみてきました。
どちらの設定も行わなくても，グラフの意味は伝わるかもしれませんが，読み手が理解しやすくなるという点ではとても大事な設定だと思います。
本記事を通して，少しでもわかりやすいグラフを作る助けになれたらと思います！

以上、【plotly】これだけでできる！目盛線の設定 / x=0,y=0の設定 -griddash, zeroline -でした！
お読み頂きありがとうございました！

plotly
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次