It’s often useful to link plots to add connected interactivity between plots. This section shows an easy way to do this, using the bokeh.plotting interface.
It’s often desired to link pan or zooming actions across many plots. All that is needed to enable this feature is to share range objects between figure() calls.
figure()
from bokeh.io import output_file, show from bokeh.layouts import gridplot from bokeh.plotting import figure output_file("panning.html") x = list(range(11)) y0 = x y1 = [10-xx for xx in x] y2 = [abs(xx-5) for xx in x] # create a new plot s1 = figure(plot_width=250, plot_height=250, title=None) s1.circle(x, y0, size=10, color="navy", alpha=0.5) # create a new plot and share both ranges s2 = figure(plot_width=250, plot_height=250, x_range=s1.x_range, y_range=s1.y_range, title=None) s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5) # create a new plot and share only one range s3 = figure(plot_width=250, plot_height=250, x_range=s1.x_range, title=None) s3.square(x, y2, size=10, color="olive", alpha=0.5) p = gridplot([[s1, s2, s3]], toolbar_location=None) # show the results show(p)
Now you have learned how to link panning between multiple plots with the bokeh.plotting interface.
Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers. This is all Bokeh needs to understand that selections acted on one glyph must pass to all other glyphs that share that same source. To see how linked selection extends to glyph renderers that plot only a subset of data from a data source, see Linked selection with filtered data.
The following code shows an example of linked brushing between circle glyphs on two different figure() calls.
from bokeh.io import output_file, show from bokeh.layouts import gridplot from bokeh.models import ColumnDataSource from bokeh.plotting import figure output_file("brushing.html") x = list(range(-20, 21)) y0 = [abs(xx) for xx in x] y1 = [xx**2 for xx in x] # create a column data source for the plots to share source = ColumnDataSource(data=dict(x=x, y0=y0, y1=y1)) TOOLS = "box_select,lasso_select,help" # create a new plot and add a renderer left = figure(tools=TOOLS, plot_width=300, plot_height=300, title=None) left.circle('x', 'y0', source=source) # create another new plot and add a renderer right = figure(tools=TOOLS, plot_width=300, plot_height=300, title=None) right.circle('x', 'y1', source=source) p = gridplot([[left, right]]) show(p)
It is also possible to link values of Bokeh model properties together so that they remain synchronized, using the js_link method. The example below links a circle glyph radius to the value of a Slider widget:
js_link
from bokeh.layouts import column from bokeh.models import Slider from bokeh.plotting import figure, show plot = figure(plot_width=400, plot_height=400) r = plot.circle([1,2,3,4,5,], [3,2,5,6,4], radius=0.2, alpha=0.5) slider = Slider(start=0.1, end=2, step=0.01, value=0.2) slider.js_link('value', r.glyph, 'radius') show(column(plot, slider))
The linking is accomplished in JavaScript, so this method works in standalone Bokeh documents, or in Bokeh server applications.
See Adding widgets for more information about different widgets, and JavaScript callbacks for more information about creating arbitrary JavaScript callbacks.