Plotly⑦(ツリーマップ)

ツリーマップ

Plotlyでツリーマップを描画するにはTreemapクラスを使います。

Treemapクラスの引数は下記の通りです。(Sunburstクラスと同様)

  • labels
    セクタごとのラベルを設定。
  • parents
    親セクタごとのラベルを設定。
    最上位の階層にする場合は空の文字列を設定。
  • values
    セクタごとの値を設定。
  • branchvalues
    値を合計する方法を設定。
    “total”:親が子の階層すべての合計
    “remainder”:子が親とは別の値

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import plotly.graph_objects as go
from plotly.subplots import make_subplots

asset_labels = ["資産", "債権", "A社", "B社", "株式", "C社", "D社", "預金","Z社"]
asset_parents = ["", "資産", "債権", "債権", "資産", "株式", "株式", "資産","B社"]
asset_values = [1000, 400, 300, 100, 200, 160, 40, 400, 50]

go.Figure(
go.Treemap(
labels=asset_labels, # セクタごとのラベル
parents=asset_parents, # 親セクタのラベル
values=asset_values, # セクタごとの値
branchvalues="total" # 親が子の階層すべての合計値
)
).show()

[実行結果]

ツリーマップの特定の階層をクリックすると、その階層がドリルダウンして描画されます。

特定階層を選択した状態から、親の階層をクリックすると元のグラフに戻ります。

[実行結果 (債権を選択)]

Plotly⑥(サンバーストグラフ)

サンバーストグラフ

Plotlyでサンバーストグラフを描画するにはSunburstクラスを使います。

Sunburstクラスの引数は下記の通りです。

  • labels
    セクタごとのラベルを設定。
  • parents
    親セクタごとのラベルを設定。
    最上位の階層にする場合は空の文字列を設定。
  • values
    セクタごとの値を設定。
  • branchvalues
    値を合計する方法を設定。
    “total”:親が子の階層すべての合計
    “remainder”:子が親とは別の値

次のコードでは、左図に親が子の階層すべての合計となるサンバーストグラフを表示し、左図に子が親とは別の値となるサンバーストグラフを描画しています。

[Google Colaboratory]

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
32
33
34
import plotly.graph_objects as go
from plotly.subplots import make_subplots

asset_labels = ["資産", "債権", "A社", "B社", "株式", "C社", "D社", "預金","Z社"]
asset_parents = ["", "資産", "債権", "債権", "資産", "株式", "株式", "資産","B社"]
asset_values = [1000, 400, 300, 100, 200, 160, 40, 400, 50]

sunburst_fig = make_subplots(
1, 2, specs=[[{"type": "domain"}, {"type": "domain"}]]
)

sunburst_fig.add_trace(
go.Sunburst(
labels=asset_labels, # セクタごとのラベル
parents=asset_parents, # 親セクタのラベル
values=asset_values, # セクタごとの値
branchvalues="total", # 親が子の階層すべての合計値
),
row=1,
col=1,
)

sunburst_fig.add_trace(
go.Sunburst(
labels=asset_labels,
parents=asset_parents,
values=asset_values,
branchvalues="remainder", # 子が親とは別の値
),
row=1,
col=2,
)

sunburst_fig.show()

[実行結果]

サンバーストグラフの特定の階層をクリックすると、その階層がドリルダウンして描画されます。

特定階層を選択した状態から、親の階層をクリックすると元のグラフに戻ります。

[実行結果 (左図:債権を選択 右図:株式を選択)]

Plotly⑤(円グラフ)

円グラフ

Plotlyで円グラフを描画するにはPieクラスを使います。

Pieクラスの引数 valuesにリストなどのデータを設定すると、百分率が自動で算出された円グラフが表示されます。(8行目)

また、引数 labelsに各要素のラベルを設定すると凡例やホバーツールに表示されます。

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
import plotly.graph_objects as go

companies = ["A社", "B社", "C社", "D社"]
sales_2020 = [900, 700, 200, 100]
sales_2021 = [1400, 980, 450, 380]

go.Figure(
go.Pie(labels=companies, values=sales_2020),
layout=go.Layout(title="売上"), # figureのタイトル
).show()

[実行結果]

複数の円グラフ

複数の円グラフを表示しつつ、合計値の大きさの比率で比較してみます。

Pieクラスの引数 scalegroupに文字列を渡すと、同じ文字列で指定されたtraceの合計値に応じて円グラフ全体の面積が調整されます。(13,22行目)

2つのデータの合計値を比較した円グラフを表示するコードは、下記のようになります。

[Google Colaboratory]

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
from plotly.subplots import make_subplots

sales_pie_fig = make_subplots(
rows=1,
cols=2,
specs=[[{"type": "domain"}, {"type": "domain"}]],
subplot_titles=["2020年の売上", "2021年の売上"], # サブプロットのタイトル
)
sales_pie_fig.add_trace(
go.Pie(
labels=companies,
values=sales_2020, # 同じscalegroupでサイズが調整される
scalegroup="sales",
),
row=1,
col=1,
)
sales_pie_fig.add_trace(
go.Pie(
labels=companies,
values=sales_2021,
scalegroup="sales"), # 同じscalegroupでサイズが調整される
row=1,
col=2,
)
sales_pie_fig.show()

[実行結果]

Plotly④(面グラフ)

面グラフ

Plotlyで面グラフを描画するには折れ線グラフや散布図と同じようにScatterクラスを使います。

Scatterクラスの引数 fill“tozeroy”を指定すると、領域を塗りつぶして表示することができます。(10行目)

また、引数 mode“none”を設定すると、線とマーカーが描画されなくなります。(11行目)

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import numpy as np
import plotly.graph_objects as go

np.random.seed(7)
area_x = np.arange(15)
area_y1, area_y2 = np.random.rand(2, 15) # 一様乱数を生成
area_trace = go.Scatter(x=area_x,
y=area_y1,
name="area1",
fill="tozeroy", # 0からY値まで塗りつぶし,
mode="none", # 線とマーカーを描画しない
fillcolor="mediumslateblue" # 塗りつぶし色
)
area_fig = go.Figure([area_trace])
area_fig.show()

[実行結果]

面グラフ(積み上げ)

面グラフを積み上げるには、複数のtraceをfigureに設定します。

traceが複数ある場合、Scatterクラスの引数fillに“tozeroy”を渡すと同じ領域を塗りつぶしてしまうため、重なった領域の塗りつぶしの色が混合してしまいます。

これを回避するには塗りつぶす領域の範囲をtrace間の値とします。

引数 fill“tonexty”を渡すと、前のtraceからY値までの領域を塗りつぶします。(4行目)

以下のコードでは、2つの要素を面グラフで描画し、2番目の要素の塗りつぶし領域を前の要素のY値からとしています。

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
next_area_trace = go.Scatter(x=area_x,
y=area_y1 + area_y2,
name="area2",
fill="tonexty", # 前のtraceからY値までを塗りつぶし
mode="none",
fillcolor="lightpink"
)
stacked_area_fig = go.Figure([area_trace, next_area_trace])
stacked_area_fig.show()

[実行結果]

Plotly③(棒グラフ)

棒グラフ

棒グラフを表示するにはBarクラスを使用します。

引数 orientation“h”を渡すと横向きの棒グラフになります。(14行目)

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import plotly.graph_objects as go
from plotly.subplots import make_subplots

bar_fig = make_subplots(rows=2, cols=2, subplot_titles=["ラベル", "座標", "横"])

# X値が文字列型の場合
bar_fig.add_trace(go.Bar(x=["a", "b", "c", "d", "e"], y=[8, 3, 5, 4, 2]), row=1, col=1)

# X値が数値型の場合
bar_fig.add_trace(go.Bar(x=[0, 1, 2, 4, 5], y=[1, 4, 2, 3, 2]), row=1, col=2)

# 横向きの棒グラフの場合
bar_fig.add_trace(
go.Bar(x=[3, 2, 1, 5], y=[1, 2, 3, 4], orientation="h"), row=2, col=1
)

bar_fig.show()

[実行結果]

棒グラフ(グループ化)

Figure関数に複数のBar traceを渡すと、グループ化した棒グラフを描画することができます。

[Google Colaboratory]

1
2
3
4
bar_trace1 = go.Bar(x=["a", "b", "c", "d", "e"], y=[3, 5, 2, 1, 6], name="group1")
bar_trace2 = go.Bar(x=["a", "b", "c", "d", "e"], y=[4, 3, 5, 2, 1], name="group2")
grouped_fig = go.Figure([bar_trace1, bar_trace2])
grouped_fig.show()

[実行結果]

棒グラフ(積み上げ)

Layoutクラスの引数 barmode“stack”を渡すと、積み上げ棒グラフを描画することができます。(3行目)

