Bokeh dynamically changing BoxAnnotation
Question: Is there possible to update bokeh figure's renderes in IPython's interact
function. I have code which looks like:

    
    
    x = [0, 1, 2, 3, 4]
    y = [0, 1, 2, 3, 4]
    source = ColumnDataSource(data=dict(x=x, y=y)
    f = figure()
    f.line(x, y, source=source)
    show(f)
    
    def update_func(selected_data):
       source.data['y'] = ...
       source.push_notebook()
       <here I would like to add BoxAnnotation to figure f, and rerender it>
    
    interactive(update_func, selected_data=[0,1,2])
    


Answer: You could use CustomJS to insert some JavaScript code that will be used to
change the bottom and top values of the BoxAnnotation. I'm using the Slider
from Bokeh in this example:

    
    
    from bokeh.io import vform
    from bokeh.models import CustomJS, Slider
    from bokeh.plotting import figure, show
    from bokeh.models import BoxAnnotation
    
    plot = figure(plot_width=300, plot_height=300)
    plot.line([0,1],[0,1], line_width=3, line_alpha=0.6)
    
    box_l = BoxAnnotation(plot=plot, top=0.4, 
                          fill_alpha=0.1, fill_color='red')
    box_m = BoxAnnotation(plot=plot, bottom = 0.4,top=0.6, 
                          fill_alpha=0.1, fill_color='green')
    box_h = BoxAnnotation(plot=plot, bottom=0.6, 
                          fill_alpha=0.1, fill_color='red')
    plot.renderers.extend([box_l, box_m, box_h])
    
    callb_low = CustomJS(args=dict(box_l=box_l,box_m=box_m,plot=plot),
        code="""
            var level = cb_obj.get('value')
            box_l.set({"top":level})
            box_m.set({"bottom":level})
            plot.trigger('change');
        """)
    
    callb_high = CustomJS(args=dict(box_m=box_m,box_h=box_h,plot=plot),
        code="""
            var level = cb_obj.get('value')
            box_m.set({"top":level})
            box_h.set({"bottom":level})
            plot.trigger('change');
        """)
    
    slider1 = Slider(start=0.1, end=1, value=0.4, step=.01, title="low",
                     callback=callb_low)
    slider2 = Slider(start=0.1, end=1, value=0.6, step=.01, title="high",
                     callback=callb_high)
    layout = vform(slider1,slider2, plot)
    show(layout)
    

The output will look like: [![enter image description
here](http://i.stack.imgur.com/kCKVM.png)](http://i.stack.imgur.com/kCKVM.png)

Based on the suggestions by bigreddot, you can have the following done in
ipython notebooks:

    
    
    from bokeh.io import push_notebook
    from bokeh.plotting import figure, show
    from bokeh.models import BoxAnnotation
    from ipywidgets import interact
    
    p = figure(x_range=(0,1), y_range=(0,1),plot_width=300, plot_height=300)
    box_L = BoxAnnotation(plot=p, top=0.4, 
                          fill_alpha=0.1, fill_color='red')
    box_M = BoxAnnotation(plot=p, bottom = 0.4,top=0.6, 
                          fill_alpha=0.1, fill_color='green')
    box_H = BoxAnnotation(plot=p, bottom=0.6, 
                          fill_alpha=0.1, fill_color='red')
    p.renderers.extend([box_L, box_M, box_H])
    
    def update_func(thresh_L=0.4, thresh_H=0.6):
        box_L.top = box_M.bottom = thresh_L;
        box_M.top = box_H.bottom=thresh_H;
        p.renderers.extend([box_L, box_M, box_H])
        push_notebook()  # note, just a function, not a method on "source"
    
    show(p)
    

Then in a separate cell you start your sliders like:

    
    
    interact(update_func, thresh_L=(0, 1, 0.1),thresh_H=(0, 1, 0.1))
    

[![enter image description
here](http://i.stack.imgur.com/stre5.png)](http://i.stack.imgur.com/stre5.png)

