Bokeh: Changing points on map based on slider

I am trying to expand my plotting skills and started playing with Bokeh.

Now I want to do something, that in my head seems very simple, but I can not seem to figure out how to do it.

I have three timed events each with three points. Now i want to show different points corresponding to the time chosen with the slider, on a map.

The code below is what I got so far, but the map plot does not want to update.

import pandas as pd

from bokeh.io import show, output_notebook
from bokeh.models import ColumnDataSource, HoverTool, LinearColorMapper
from bokeh.tile_providers import CARTODBPOSITRON
from bokeh.plotting import figure, show
from bokeh.layouts import column, widgetbox
from bokeh.models import CustomJS, Slider

TOOLS = "pan,wheel_zoom,reset,save"

points = pd.DataFrame(data = 'x': [1, 2, 3, 1, 2, 3, 1, 2, 3],
'y': [4, 5, 6, 5, 6, 4, 6, 4, 5],
'time': [1, 1, 1, 2, 2, 2, 3, 3, 3])

visible_points = points[(points['time'] == 1)]

source_visible = ColumnDataSource(data=dict(x=visible_points['x'], y=visible_points['y'], time=visible_points['time']))
source_available = ColumnDataSource(data=dict(x=points['x'], y=points['y'], time=points['time']))

mapplot = figure(title="Slider Test Plot", tools=TOOLS, width=950, height=650)
mapplot.add_tile(CARTODBPOSITRON)
mapplot.circle(x="x", y="y", size=15, fill_color="blue", fill_alpha=0.2, source=source_visible)

slider = Slider(title='Time',
value=1,
start=1,
end=3,
step=1)

slider.callback = CustomJS(args=dict(source_visible = source_visible, source_available = source_available), code="""
var time_val = cb_obj.value;
// Get the data from the data sources
var point_visible = source_visible.data;
var point_available = source_available.data;
// Update the visible data
for(var i = 0; i < point_available.length; i++)
if (point_available['time'][i] == time_val)
point_visible.x = point_available['x'][i];
point_visible.y = point_available['y'][i];


source_visible.change.emit();
""")


layout = column(mapplot, slider)

show(layout)


Any feedback is greatly appreciated!

2 Answers
2

I think it's because you misspelled point_available.lenght...

point_available.lenght

After some hours I finally managed to fix the slider.
The following callback makes it work:

slider.callback = CustomJS(args=dict(source_visible = source_visible, source_available = source_available), code="""
var time_val = cb_obj.value;
// Get the data from the data sources
var point_visible = source_visible.data;
var point_available = source_available.data;

point_visible.x =
point_visible.y =

// Update the visible data
for(var i = 0; i < point_available.x.length; i++)
if (point_available.time[i] == time_val)
point_visible.x.push(point_available.x[i]);
point_visible.y.push(point_available.y[i]);


source_visible.change.emit();
""")


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.