[Google Colaboratory]

1
2
3
4
5
stacked_fig = go.Figure(
[bar_trace1, bar_trace2],
layout=go.Layout(barmode="stack") # 積み上げ棒グラフにするためlayoutを設定
)
stacked_fig.show()

[実行結果]

棒グラフ(マイナス方向に積み上げ)

Layoutクラスの引数 barmode“relative”を渡すと、値が0未満の要素を下方向に積み上げて表示することができます。(4行目)

[Google Colaboratory]

1
2
3
4
5
6
bar_trace3 = go.Bar(x=["a", "b", "c", "d", "e"], y=[-2, -3, 1, -4, 2], name="group3")
relative_fig = go.Figure(
[bar_trace1, bar_trace2, bar_trace3],
layout=go.Layout(barmode="relative") # 0未満の値をした方向に積み上げるlayoutを作成
)
relative_fig.show()

[実行結果]

Plotly②(散布図)

散布図

Plotlyで散布図を描画するには折れ線グラフと同じようにScatterクラスを使います。

Scatterクラスの引数 mode“markers”を指定すると散布図が表示できます。

正規分布に従う乱数を生成し、散布図を描画してみます。

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
import plotly.graph_objects as go
import numpy as np

np.random.seed(1)
scatter_x, scatter_y = np.random.randn(2, 100) # 正規分布に従う乱数を生成
go.Figure(
go.Scatter(x=scatter_x,
y=scatter_y,
name="standard normal distribution",
mode="markers" # 描画モードを散布図に設定
)
).show()

[実行結果]

散布図(バブルチャート)

バブルチャートは散布図の要素の大きさで値を表現したグラフです。

散布図の要素の大きさを設定するにはmarker.size属性にリストデータを設定します。(10行目)

また、marker.color属性にリストデータを設定するとカラースケールで表示することができます。(11行目)

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
np.random.seed(1)
scatter_color = np.random.rand(100)
scatter_size = np.random.rand(100) * 30
go.Figure(
go.Scatter(x=scatter_x,
y=scatter_y,
name="4d",
mode="markers",
marker={
"size": scatter_size, # 要素ごとに大きさを指定
"color": scatter_color, # 要素の大きさを色で表現
"sizemode": "diameter", # 大きさを直径で指定
"opacity": 0.8, # 要素の不透明度
"showscale": True # カラースケールを表示
}
)
).show()

[実行結果]

散布図(高速描画)

大きなデータを扱う場合、WebGLで実装されたScatterglクラスを使用することで高速に描画できます。

下記のコードでは、1万個の乱数を散布図に描画しています。

[Google Colaboratory]

1
2
3
np.random.seed(1)
large_x, large_y = np.random.randn(2, 10000)
go.Figure([go.Scattergl(x=large_x, y=large_y, mode="markers")]).show()

[実行結果]

Plotly①(折れ線グラフ)

今回から、plotly.pyを使っていろいろなグラフの描画を行っていきます。

株価データ

まずはデータを準備します。

読み込むデータは株価データです。

[Google Colaboratory]

1
2
3
4
import plotly

stocks = plotly.data.stocks()
stocks.head()

[実行結果]

折れ線グラフ

折れ線グラフを描画するためにはScatter関数を利用します。

引数 xに日付データ(date)、引数 yにはGoogleの株価(GOOG)を設定しています。

[Google Colaboratory]

1
2
import plotly.graph_objects as go
go.Figure(go.Scatter(x=stocks["date"], y=stocks["GOOG"])).show()

[実行結果]

折れ線グラフ(スライダ付き)

スライダを使うと、描画範囲を変更したり、指定した範囲の描画位置の移動ができるようになります。

Range Sliderを表示するにはlayoutのxaxis.rangeslider.visible属性にTrueを設定します。(4行目)

また、Range Selectorは1か月や1週間など、期間を固定した範囲指定ができます。(5~11行目)

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ts_layout = go.Layout(
# X軸のRange SliderとRange Selectorを表示
xaxis={
"rangeslider": {"visible": True}, # RangeSliderを表示
"rangeselector": { # RangeSelectを設定
"buttons": [
{"label": "1m", "step": "month", "count": 1}, # 1ヵ月
{"label": "7d", "step": "day", "count": 7}, # 7日間
{"step": "all"}, # 全期間
]
},
}
)

