【plotly】これでわかる！ヒストグラムの作図方法

2023年11月4日2024年5月22日

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

本記事の目標

基本的なヒストグラムの作図
ヒストグラムの色などの変更
パターン模様の塗りつぶし
ビン（階級、区間）の設定
平均/最小/最大などによる表現 (histfunc)
正規化の表現方法（histnorm）
複数のデータによるヒストグラムの表示方法

本記事を通して↓のようなグラフを作成することができます。

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

以下の目次に従い，一つ一つ設定を行っていきます。　
本記事で紹介するのはほんの一部ですので，ぜひplotlyの公式HPも確認してみてください。

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

ヒストグラムを作成するデータには，scikit-learnのワインのデータセット（公式サイト）を使います。

また，ライブラリにはsklearn, pandas, 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

df_wineの中身は↓のようになっております。

このデータは，3種類のワインの成分を調べたものとなっています。

この記事では，表の中の’alcohol’を使ってヒストグラムの作図方法をみていきます。

ヒストグラムの作図

まずは基本となるヒストグラムの作図のやり方を確認します。

ここで作成するグラフは↓になります。

コードは以下になります。
3-7行目でヒストグラムの作図を行っています。

fig = go.Figure()
#ヒストグラムの作図
fig.add_trace(go.Histogram(x=df_wine['alcohol'],
                           name='wine',
                           visible=True,
                           showlegend=True,
                           ))

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

fig.show()

グラフを作成する大まかな流れをこちらに示します。
（以下の流れ以外にも方法はあります）

グラフ作成の流れ

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

ヒストグラムの作図は，fig.add_trace(…)で設定を行います。

設定の詳細は↓の内容をご確認ください。

ヒストグラムの設定

fig.add_trace(go.Histogram(x= <VALUE>,
                           name= <VALUE>,
                           visible= <VALUE>,
                           showlegend= <VALUE>,
                           ))

x= ○○○	ヒストグラムのデータ
name= ○○○	データの判例名
visible= ○○○	データの表示設定、以下の3つから選択 ‘True’ : 表示する(default) ’False’ : 表示しない ’legendonly’ : 判例のみ表示（グラフは表示しない）
showlegend= ○○○	判例の表示設定 ‘True’ : 表示する(default) ’False’ : 表示しない

10-12行目のfig.update_layout(…), fig.update_xaxes(…)などで，背景の色や軸のタイトルの設定を行なっています。

背景や軸タイトルについては，以下の記事でもまとめていますので，お時間あればご確認ください。

ヒストグラムの色/線の太さ・色の変更

次に，ヒストグラムの色と，線の太さ・色の変更を行います。

以下のグラフは，ヒストグラムの色を赤、透明度を0.8とし，線の色も黒としています。

コードは↓です。

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='alcohol',linecolor='black', gridcolor='gray',mirror=True)
fig.update_yaxes(title='count',linecolor='black', gridcolor='gray',mirror=True)

fig.show()

ヒストグラムの色などを設定するために，先ほどのコードに7-9行目を追記しています。

設定する項目の詳細は下記です。

ヒストグラムの色/線の太さ・色の設定

fig.add_trace(go.Histogram(…,
                           marker=dict(color= <VALUE>,
                                       line=dict(color= <VALUE>, width= <VALUE>),
                                       opacity= <VALUE>)
                           ))

marker= dict(…)	color=○○○		ヒストグラムの色
	line=dict(…)	color=○○○	ヒストグラムの線の色
		width=○○○	ヒストグラムの線の太さ
	opacity= ○○○		透明度

さらに，それぞれの項目を変更したグラフを2つ作成しました。

どのように変化するかイメージが湧いて頂ければ幸いです。

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

パターン模様による塗りつぶし

次に，ヒストグラムのパターンの塗りぶしについて確認します。

以下では“/”のパターンが入ったグラフを作成しています。

コードはこちら↓です。

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,
                                       pattern=dict(fgcolor='blue',
                                                    shape='/',
                                                    size=10)),
                           ))

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

fig.show()

11-13行目のmarker=dict(…)内のpattern=dit(…)で設定を行います。

設定する項目は↓をご覧ください。

パターン模様の塗りつぶし設定

fig.add_trace(go.Histogram(…,
                           marker=dict(…,
                                       pattern=dict(fgcolor= <VALUE>,
                                                    shape= <VALUE>,
                                                    size= <VALUE>))
                           ))

