Link Plot Parameters in Javascript#
This guide addresses how to link Bokeh and HoloViews plot parameters in Javascript.
Prerequisites
The How to > Link Two Objects in Javascript guide demonstrates how to use the
.jslinkAPI to link parameters in Javascript.
The How to > Link Two Objects in Javascript guide demonstrated how to link simple static panes, but links are probably most useful when combined with dynamic objects like plots.
Link Bokeh plots#
The jslink API trivially allows us to link a parameter on a Panel widget to a Bokeh plot property. Here we create a Bokeh Figure with a simple sine curve. The jslink method allows us to pass any Bokeh model held by the Figure as the target, then link the widget value to some property on it. E.g. here we link a FloatSlider value to the line_width of the Line glyph:
import numpy as np
import panel as pn
from bokeh.plotting import figure
pn.extension()
p = figure(width=300, height=300)
xs = np.linspace(0, 10)
r = p.line(xs, np.sin(xs))
width_slider = pn.widgets.FloatSlider(name='Line Width', start=0.1, end=10)
width_slider.jslink(r.glyph, value='line_width')
pn.Column(width_slider, p)
Link HoloViews plots#
Bokeh models allow us to directly access the underlying models and properties, but this access is more indirect when working with HoloViews objects. HoloViews makes various models available directly in the namespace so that they can be accessed for linking:
cds: The bokehColumnDataSourcemodel which holds the data used to render the plotglyph: The bokehGlyphdefining the style of the elementglyph_renderer: The BokehGlyphRendererresponsible for rendering the elementplot: The bokehFigurexaxis/yaxis: The Axis models of the plotx_range/y_range: The x/y-axisRange1dmodels defining the axis ranges
All these are made available in the JS code’s namespace if we decide to provide a JS code snippet, but can also be referenced in the property mapping. We can map the widget value to a property on the glyph by providing a specification separated by periods. E.g. in this case we can map the value to the glyph.size:
import holoviews as hv
import holoviews.plotting.bokeh
colors = ["black", "red", "blue", "green", "gray"]
size_widget = pn.widgets.FloatSlider(value=8, start=3, end=20, name='Size')
color_widget = pn.widgets.Select(name='Color', options=colors, value='black')
points = hv.Points(np.random.rand(10, 2)).options(padding=0.1, line_color='black')
size_widget.jslink(points, value='glyph.size')
color_widget.jslink(points, value='glyph.fill_color')
pn.Row(points, pn.Column(size_widget, color_widget))
Of course, if you need to transform between the displayed widget value and the value to be used on the underlying Bokeh property, you can add custom JS code as shown in the guide on JS-callbacks. Together these linking options should allow you to express whatever interactions you wish between your Panel objects.