go.Figure(
go.Scatter(x=stocks["date"], y=stocks["GOOG"]), layout=ts_layout
).show()

[実行結果]

Range Slider(下側のグラフ)で描画範囲や描画位置を変更して表示することができます。

またグラフ左上のRange Selector(1m/7d/all)をボタンを押すと、固定された期間でグラフの表示が切り替わります。

Plotly Express㉓(3D散布図)

今回は、3D散布図を表示します。

データの読み込み

まずはデータを読み込みます。

準備するデータはgapminderデータセット(年・国ごとの平均寿命と一人当たりのGDP)です。

[Google Colaboratory]

1
2
3
4
import plotly.express as px

gapminder = px.data.gapminder()
gapminder.head()

[実行結果]

3D散布図

3D散布図を描画するには、次の2つの関数のいずれかを使います。

  • scatter_3d
    3D散布図を表示する。
  • line_3d
    3D折れ線グラフを表示する。

引数の x, y, z にはグラフに表示するデータを設定します。

また、引数sizeには要素の大きさを表すデータを設定し、引数colorにはカラースケールで表示するデータを設定します。

[Google Colaboratory]

1
2
3
4
5
6
7
8
9
10
scatter_3d_fig = px.scatter_3d(gapminder,               # データセット
x="year", # X軸のデータ
y="continent", # Y軸のデータ
z="pop", # Z軸のデータ
size="gdpPercap", # 要素の大きさ
color="lifeExp", # lifeExp列で色分け
hover_data=["country"] # ホバーツールに表示
)
scatter_3d_fig.layout.update(scene={"zaxis": {"type": "log"}}) # Z軸を対数にとる
scatter_3d_fig.show()

[実行結果]

グラフを選択しドラッグすると、グラフの角度を変えて見ることができます。

Plotly Express㉒(地図上の散布図)

今回は、地図上に散布図を表示します。

データの読み込み

まずはデータを読み込みます。

準備するデータはgapminderデータセット(年・国ごとの平均寿命と一人当たりのGDP)となります。

[Google Colaboratory]

1
2
3
4
import plotly.express as px

gapminder = px.data.gapminder()
gapminder.head()

[実行結果]

地図上の散布図

地図上に散布図を表示するにはscatter_geo関数を使用します。

各引数の意味は下記の通りです。

  • locations
    位置データ。alpha-3形式の位置データ(iso_alpha)を設定。
  • size
    要素の大きさ。一人当たりのGDP(gdpPercap)を設定。
  • color
    カラースケールで表示。平均寿命(lifeExp)を設定。
  • animation_frame
    スライドバーを表示し、データを変えて表示可能。年(year)を設定。

[Google Colaboratory]

1
2
3
4
5
6
7
px.scatter_geo(gapminder,               # データセット
locations="iso_alpha", # 位置をISO 3166-1 alpha-3形式で指定
size="gdpPercap", # 要素のサイズ
color="lifeExp", # 要素の色
hover_name="country", # ホバーツールのタイトル
animation_frame="year" # アニメーション
).show()

[実行結果]

Plotly Express㉑(階級区分図)

階級区分図(コロプレスマップ)は、値に合わせた色調に塗り分けた地図です。

地域ごとの値をカラースケールで表現します。

データの読み込み

まずはデータを読み込みます。

準備するデータはgapminderデータセット(年・国ごとの平均寿命と一人当たりのGDP)の2007年分を抽出したものとなります。

[Google Colaboratory]

1
2
3
4
5
import plotly.express as px

gapminder = px.data.gapminder()
gapmider_2007 = gapminder[gapminder["year"] == 2007]
gapmider_2007.head()

[実行結果]

階級区分図

階級区分図を描画するためにはchoropleth関数を使用します。

引数 locationsに位置データとなる列名、引数 colorに値となる列名を渡します。

引数 locationmodeでは位置の形式を文字列で指定します。デフォルトは“ISO-3”です。

以下のコードではiso_alpha列(ラテン文字3文字による国名コード)ごとのlifeExp列(平均寿命)の値を階級区分図で表示します。

ホバーツールのタイトルにcountry列のデータを指定しています。

[Google Colaboratory]

1
2
3
4
5
px.choropleth(gapmider_2007,
locations="iso_alpha", # 位置をISO 3166-1 alpha-3形式で指定
color="lifeExp", # 平均寿命
hover_name="country", # ホバーツールのタイトル
).show()

[実行結果]