marker= dict(…)	pattern= dict(…)	fgcolor= ○○○	パターンの色の設定
		shape= ○○○	パターンの形状の設定 “/”, “x”, “-”, “\|”, “+”, “.”などから選択
		size= ○○○	パターン形状のサイズ

それぞれのパターンをグラフ化した様子を下記に貼りますので、参考にしてください。

ビン（階級、区間）の設定

次は，ビンの設定をみてみます。

設定の仕方は2通りの方法あり，主な違いは下記の通りです。

nbinsxによる設定 : ビン数の指定
xbinsによる設定 : ビン幅の指定

併用した場合は，nbinsxで指定したビン数を超えないよう，xbinsで指定したおおよそのビン幅になります。

nbinsxによる設定

まずは，nbinsxの設定を確認します。

下のグラフは，nbinsx=20で設定したグラフです。この値を基に（最大値として）最適なbin数をplotlyの計算するため，指定した値通りにならない場合もあります。

コードはこちら↓になります。

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,
                                       pattern=dict(shape='/')),
                           nbinsx=20
                           ))

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

fig.show()

12行目でnbinsxの設定をしています。

詳細は↓をご確認ください。

nbinsxによるビンの設定

fig.add_trace(go.Histogram(…,
                           nbinsx= <VALUE>,
                           ))

nbinsx= ○○○

ビン数の設定

xbinsによる設定

続いて，xbinsの設定方法を確認します。

ビン幅は0.1と設定しています。

コードは以下です。

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,
                                       pattern=dict(shape='/')),
                           xbins=dict(start=11,
                                      end=15,
                                      size=0.1)
                           ))

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

fig.show()

12-14行目で設定しており，詳しくは下記をご覧ください。

xbinsによるビンの設定

fig.add_trace(go.Histogram(…,
                           xbins=dict(start= <VALUE>,
                                      end= <VALUE>,
                                      size= <VALUE>)
                           ))

xbins=dict(…)	start= ○○○	ビンの開始位置の設定
	end= ○○○	ビンの終了位置の設定
	size= ○○○	ビンのサイズの設定

平均/最小/最大などによる表現 (histfunc)

この章では，y軸を“度数“ではなく，“合計値”，“平均値”，“最小値”，“最大値”で表す方法を確認します。

下図は階級内のデータを“合計値”で示したグラフとなります。

コードは以下のようになります。

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,
                                       pattern=dict(shape='/')),
                           y=df_wine['alcohol'],
                           histfunc='sum'
                           ))

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

fig.show()

平均/最大/最小などの表現に変更するには，12行目のy= ○○○と13行目のhistfunc= ○○○を設定する必要があります。

histfunc= ○○○ で表現法を設定し，y= ○○○のデータに適用されます。

詳細は以下をご確認ください。

平均/最小/最大などによる表現の設定

fig.add_trace(go.Histogram(…,
                           y= <VALUE>, 
                           histfunc= <VALUE>,
                           ))

y= ○○○	y軸のデータ
histfunc= ○○○	以下の5つから選択，ただしy=○○○の値に適用 “count”: 度数，データ個数による表現 ”sum” : 合計値による表現 “avg” : 平均値による表現 “min” : 最小値による表現 ”max” : 最大値による表現

“count”, “sum”, ”avg”, “min”, “max”のグラフを下記にまとめてあります。それぞれの違いをご確認ください。

上記までは，x= ○○○とy= ○○○のデータは“alcohol”で揃えてきたので，x軸の階級とy軸の度数は同じデータでしたが，それぞれ別のデータでも作図することができます。

ここでは，

x=df_wine[‘alcohol’]
y=df_wine[‘magnesium’]
histfund=‘sum’

とすると以下のグラフが作成できます。
これは，ワインデータを”alcohol”の階級を区切り，その区間内に対応する“magnesium”の合計値をグラフ化した物になります。

正規化の表現方法（histnorm）

次は，正規化による表現方法をみてみます。

正規化とは，一定のルールに従って数値を変換する方法です。

機械学習などでは0〜1の範囲に変換する正規化（Min-Max法）が有名ですが，ここではヒストグラムに対する表現方法を確認します。

以下のグラフは，“percent”表示でy軸全体の合計を100%にした正規化表現になります。

コードは以下になります。

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,
                                       pattern=dict(shape='/')),
                           histnorm='percent'
                           ))

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

