Skip to content

Instantly share code, notes, and snippets.

@mattpap
Created May 4, 2016 12:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mattpap/eb15e406be17de249a8b7b6e30cf93ab to your computer and use it in GitHub Desktop.
Save mattpap/eb15e406be17de249a8b7b6e30cf93ab to your computer and use it in GitHub Desktop.
Show how to connect two bokeh plots with hover tool
import numpy as np
from bokeh.plotting import figure, hplot, show, output_file
from bokeh.models import HoverTool, CustomJS, ColumnDataSource
N = 20
x = np.random.random(size=N)
y = np.random.random(size=N)
p = figure(tools=["hover"], toolbar_location=None)
p.scatter(x, y, size=10)
img_x = np.linspace(0, 10, N)
img_y = np.linspace(0, 10, N)
images = []
for a, b in zip(x, y):
xx, yy = np.meshgrid(x, y)
d = np.sin(a*xx)*np.cos(b*yy)
images.append(d)
imgs_source = ColumnDataSource(data=dict(images=images))
img_source = ColumnDataSource(data=dict(image=[]))
img = figure(x_range=(0, 10), y_range=(0, 10), tools=[], toolbar_location=None)
img.image(image="image", x=0, y=0, dw=10, dh=10, source=img_source, palette="Greys7")
hover = p.select_one(HoverTool)
hover.callback = CustomJS(args=dict(imgs_source=imgs_source, img_source=img_source), code="""
var indices = cb_data.index['1d'].indices;
if (indices.length > 0) {
var img = imgs_source.data.images[indices[0]];
img_source.data = {image: [img]};
} else {
img_source.data = {image: []};
}
""")
hover.tooltips = None
output_file("linked_hover.html")
show(hplot(p, img))
@scott-trinkle
Copy link

This looks really useful for something I am trying to build, but I am having trouble getting this to run. hplot is deprecated and replaced with bokeh.layouts.row - changing that will get the plot to load, but the interactivity is not happening. Any ideas?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment