Add glyphs to a bokeh plot after it is rendered in the Jupyter Notebook

Question

I'm trying to create a dashboard in the Jupyter Notebook with an interactive bokeh plot and ipywidgets as widgets for controlling the plot. My use-case is a little bit complicated because I want to create a plot with different markers that designate different groups in the scatter plot, and I want to enable the user to change the division of the groups (thus changing the markers displayed in the plot).

I've considered two different approaches:

1. Use the chart API of bokeh to generate the scatter plot with the different markers. Unless I'm mistaken, this will not allow me to update the plot, rather I will have to recreate it with every change coming from the user.

2. Create the plot myself using the bokeh.plotting API. For this I will have to segment the data into groups myself and update the coordinates of the data myself for each group of markers separately.

I've started experimenting with the second option since I want to try to update the plot myself instead of re-creating it. I created a simple example, which already presents some problems for me. Here is the code:

p = figure()
s = widgets.Dropdown(options=['circle', 'square'])

x = np.random.normal(size=10)
y = np.random.normal(size=10)

data = ColumnDataSource(dict(x=x, y=y))

r = p.scatter(source=data, x='x', y='y', size=14)

def select_value(change):
    renderers = [x for x in p.renderers if x.__view_model__ == "GlyphRenderer"]
    for r in renderers:
        p.renderers.remove(r)
    if change['new'] == 'circle':
        r = p.circle(x, y, size=14)
    else:
        r = p.square(x, y, size=14)
    push_notebook()


s.observe(select_value, 'value')
display(s)
show(p, notebook_handle=True)

This code block already doesn't really work. When I select a 'square' from the widget, the circles are removed, but only one square is added in the middle of the plot, rather than in the previous positions of the circles. I tried using the p.add_glyph function which yielded the same results, as well as making sure the data source is the same for the square as it is for the circles (it is).

Any help would be greatly appreciated! Cheers, Omri

Answer 1

First, I couldn't make widgets.Dropdown to work with options, I used bokeh.models.widgets.Select. It might be a bokeh version, I'm using 0.12.4 version. Second, in the select_value update function I add glyphs, use bokeh.io.push_notebook(), then remove the original renderers, and again bokeh.io.push_notebook()

In one of the cells I have:

import bokeh
import bokeh.plotting
import numpy as np
from ipywidgets import interact
bokeh.io.output_notebook()

p = bokeh.plotting.figure()
s = bokeh.models.widgets.Select(options=['circle', 'square'])

x = np.random.normal(size=10)
y = np.random.normal(size=10)

source = bokeh.models.ColumnDataSource(dict(x=x, y=y))

scatter_plot = p.scatter(source=source, x='x', y='y',color="blue",marker="circle", size=14)

def select_value(change):
    renderers = [x for x in p.renderers if x.__view_model__ == "GlyphRenderer"]
    for r in renderers:
        if change == 'circle':
            myglyph = bokeh.models.Circle(x="x",y="y",fill_color="blue", line_color="blue",size=14)
        elif change == 'square':
            myglyph = bokeh.models.Square(x="x",y="y",fill_color="blue", line_color="blue",size=14)
        r.glyph = myglyph
        p.add_glyph(source,myglyph)
        bokeh.io.push_notebook()
        p.renderers.remove(r)
        bokeh.io.push_notebook()

bokeh.io.show(p, notebook_handle=True)

which creates the figure:

And in another cell I have:

interact(select_value,change=['circle', 'square']);

which creates the interactive tool:

UPDATE

An alternative is to play with the visible parameter. You create all the marker types you want, and then you make your choice visible while the others not:

import bokeh
import bokeh.plotting
import numpy as np
from ipywidgets import interact
bokeh.io.output_notebook()

p = bokeh.plotting.figure()
s = bokeh.models.widgets.Select(options=['circle', 'square'])

x = np.random.normal(size=10)
y = np.random.normal(size=10)

source = bokeh.models.ColumnDataSource(dict(x=x, y=y))

scatter_circle = p.scatter(source=source, x='x', y='y',color="blue", marker='circle', size=14)
scatter_square = p.scatter(source=source, x='x', y='y',color="blue", marker='square', size=14)
scatter_square.visible=False
handle = bokeh.io.show(p, notebook_handle=True)

def select_value(change):
    if change == 'circle':
        scatter_circle.visible=True
        scatter_square.visible=False
    elif change == 'square':
        scatter_square.visible=True
        scatter_circle.visible=False

    bokeh.io.push_notebook(handle=handle)