前回は複数のグラフをプロットするsubplotsについて紹介しました。
他にも今までに棒グラフ、線グラフ、散布図、ヒストグラムなど主要なチャートの作成方法を説明してきましたが、細かいレイアウトの設定までは説明していませんでした。
そこで、今回はグラフのタイトルや軸のラベルといったレイアウトの設定方法について細かく解説していきたいと思います。
以下のようなスタート時点を100に基準化した株価のデータを使います。
Date スノーピーク 楽天 ANA 2019-06-05 100.000000 100.000000 100.000000 2019-06-06 100.931543 104.659498 100.734361 2019-06-07 101.935361 105.107527 100.163222 2019-06-10 103.226089 107.078853 100.788768 ... ... ... ...
まずは、そのまま以下のコードで表示した場合のグラフを表示しておきます。
fig = go.Figure()
fig.add_trace(go.Scatter(x=df_normalized['Date'],
y=df_normalized['スノーピーク'],
mode='lines',
name='スノーピーク',
),
)
fig.add_trace(go.Scatter(x=df_normalized['Date'],
y=df_normalized['楽天'],
mode='lines',
name='楽天',
),
)
fig.show()
このままではグラフのタイトルやx軸、y軸のラベルもありませんので、何が何かわかりませんね。
ここからグラフのレイアウトを設定していきます。
目次
基本的なレイアウトの設定方法
基本的にレイアウトの設定は、update_layout()かLayout()を使って設定します。
update_layoutを使う場合は、そのまま引数に設定するだけです。
例えば、凡例を非表示にしたい場合は、showlegend=Falseとして渡します。
fig.update_layout(showlegend=False)
Layoutを使った場合は以下のようにgraph_objects.Layoutにshowlegend=Falseとして設定し、graph_objects.Figure()の引数として渡します。
data = go.Scatter(x=..., y=...) layout = go.Layout(showlegend=False) fig = go.Figure(data, layout) fig.show()
では、個別のプロパティを設定する方法を見ていきましょう。
ここでは、update_layoutを使って行うことにします。
レイアウトを設定する
グラフタイトルを設定する： title
タイトル文字を設定する
グラフにタイトルを設定するにはtitleを指定します。
title="XXX"という形でもいいですし、title=dict(text="XXX")という形でも可能です。
フォントなども一緒に設定したい場合は後者を使います。
では、やってみましょう。
fig.update_layout(title='Time Series of Stock Prices')
左上にタイトルが表示されていますね。
フォントを変えたいときはfontを指定します。
ここではフォントサイズと色を変えています。
ついでに太字にしていますが、太字にするためにはテキストに"<b>"を追加しています(HTMLと同じ記法です)。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
),
)
タイトルの位置を変える
タイトルの場所を変えたい場合は以下のようにx, y, xref, yref, xanchor, yanchorを使います。
xref, yrefで相対的な位置の基準となる箱をグラフ面かコンテナ全体かを指定します。
ここでは、xref='paper'としてグラフ面にしています。
そして、xanchorで中央寄せにして、xとyで場所を指定します。
x=0だと一番左、x=1だと一番右になります。
ここでは、x=0.5、xanchor="center"としているので、中央にタイトルを配置します。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
xref='paper', # container or paper
x=0.5,
y=0.9,
xanchor='center'
),
)
ただし、タイトルを真ん中にするメリットはありませんので、縦方向に動かすとか横方向にも微調整する程度でよいと思います。
グラフタイトルとグラフが離れて過ぎているように感じるので、y=0.88としてグラフタイトルを若干下に持ってきています。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88
)
)
凡例を設定する
凡例を消す
グラフに直接説明書きを付けたりすると、凡例が不要な場合も多いですね。
この場合はshowlegend=Falseとします。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
),
showlegend=False,
)
凡例の場所を変える
plotlyのデフォルトだと凡例がグラフエリアの外に出てて、グラフ自体が小さくなってしまいます。
そこで、凡例の場所を変えましょう。
まず、xanchorで左揃え(left)、中央揃え(center)、右揃え(right)を指定します。
yanchorは上揃え(top)、中央揃え(center)、揃え(bottom)を指定します。
そして、xにより位置を指定します。0であれば一番左、1であれば一番右になります。
0未満や1を超えても大丈夫です。
yについても同様です。1を超えるとグラフの外に出ます。
1.02などを設定する場合もよくあります。
最後にorientation="h"とすることで、水平方向にしています。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.9,
orientation='h',
)
)
凡例に枠や色を付ける
bgcolorで色を変え、bordercolorで枠の色を変えます。
borderwidthで線の太さを変えられます。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.9,
orientation='h',
bgcolor="white",
bordercolor="grey",
borderwidth=1)
)
グラフのサイズを変える
サイズを変えるには、widthとheightを設定します。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.83,
),
width=700,
height=500
)
fig.show()
余白の大きさを設定する
余白の大きさはmarginプロパティで設定します。
以下のように、上部はt、下部はb、左はl、右はrで指定します。
fig.update_layout(margin=dict(t=10, b=20, l=30, r=40))
カーソルを当てたときの挙動を変える：hovermode
カーソルを当てたときの挙動を変えるには、hovermodeを設定を変更できます。
hovermodeをFalseにすると、カーソルを当てたときにテキストが表示されなくなります。
"closest"を選ぶとカーソルに一番近いデータのテキストが表示され、”x”にするとカーソルのあるx軸の位置の点が表示されます。
yについても同様にy軸の位置にある点が表示されます。
わかりにくいので実際に見てみましょう。
デフォルトとは"closest"です。
hovermodeを"closest"にした場合は以下のように、一番近い点が表示されます。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.83,
),
hovermode='closest'
)
fig.show()
hovermodeを"x"にすると、この場合だと日付に対応したスノーピークと楽天の2つの点が表示されます。
比較する場合に便利かもしれませんね。
軸を設定する
続いて軸を設定する方法を紹介します。
x軸を設定するにはxaxisで指定し、y軸を設定するにはyaxisで指定します。
軸ラベルを設定する
tilteで指定します。
x軸はxaxisのtitleで、y軸はyaxisのtitleで設定します。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88,
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.78,
),
xaxis=dict(title='date'),
yaxis=dict(title='normalized stock price')
)
軸の範囲を設定する
rangeを使って設定します。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88,
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.78,
),
xaxis=dict(title='2020',
range=(datetime.date(2020, 1, 1),
datetime.date(2020, 12, 31))
),
yaxis=dict(title='normalized stock price',)
)
軸目盛の書式を変更する
tickformatを設定することで書式を変更することができます。
日付の場合ですと、月の英語表記にしたければtickformat='%b'という形で%で指定します。
YYYYは"%Y"、YYは"%y"といった具合です。
他の表記方法はこちらをご参照ください。
ここでは、{%b}と指定してみます。
ついでにリターンデータに変えて、y軸を%表示にしましょう。
この場合は、tickformat='%'とします。
fig.update_layout(title=dict(text='<b>Time Series of Stock Return',
font=dict(size=26,
color='grey'),
y=0.88,
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.88,
orientation='h'
),
xaxis=dict(title='2020',
tickformat='%b',
range=(datetime.date(2020, 1, 1), datetime.date(2020, 12, 31)),
dtick='M1'),
yaxis=dict(title='stock return',
tickformat='%',
)
)
すると以下のように表示されます。
目盛りの間隔を設定する
上の例でも既に設定してしまっていますが、dtickを設定することによって目盛りの間隔を調整できます。
日付の場合、dtick="M1"とすることで1ヵ月間隔、"M2"とすることで2ヵ月間隔になります。
"D1"や"D2"とすると1日や2日間隔になります。
縦軸はdtick=100とすることによって100ずつの目盛りを作成しています。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88,
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.78,
),
xaxis=dict(title='2020',
tickformat='%b',
range=(datetime.date(2020, 1, 1), datetime.date(2020, 12, 31)),
dtick='M1'),
yaxis=dict(title='normalized stock price',
dtick=100)
)
ちょっと便利な機能
凡例をクリックやダブルクリックをすると、不要なデータを一時的に非表示にしたり、表示したりすることが可能です。
この設定は、itemclickとitemdoubleclickで変更できます。
これらを"toggle"にするとそのデータを消し、"toggleothers"とするとそれ以外を消すことができます。
デフォルトではitemclickが”toggle”で、itemdoubleclickが"toggleothers"となっています。
特にに修正する必要はないと思いますのでコードは書きませんが、分析時にデータを除いたり入れたりして、見たい場合は是非お試しください。
その他オススメの設定
では、ここからは個人的によく使う設定をご紹介しておきます。
無駄な線や色を消し、伝えたい箇所を強調します。
plot_bgcolor="white"としてグラフの背景を白にし、update_xaxesとupdate_yaxesを指定して、線を軸の描いています。
これはLayout()でxaxisやyaxisを指定しても良いのですが、ここではupdate_xaxes、update_yaxesを使っています。
showline=Trueとして軸を追加し、linewidth=1で軸の太さを1に、linecolor="lightgrey"で線を薄い灰色にし、color="grey"で目盛を灰色にしています。
これはデータと比べ重要性の低い軸を薄くすることによって、データに強調するためです。
add_annotationを使っていますが、これについてはまたの機会にご紹介したいと思います。
コードは以下です。
fig.update_layout(title=dict(text='<b>Time Series of Stock Prices',
font=dict(size=26,
color='grey'),
y=0.88,
),
legend=dict(xanchor='left',
yanchor='bottom',
x=0.02,
y=0.85,
orientation='h'
),
xaxis=dict(
tickformat='%y %b',
dtick='M4'),
yaxis=dict(title='normalized stock price',
dtick=100,
)
)
fig.update_layout(plot_bgcolor='white')
fig.update_xaxes(showline=True,
linewidth=1,
linecolor='lightgrey',
color='grey')
fig.update_yaxes(showline=True,
linewidth=1,
linecolor='lightgrey',
color='grey')
fig.add_annotation(text='<b>2020年の夏以降、スノーピークの株価<br>が大きく上昇している.',
showarrow=False,
x=datetime.date(2020, 8, 31),
y=200,
align='left',
font=dict(size=18,
color='blue',))
これを実行すると以下のようなグラフになります。
これは、コロナ渦えスノーピークの株価が大きく上昇していることを伝えたい場合の見せ方の例になります。
もともとのこちらのグラフよりはだいぶ良くなったのではないでしょうか？
まとめ
今回はplotlyのレイアウト設定を細かく見てきました。
まだまだ設定はありますので、必要に応じてこちらをご参照いただければと思います。
またアノテーションの仕方などを解説したいと思っています！
なお、plotlyやmatplotlibなどの解説ではないですが、データを可視化に関する非常に参考になる本をこちらでご紹介しています。
実際のデータ分析やプレゼンテーションにおいて非常に役に立つ本ですので、是非参考にしていただければと思います。
おまけ
こちらのVIEWという転職サイトアプリですが、AIを使ったキャリア診断、キャリア・シミュレーションができるということで使ってみました。
『VIEWS 若手ハイクラス向け転職』職歴や価値観(「本や論文などで学習することが好きである」や「データや数字を扱うことが得意である」など）を入力するだけで向いている業界や想定年収が表示されます。
診断結果の想定年収が思ったより高くてびっくりです。
私はもう4回転職していますが、最近はアプリを使って転職する時代なのですね。
では！