ボケ-レイアウト

ボケの視覚化は、さまざまなレイアウトオプションで適切に配置できます。これらのレイアウトとサイズ変更モードにより、ブラウザーウィンドウのサイズに応じてプロットとウィジェットのサイズが自動的に変更されます。一貫した外観を実現するには、レイアウト内のすべてのアイテムが同じサイズ設定モードである必要があります。ウィジェット（ボタン、メニューなど）は、プロット図ではなく、別個のウィジェットボックスに保持されます。

レイアウトの最初のタイプは、縦棒グラフで縦棒グラフを表示する列レイアウトです。 * column（）関数*は bokeh.layouts モジュールで定義されており、次のシグネチャを取ります-

from bokeh.layouts import column
col = column(children, sizing_mode)

子供-プロットおよび/またはウィジェットのリスト。

*sizing_mode* -レイアウト内のアイテムのサイズ変更方法を決定します。 可能な値は、「fixed」、「stretch_both」、「scale_width」、「scale_height」、「scale_both」です。 デフォルトは「固定」です。

次のコードは、2つのボケ図形を生成し、縦に表示されるように列レイアウトに配置します。各図には、xとyのデータ系列間の正弦と余弦の関係を表す線記号が表示されます。

from bokeh.plotting import figure, output_file, show
from bokeh.layouts import column
import numpy as np
import math
x = np.arange(0, math.pi*2, 0.05)
y1 = np.sin(x)
y2 = np.cos(x)
fig1 = figure(plot_width = 200, plot_height = 200)
fig1.line(x, y1,line_width = 2, line_color = 'blue')
fig2 = figure(plot_width = 200, plot_height = 200)
fig2.line(x, y2,line_width = 2, line_color = 'red')
c = column(children = [fig1, fig2], sizing_mode = 'stretch_both')
show(c)

出力

サイズ変更モード

同様に、行レイアウトは、bokeh.layoutsモジュールで定義されている* row（）関数*が使用されるプロットを水平に配置します。ご想像のとおり、これには2つの引数（* column（）関数*と同様）、childrenとsizing_modeも必要です。

上の図に垂直に示されている正弦曲線と余弦曲線は、次のコードで行レイアウトで水平に表示されます

from bokeh.plotting import figure, output_file, show
from bokeh.layouts import row
import numpy as np
import math
x = np.arange(0, math.pi*2, 0.05)
y1 = np.sin(x)
y2 = np.cos(x)
fig1 = figure(plot_width = 200, plot_height = 200)
fig1.line(x, y1,line_width = 2, line_color = 'blue')
fig2 = figure(plot_width = 200, plot_height = 200)
fig2.line(x, y2,line_width = 2, line_color = 'red')
r = row(children = [fig1, fig2], sizing_mode = 'stretch_both')
show(r)

出力

レイアウトアレンジ

Bokehパッケージにはグリッドレイアウトもあります。行と列の2次元グリッドに複数のプロット図（およびウィジェット）を保持します。 bokeh.layoutsモジュールの* gridplot（）関数*は、グリッドと、toolbar_locationプロパティを使用して配置できる単一の統合ツールバーを返します。

これは、各プロットが独自のツールバーを表示する行または列のレイアウトとは異なります。 grid（）関数も、childrenとsizing_modeパラメータを使用します。childrenはリストのリストです。各サブリストが同じディメンションであることを確認してください。

次のコードでは、xおよびyデータ系列間の4つの異なる関係が2行2列のグリッドにプロットされています。

from bokeh.plotting import figure, output_file, show
from bokeh.layouts import gridplot
import math
x = list(range(1,11))

y1 = x
y2 =[11-i for i in x]
y3 = [i*i for i in x]
y4 = [math.log10(i) for i in x]

fig1 = figure(plot_width = 200, plot_height = 200)
fig1.line(x, y1,line_width = 2, line_color = 'blue')
fig2 = figure(plot_width = 200, plot_height = 200)
fig2.circle(x, y2,size = 10, color = 'green')
fig3 = figure(plot_width = 200, plot_height = 200)
fig3.circle(x,y3, size = 10, color = 'grey')
fig4 = figure(plot_width = 200, plot_height = 200, y_axis_type = 'log')
fig4.line(x,y4, line_width = 2, line_color = 'red')
grid = gridplot(children = [[fig1, fig2], [fig3,fig4]], sizing_mode = 'stretch_both')
show(grid)

出力

plotted

Bokeh-layouts

ボケ-レイアウト

出力

出力

出力

目次