title: Bokeh: Changing points on map based on slider
body: <p>I am trying to expand my plotting skills and started playing with Bokeh.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>The code below is what I got so far, but the map plot does not want to update.</p>
  
  <pre><code>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 &lt; 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)
  </code></pre>
  
  <p>Any feedback is greatly appreciated!</p>