'Bokeh: implementing custom javascript in an image plot
I am trying to combine these two examples in Bokeh:
http://docs.bokeh.org/en/latest/docs/gallery/image.html http://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-widgets
The idea seems simple. I want to plot the image shown in the first link and then vary the frequency of the sine function using an interactive slider:
import numpy as np
from bokeh.plotting import figure, show, output_file
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.io import vform
N = 10
x = np.linspace(0, 10, N)
y = np.linspace(0, 10, N)
xx, yy = np.meshgrid(x, y)
d = np.sin(xx)*np.cos(yy)
output_file("image.html", title="image.py example")
source = ColumnDataSource(data={'d': d, 'x': x, 'y': y})
p = figure(x_range=[0, 10], y_range=[0, 10])
p.image([source.data['d']], x=[0], y=[0], dw=[10], dh=[10], palette="Spectral11")
callback = CustomJS(args=dict(source=source), code="""
var data = source.get('data');
var f = cb_obj.get('value')
x = data['x']
y = data['y']
d = data['d']
for (i = 0; i < x.length; i++) {
for (i = 0; i < x.length; i++){
d[i][j] = Math.sin(f*x[i])*Math.cos(y[j])
}
source.trigger('change');
""")
slider = Slider(start=0.1, end=4, value=1, step=.1, title="angular frequency", callback=callback)
layout = vform(slider, p)
show(layout)
The chart plots right, but the image never updates. The problem almost certainly exists how I am plotting the image:
p.image([source.data['d']], x=[0], y=[0], dw=[10], dh=[10], palette="Spectral11")
I don't think that's how you properly attach a plot to a source object. I am just passing in an array, which explains why the plot isn't updating when source changes, but I am not sure what the correct method is for the image function. If I change the statement to:
p.image(['d'], x=[0], y=[0], dw=[10], dh=[10], source=source, palette="Spectral11")
It won't plot correctly. I am not sure if this is just a syntax problem or a deeper issue. Any pointers would be appreciated. Thanks in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
