bokeh: グリッドレイアウトでグラフの幅が異なる場合の表示を確認した

環境

• Python 3.12.1
• bokeh 3.4.1

確認したいこと

3つのグラフをグリッドレイアウトで表示したいです。

グラフs1,s2,s3を、以下のように2行2列のグリッドで表示します。

s1,s2
s3,empty

ただしs1とs3の幅は異なります。このとき、グリッドレイアウトがどう表示されるかを以下の点を変えて確認しました。

• bokeh.layouts.gridか[bokeh.layouts.gridlayout]か(https://docs.bokeh.org/en/latest/docs/reference/layouts.html#gridplot)
• 2行目を[s3, None]と指定するか、[s3]と指定するか

Pythonスクリプト

散布図s1,s2の幅は200pxです。散布図s3だけ幅は300pxです。

sample.py

from bokeh.layouts import gridplot, grid, layout, column
from bokeh.plotting import figure, show, save, output_file, reset_output
from bokeh.models.widgets.markups import Div


def create_scatters() -> tuple[figure, figure, figure]:
    x = list(range(11))
    y = x

    s1 = figure(background_fill_color="#fafafa", width=200, height=200)
    s1.scatter(x, y)

    s2 = figure(background_fill_color="#fafafa", width=200, height=200)
    s2.scatter(x, y)

    s3 = figure(background_fill_color="#fafafa", width=300, height=200)
    s3.scatter(x, y)

    return s1, s2, s3


# bokeh.layouts.grid
s1, s2, s3 = create_scatters()
output_file("grid-1.html")
save(grid([[s1, s2], [s3, None]]))


s1, s2, s3 = create_scatters()
output_file("grid-2.html")
save(grid([[s1, s2], [s3]]))


# bokeh.layouts.gridplot
s1, s2, s3 = create_scatters()
output_file("gridplot-1.html")
save(gridplot([[s1, s2], [s3, None]]))


s1, s2, s3 = create_scatters()
output_file("gridplot-2.html")
save(gridplot([[s1, s2], [s3]]))

結果

bokeh.layouts.gridで出力する

grid-1.html

save(grid([[s1, s2], [s3, None]]))

s1とs2の間に隙間ができました。

grid-2.html

save(grid([[s1, s2], [s3]]))

s1とs2の間に隙間はできませんでした。

bokeh.layouts.gridplotで出力する

gridplot-1.html

save(gridplot([[s1, s2], [s3, None]]))

s1とs2の間に隙間ができました。

gridplot-2.html

save(gridplot([[s1, s2], [s3]]))

s1とs2の間に隙間ができました。

隙間が生まれるときと生まれないときでCSSはどう異なるのか

grid([[s1, s2], [s3, None]])を指定したときだけ、s1とs2の間に隙間ができませんでした。
隙間ができるときとできないときで、HTML/CSSがどう違うのかを確認しました。

grid-1.htmlでは、s3に相当する<div class="bk-Figure" />のスタイルは以下のようになっていました。

grid-row-start: 2;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: span 1;

一方grid-2.htmlでは、s3に相当するdiv要素のスタイルは以下のようになっていました。

grid-row-start: 2;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: span 2;

grid-column-endの違いによって、隙間ができる/できないが変わることが分かりました。