fig.show()

12行目でhistnormで正規化の設定をしています。

設定内容は下記をご確認ください。

正規化による表現の設定

fig.add_trace(go.Histogram(…,
                           histnorm= <VALUE>,
                           ))

histnorm= ○○○

以下の5つから選択
“” : 度数表現（正規化しない）
”percent” : y軸全体の合計を100%にする正規化表現
“probability” : y軸全体の合計を1にする正規化表現
“density” : y軸を(度数)/(階級幅)の密度にする正規化表現
”probability density” : “density”の面積全体を1にする正規化表現

histnorm=‘’, ‘percent’, ‘probability’, ‘density’, ‘probability density’を選択した結果を以下に示します。

複数のデータによるヒストグラムの表示方法

最後に複数データの表示方法を確認します。

これまでワインのデータセットの中の”alcohol”のデータを使用してきました。
ただし，このデータセットは3種類のワインから構成されており，ワインの種別については区別していませんでした。

そこで，ワインの種別ごとにヒストグラムを作り，複数データのときのヒストグラムの設定方法を確認します。

下記のグラフは，ヒストグラムを互いに積み上げた表現となっています。

コードはこちら↓です。

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

fig = go.Figure()
#ヒストグラムの作図
fig.add_trace(go.Histogram(x=wine_target0['alcohol'],
                           y=wine_target0['alcohol'],
                           name='wine_target0',
                           visible=True,
                           showlegend=True,
                           marker=dict(color='blue',
                                       line=dict(color='black',
                                                 width=1),
                                       opacity=0.8,
                                       pattern=dict(shape='|')),
                           nbinsx=15
                           ))

fig.add_trace(go.Histogram(x=wine_target1['alcohol'],
                           y=wine_target1['alcohol'],
                           name='wine_target1',
                           visible=True,
                           showlegend=True,
                           marker=dict(color='red',
                                       line=dict(color='black',
                                                 width=1),
                                       opacity=0.8,
                                       pattern=dict(shape='+')),
                           nbinsx=15
                           ))

fig.add_trace(go.Histogram(x=wine_target2['alcohol'],
                           y=wine_target2['alcohol'],
                           name='wine_target2',
                           visible=True,
                           showlegend=True,
                           marker=dict(color='green',
                                       line=dict(color='black',
                                                 width=1),
                                       opacity=0.8,
                                       pattern=dict(shape='/')),
                           nbinsx=15
                           ))

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

fig.show()

まず2-4行目でワインの種別ごとに，データの分割を行なっています。

その後，8-19行目で1品種目のヒストグラム， 21-32行目で2品種目のヒストグラム， 34-45行目で3品種目のヒストグラムの作成を行っています。

そして，47行目のfig.update_layout(barmode=○○○)で複数のヒストグラムの表示設定を行います。

fig.update_layout(barmode=○○○)の詳細は以下をご確認ください。

複数データによるヒストグラム表現方法の設定

fig.update_layout(barmode= <VALUE>)

barmode= ○○○

以下の4つから選択
“stack” : ヒストグラムを互いに積み上げて表現
”group” : 積み重ねず隣にプロットする表現
“overlay” : ヒストグラムを重ね合わせて表現
“relative” : 正の値はy軸のプラス方向，負の値はy軸のマイナス方向に積み上げて表現

上記で，barmode= “stack” を確認したので，その他の”group”, “overlay”, “relative”について結果のみ確認したいと思います。

今回のデータでは，負の値がないので”stack”と”relative”は同じ結果になってます。ご注意ください。

まとめ

plotlyを使ったヒストグラムの作図方法をみてきました。

まず大まかなグラフ作成の流れは以下の通りでした。

グラフ作成の流れ

ここの2.fig.add_trace()でヒストグラムの作成をしました。
また，複数のヒストグラムの表示設定については，3.figupdate_layout()で行いました。

以下で，本記事で紹介したヒストグラムの設定項目を一覧でまとめています。

本記事で紹介したヒストグラムの設定一覧

