plotly
前回、HTML上でインタラクティブなグラフ描写ができるライブラリplotlyで複数のグラフを一度にプロットする方法を解説しました。
今回はさらに複数のグラフを一度にプロットした時のレイアウトをいじってみましょう。
どういうことかというと、例えばこんな感じで複数のグラフを配置してみましょうということ。
特定のグラフを目立たせたかったり、奇数個のグラフを並べる時に重宝しそうです。
まずは基本となるプログラムからです。
import random
import plotly.graph_objects as go
data_points = 100
x1_val = [i for i in range(data_points)]
y1_val = [random.randrange(10) for _ in range(data_points)]
x2_val = [i for i in range(data_points)]
y2_val = [random.randrange(100) for _ in range(data_points)]
x3_val = [i for i in range(data_points)]
y3_val = [random.randrange(1000) for _ in range(data_points)]
graph1 = go.Scatter(x=x1_val,y=y1_val)
graph2 = go.Scatter(x=x2_val,y=y2_val)
graph3 = go.Scatter(x=x3_val,y=y3_val)
fig = go.Figure().set_subplots(rows=2, cols=2)
fig.append_trace(graph1, row=1, col=1)
fig.append_trace(graph2, row=1, col=2)
fig.append_trace(graph3, row=2, col=1)
with open('./plotly11-1.txt', 'w') as f:
f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))
実行結果前回勉強した方法で2列、2行のエリアに3つのグラフを表示してみましたが、１箇所欠けてしまい、このままでは不恰好です。
それではこれをレイアウトしていきましょう。
左に1つ、右に２つ
まずは左側の列に1つのグラフ、右側の列に2つのグラフをプロットしてみましょう。
つまりこんな感じのプロットです。
このように複数のグラフを違うサイズでプロットする場合、「.set_subplot()」のオプションに「specs」を追加します。
そしてこの「specs」の書き方は二次元配列となります。
まず2行2列のプロットでの基本の書き方としてはこんな感じ。
specs=[[{},{}],[{}, {}]]「{}」の部分がグラフの位置で、この場所はグラフが配置されることを示しています。
そしてグラフが配置されない場所は「None」と表記します。
今回、左下（1列2行目）はグラフが配置されませんので、こうなります。
specs=[[{},{}],[None, {}]]そして次に左上（1行1列目）が縦に2行分のエリアを使用することを記述します。
その場合「{‘rowspan: 2’}」と記述します。
つまり「specs」の記述はこうなります。
specs=[[{'rowspan: 2’},{}],[None, {}]]あとは「add_trace()」での位置を間違えないように注意します。
左のグラフは1行1列目なので「fig.append_trace(graph1, row=1, col=1)」、右上のグラフは1行2列目なので「fig.append_trace(graph2, row=1, col=2)」、右下のグラフは2行2列目なので「fig.append_trace(graph3, row=2, col=2)」となります。
それでは試してみましょう。
import random
import plotly.graph_objects as go
data_points = 100
x1_val = [i for i in range(data_points)]
y1_val = [random.randrange(10) for _ in range(data_points)]
x2_val = [i for i in range(data_points)]
y2_val = [random.randrange(100) for _ in range(data_points)]
x3_val = [i for i in range(data_points)]
y3_val = [random.randrange(1000) for _ in range(data_points)]
graph1 = go.Scatter(x=x1_val,y=y1_val)
graph2 = go.Scatter(x=x2_val,y=y2_val)
graph3 = go.Scatter(x=x3_val,y=y3_val)
fig = go.Figure().set_subplots(rows=2, cols=2, specs=[[{'rowspan': 2},{}],[None, {}]])
fig.append_trace(graph1, row=1, col=1)
fig.append_trace(graph2, row=1, col=2)
fig.append_trace(graph3, row=2, col=2)
with open('./plotly11-2.txt', 'w') as f:
f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))
実行結果上に1つ、下に2つ
次に上に1つのグラフ、下に2つのグラフをプロットしてみましょう。
つまりこんな感じのグラフです。
基本的な考え方は先ほどの左に1つ、右に2つのグラフを同じです。
ただ今回は上の行が2列にまたがったグラフなので、「rowspan」の代わりに「colspan」を使います。
つまり「specs」の書き方としてはこんな感じになります。
import random
import plotly.graph_objects as go
data_points = 100
x1_val = [i for i in range(data_points)]
y1_val = [random.randrange(10) for _ in range(data_points)]
x2_val = [i for i in range(data_points)]
y2_val = [random.randrange(100) for _ in range(data_points)]
x3_val = [i for i in range(data_points)]
y3_val = [random.randrange(1000) for _ in range(data_points)]
graph1 = go.Scatter(x=x1_val,y=y1_val)
graph2 = go.Scatter(x=x2_val,y=y2_val)
graph3 = go.Scatter(x=x3_val,y=y3_val)
fig = go.Figure().set_subplots(rows=2, cols=2, specs=[[{'colspan': 2},None],[{}, {}]])
fig.append_trace(graph1, row=1, col=1)
fig.append_trace(graph2, row=2, col=1)
fig.append_trace(graph3, row=2, col=2)
with open('./plotly11-3.txt', 'w') as f:
f.write(fig.to_html(include_plotlyjs='cdn',full_html=False))
実行結果これで行、列ともに複数行、複数列にまたがったグラフをプロットできるようになりました。
さてこれでPlotlyに関しては基本的なことを学び、いろいろなことができるようになったと思います。
ということでとりあえず連載はここまでとして、また何かあれば随時記事をアップしていきたいと思います。
ではでは今回はこんな感じで。
コメント