[python][bokeh] 別々のグラフを連携させる

bokeh01.py

"""
Bokehのサンプル
"""
from bokeh.models import ColumnDataSource, TapTool
from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.models.callbacks import CustomJS


def go():
    x = [1, 2, 3]
    y = [4, 5, 6]

    source = ColumnDataSource(data=dict(
        x=x,
        y=y,
        x2=[[10, 11, 12], [20, 21, 22], [30, 31, 32]],
        y2=[[13, 14, 15], [23, 24, 25], [33, 34, 35]],
        x3=[[100, 110, 120], [200, 210, 220], [300, 310, 320]],
        y3=[[130, 140, 150], [230, 240, 250], [330, 340, 350]],
    ))

    source2 = ColumnDataSource(data=dict(
        x=[],
        y=[]
    ))

    source3 = ColumnDataSource(data=dict(
        x=[],
        y=[]
    ))

    f = figure(
        plot_width=600,
        plot_height=300,
        tools='tap'
    )

    f2 = figure(
        plot_width=300,
        plot_height=300
    )

    f3 = figure(
        plot_width=300,
        plot_height=300
    )

    f.vbar(x='x', top='y', width=0.5, source=source)
    f2.vbar(x='x', top='y', width=0.5, source=source2)
    f3.vbar(x='x', top='y', width=0.5, source=source3)

    taptool = f.select(type=TapTool)
    taptool.callback = CustomJS(args=dict(source=source, source2=source2, source3=source3), code="""\
        // tapしたグラフのデータソースに対してselectedプロパティが設定される。
        // そのプロパティの中は 0d 1d 2d となっていて、1dを参照することでクリックされた場所の
        // データインデックスがわかる。
        var index = source.selected['1d'].indices[0];

        // クリックされた場所に対応するデータインデックスから
        // データソース上のデータを取得
        var x_val = source.data['x'][index];
        var y_val = source.data['y'][index];
        console.log('x=' + x_val + ', y=' + y_val);
        
        // 別のグラフに対して、このクリックに連動するデータソースを設定する
        source2.data['x'] = source.data['x2'][index];
        source2.data['y'] = source.data['y2'][index];

        source3.data['x'] = source.data['x3'][index];
        source3.data['y'] = source.data['y3'][index];

        // 変更を反映
        source2.change.emit();
        source3.change.emit();
    """)

    grid = gridplot([f], [f2, f3])

    show(grid)


if __name__ == '__main__':
    go()

参考URL

https://stackoverflow.com/questions/42495250/bokeh-callback-to-select-points-similar-to-user-selection

https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html