fig.add_trace(go.Histogram(x= <VALUE>,
                           name= <VALUE>,
                           visible= <VALUE>,
                           showlegend= <VALUE>,
                           # 色や線，パターンなどの設定
                           marker=dict(color= <VALUE>,
                                       line=dict(color= <VALUE>, width= <VALUE>),
                                       opacity= <VALUE>
                                       pattern=dict(fgcolor= <VALUE>,
                                                    shape= <VALUE>,
                                                    size= <VALUE>)
                                       ),
                           # ビンの設定
                           nbinsx= <VALUE>,
                           xbins=dict(start= <VALUE>,
                                      end= <VALUE>,
                                      size= <VALUE>),
                           # 平均/最小/最大などによる表現の設定
                           y= <VALUE>, 
                           histfunc= <VALUE>,
                           # 正規化による表現の設定
                           histnorm= <VALUE>,

                           ))

x= ○○○			ヒストグラムのデータ
name= ○○○			データの判例名
visible= ○○○			データの表示設定、以下の3つから選択 ‘True’ : 表示する(default) ’False’ : 表示しない ’legendonly’ : 判例のみ表示（グラフは表示しない）
showlegend= ○○○			判例の表示設定 ‘True’ : 表示する(default) ’False’ : 表示しない
# 色や線，パターンなどの設定
marker= dict(…)	color=○○○		ヒストグラムの色
	line=dict(…)	color=○○○	ヒストグラムの線の色
		width=○○○	ヒストグラムの線の太さ
	opacity= ○○○		透明度
	pattern= dict(…)	fgcolor=○○○	パターンの色の設定
		shape=○○○	パターンの形状の設定 “/”, “x”, “-”, “\|”, “+”, “.”などから選択
		size=○○○	パターン形状のサイズ
# ビンの設定
nbinsx= ○○○			ビン数の設定
xbins=dict(…)	start= ○○○		ビンの開始位置の設定
	end= ○○○		ビンの終了位置の設定
	size= ○○○		ビンのサイズの設定
# 平均/最小/最大などによる表現の設定
y= ○○○			y軸のデータ
histfunc= ○○○			以下の5つから選択，ただしy=○○○の値に適用 “count”: 度数，データ個数による表現 ”sum” : 合計値による表現 “avg” : 平均値による表現 “min” : 最小値による表現 ”max” : 最大値による表現
# 正規化による表現の設定
histnorm= ○○○			以下の5つから選択 “” : 度数表現（正規化しない） ”percent” : y軸全体の合計を100%にする正規化表現 “probability” : y軸全体の合計を1にする正規化表現 “density” : y軸を(度数)/(階級幅)の密度にする正規化表現 ”probability density” :“density”の面積全体を1にする正規化表現

複数のヒストグラムの表示設定については，以下の通りでした。

複数データによるヒストグラム表現方法の設定

fig.update_layout(barmode= <VALUE>)

barmode= ○○○

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

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

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

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

fig.add_trace(go.Histogram(x=wine_target1['alcohol'],
                           y=wine_target1['alcohol'],
                           name='wine_target1',
                           visible=True,
                           showlegend=True,
                           marker=dict(color='red',
                                       line=dict(color='black',
                                                 width=1),
                                       opacity=0.75,
                                       pattern=dict(shape='+')),
                           nbinsx=15
                           ))

fig.add_trace(go.Histogram(x=wine_target2['alcohol'],
                           y=wine_target2['alcohol'],
                           name='wine_target2',
                           visible=True,
                           showlegend=True,
                           marker=dict(color='green',
                                       line=dict(color='black',
                                                 width=1),
                                       opacity=0.85,
                                       pattern=dict(shape='/')),
                           nbinsx=15
                           ))

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


fig.show()

読了お疲れ様でした！

以上，【plotly】これでわかる！ヒストグラムの作図方法　でした！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

【plotly】これでわかる！ヒストグラムの作図方法

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

ヒストグラムの作図

ヒストグラムの色/線の太さ・色の変更

パターン模様による塗りつぶし

ビン（階級、区間）の設定

nbinsxによる設定

xbinsによる設定

平均/最小/最大などによる表現 (histfunc)

正規化の表現方法（histnorm）

複数のデータによるヒストグラムの表示方法

まとめ

コメント

コメントするコメントをキャンセル

【plotly】これでわかる！ヒストグラムの作図方法

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

ヒストグラムの作図

ヒストグラムの色/線の太さ・色の変更

パターン模様による塗りつぶし

ビン（階級、区間）の設定

nbinsxによる設定

xbinsによる設定

平均/最小/最大などによる表現 (histfunc)

正規化の表現方法（histnorm）

複数のデータによるヒストグラムの表示方法

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル