We Keep Coding

Is there a way to add a new axis to a bokeh graph after it is already being displayed?

I'm trying to update a figure that is being run on a bokeh server. I found out that you can use figure.extra_y_ranges = {'name':Range1d(0,10)} and then calling figure.add_layout(LinearAxis(y_range_name='name'),'right') to add a new y-axis with the range of 0-10 to my figure. However this only works for me if I do it right after initiating the figure. What I'm trying to do however is that the new y-axis is being added on a button click.
Here is a simplified version of the code I'm running:
from bokeh.io import curdoc
from bokeh.plotting import figure
from bokeh.models import LinearAxis, Range1d
from bokeh.models.widgets import Button
from bokeh.layouts import column, row, grid
def update_fig(fig):
fig.extra_y_ranges = {'a':Range1d(0,10)}
fig.add_layout(LinearAxis(y_range_name='a', axis_label='a'), 'left')
def update_axis():
update_fig(fig)
fig = figure()
fig.circle_dot([1,2,3,4],[1,2,3,4])
update_fig(fig) # This works
value_sel = Button(label='Add y-axis')
value_sel.on_click(update_axis) # This doesn't work
layout = row(
column(value_sel),
grid(fig)
)
curdoc().add_root(layout)
I'm then running the function with bokeh serve --show example.py
I'd appreciate any help, thanks!

I am now using a workaround where I remove the figure from the layout, then add the second y axis and then add the figure back to the layout incase anyone is having the same problem.
A better version that was suggested to me is setting the different y axes and the start and then activating/deactivating their visibility

IPython interactive widget is not updating plotly when downloaded as html

I'm using Jupyter Notebook and trying to create an interactive plot. I really like how simple the ipywidgets.interactive is to use and having the ability to lay things out in VBox or HBox. The problem I'm having is once I download as html the ipywidgets.interactive is not updating my plot.
Here is what I have:
from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets
import plotly.graph_objs as go
import plotly.offline as py
import numpy as np
from IPython.display import display
py.init_notebook_mode()
xs = np.linspace(0,6,100)
ys = np.sin(xs)
scatter = go.Scatter(
x = xs,
y = ys
)
data = [scatter]
layout = go.Layout(title='test')
fig = go.FigureWidget(data=data, layout=layout)
slider = widgets.FloatRangeSlider(
min=1,
max=6,
step=.1,
description='desc'
)
def update_b(b):
fig.data[0].y = np.sin(xs+b)
vb = widgets.VBox((fig, interactive(update_b, b=(1, 6, .1))))
vb.layout.align_items='center'
# This displays it and allows it to be interactive, but only when I have it as .ipynb,
# not when I download as html
display(vb)
The way I am saving as html is:
1. Widgets > Save Notebook Widget State
2. From cmd: jupyter nbconvert --to html test_plot.ipynb
I have also done the following to enable the widget extension:
jupyter nbextension enable --py widgetsnbextension
Enabling notebook extension jupyter-js-widgets/extension...
- Validating: ok
After everything this is what I get:
The thing is the slider is movable but it does not update the graph. The graph is also able to be manipulated through zoom, etc. like normal with plotly. This leads me to believe there is something wrong with the way I've used interactive.
Any ideas?

Unfortunately this does not work this way, the function that links the slider with the plot is written in python and executes in the python kernel, so when you convert to a static html this function does not exist anymore.
I am not aware of some kind of python to javascript translator that allows these kind of functions to run without a python kernel, although plotly's Dash seems to be doing something in this line (see this issue). If you can put up a server you can use Voila or something similar to make the notebook look like a web page.

I'm not using plotly, however, try adding some line magic, like "widget" which makes the graph interactive...
%matplotlib widget
%matplotlib widget
from ipywidgets import *
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0, 2 * np.pi)
fig = plt.figure()
ax = fig.add_subplot(1, 1, 1)
line, = ax.plot(x, np.sin(x))
def update(w = 1.0):
line.set_ydata(np.sin(w * x))
fig.canvas.draw()
interact(update);
screenshot of notebook

Bokeh | Jupyter Notebook | Python | Plot Not Showing

I've spent the last few weeks learning the Bokeh package (which for visualizations, is excellent in my opinion).
Unfortunately, I have come across a problem that I can't for the life of me, figure out how to solve.
The below two links have been helpful, but I can't seem to replicate for my problem.
Using bokeh to plot interactive pie chart in Jupyter/Python - refer to answer #3
https://github.com/bokeh/bokeh/blob/0.12.9/examples/howto/notebook_comms/Jupyter%20Interactors.ipynb
The below code (in Jupyter) displays the graph correctly and displays the slider correctly, but I'm unsure how to connect the two as when I move the slider, the graph remains static.
I am using Python 3.6 and Bokeh 12.9
N = 300
source = ColumnDataSource(data={'x':random(N), 'y':random(N)})
plot = figure(plot_width=950, plot_height=400)
plot.circle(x='x', y='y', source=source)
callback = CustomJS(code="""
if (IPython.notebook.kernel !== undefined) {
var kernel = IPython.notebook.kernel;
cmd = "update_plot(" + cb_obj.value + ")";
kernel.execute(cmd, {}, {})};
""")
slider = Slider(start=100, end=1000, value=N, step=10, callback=callback)
def callback(attr, old, new):
N = slider.value
source.data={'x':random(N), 'y':random(N)}
slider.on_change('value', callback)
layout = column(slider, plot)
curdoc().add_root(layout)
show(widgetbox(slider, width = 300))
show(plot)
After reading the bokeh documentation and reading a view threads on GitHub, the 'callback' function is a little unclear for me as I'm not entirely sure what to parse to it (if in fact attr, old, new need certain elements parsed too it)
Any help would be greatly appreciated
Hopefully, I haven't missed anything glaringly obvious.
Kind Regards,
Adrian

You are currently mixing different ways for interactivity but unfortunately you always miss something for each different way.
The slider you use is from bokeh, but unfortunately it looks like slider.on_change only works if you run through the bokeh server. From the documentation:
Use bokeh serve to start the Bokeh server and set up event handlers with .on_change (or for some widgets, .on_click).
I couldn't really find that much on running jupyter notebook and bokeh server, but this issue seems to discuss that possibility. It also mentions bokeh.application but I've never used that, so no idea how that works.
You also use additionally a custom js callback, which calls into the jupyter kernel and tries to execute update_plot(value), but you never defined such a function, so it does nothing.
Then you need a method to push the data to the output. I guess bokeh server can somehow do that nativly, for jupyter notebooks without the bokeh server push_notebook seems to be the solution. Note that you need show(..., notebook_handle=True) to be able to push.
Solution 1 use the bokeh server
Sliders and others widgets automatically sync their state back to python, so you can use slider.on_change. You don't need the CustomJS. Data flow should look as following:
python script -> bokeh server -> html -> userinput -> bokeh server -> python callbacks -> bokeh server updates plots
Solution 2 use bokeh sliders but sync via CustomJS
If you don't want to run a seperate process you can use the jupyter kernel to execute code in your python notebook. Dataflow:
jupyter notebook -> html -> user input -> customjs -> jupyter kernel -> python callbacks -> push_notebook to update plots
output_notebook()
N = 300
source = ColumnDataSource(data={'x':random(N), 'y':random(N)})
plot = figure(plot_width=950, plot_height=400)
plot.circle(x='x', y='y', source=source)
callback = CustomJS(code="""
if (IPython.notebook.kernel !== undefined) {
var kernel = IPython.notebook.kernel;
cmd = "update_plot(" + cb_obj.value + ")";
kernel.execute(cmd, {}, {})};
""")
slider = Slider(start=100, end=1000, value=N, step=10, callback=callback)
# must have the same name as the function that the CustomJS tries to call
def update_plot(N):
source.data={'x':random(N), 'y':random(N)}
# push notebooks to update plots
push_notebook()
layout = column(slider, plot)
# notebook_handle must be true, otherwise push_notebook will not work
h1 = show(layout, notebook_handle=True)
Solution 3 use ipywidgets
If you are not married to the bokeh widgets you can use the ipywidgets which are designed for interactivity in the jupyter notebook. The data flow is as following:
jupyter notebook -> html -> user input -> ipywidgets sync automatically -> python callbacks -> push_notebook
I use here interact but the other widgets should work as expected.
from ipywidgets import interact
output_notebook()
N = 300
source = ColumnDataSource(data={'x':random(N), 'y':random(N)})
plot = figure(plot_width=950, plot_height=400)
plot.circle(x='x', y='y', source=source)
def update_plot(v):
N = v
print(N)
source.data={'x':random(N), 'y':random(N)}
# push changed plots to the frontend
push_notebook()
# notebook_handle must be true so that push_notebook works
show(plot, notebook_handle=True)
Note that you need to install ipywidgets properly, which inlcudes calling jupyter nbextension enable --py --sys-prefix widgetsnbextension if you are not using conda. For details see the documentation

I suppose your question relates to the server although you have both a CustomJS and a server callback.
I am not familiar with the previous way of doing bokeh server in notebook (push_notebook).
The new way would be like this: you wrap your code in a function taking one parameter (a document) and your call to add_layout is made on that document. Then you build an app with that function and show it.
This gives:
from bokeh.models import ColumnDataSource, Slider
from bokeh.layouts import column
from bokeh.plotting import figure, show, output_notebook
from numpy.random import random
from bokeh.application import Application
from bokeh.application.handlers import FunctionHandler
output_notebook()
def modify_doc(doc):
N = 300
source = ColumnDataSource(data={'x':random(N), 'y':random(N)})
plot = figure(plot_width=950, plot_height=400)
plot.circle(x='x', y='y', source=source)
slider = Slider(start=100, end=1000, value=N, step=10)
def callback(attr, old, new):
N = new # but slider.value would also work
source.data={'x': random(N), 'y': random(N)}
slider.on_change('value', callback)
layout = column(slider, plot)
doc.add_root(layout)
app = Application(FunctionHandler(modify_doc))
show(app, notebook_url="localhost:8888")

Streaming an in HTML embedded bokeh plot

I am trying to embed a streaming bokeh plot into an HTML file using the autoload_server function:
from bokeh.client import push_session
from bokeh.embed import autoload_server
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, curdoc
data = dict(x=[], y=[])
source = ColumnDataSource(data)
plot = figure()
plot.circle(source=source, x='x', y='y')
counter = -1
def update_data():
global xDate, yWind, counter
counter += 1
xDate = counter
yWind = counter
new_data_wind = dict(x=[xDate], y=[yWind])
source.stream(new_data_wind, 300)
curdoc().add_root(plot)
curdoc().add_periodic_callback(update_data, 300)
session = push_session(curdoc())
script = autoload_server(plot, session_id=session.id)
print(script)
I basically start a bokeh server by using: "bokeh serve" and then run the code and insert the given script into an HTML file.
At first, no plot would be displayed, but after adding --allow-websocket-origin=localhost:63342 to the bokeh serve command, the page would show the plot grid, but no data is displayed.
Does someone have an idea as to why the data streaming function doesn't seem to work or what I can change to make the embedded plot stream the data?
I'm thankful for any further input, since I have yet to find some on the Internet.
EDIT
I've found the solution to my problem and will leave it here if anyone encounters something similar:
The code fragment:
session.loop_until_closed()
needs to be added to the end of the example above, so the session is looped and the final plot gets updated inside the browser.

I'll just post my answer as seen above, so this won't show up as unanswered question anymore:
The code fragment:
session.loop_until_closed()
needs to be added to the end of the example above, so the session is looped and the final plot gets updated inside the browser.

Interactive slider to vary slice used in Bokeh image plot

I'm interested in using Bokeh to put images inside IPython notebooks. In particular a datatype I often interact with is a multidimensional NumPy array with 3 or more dimensions. Take the example of a 3-dimensional array. An oft-encountered example is RGB images. The three dimensions are x, y, and color
I'm interested in using Bokeh to plot a single image channel in an IPython notebook. I'd like to provide an interactive slider that allows the user of the IPython notebook to click through each index of the 3rd dimension, in this example, color.
My code below (when run in an IPython notebook) successfully shows the plot of the first color channel. But I can't figure out what is causing the error in my call to interact. Do I have my ColumnDataSource defined correctly and referenced correctly in the Bokeh plot construction?
# imports
import numpy as np
from scipy.misc import imread
from bokeh.plotting import figure, show
from bokeh.io import output_notebook
from bokeh.models import ColumnDataSource
from bokeh.palettes import Greys9
from IPython.html.widgets import interact
# enable Bokeh to plot to the notebook
output_notebook()
# Make the Bokeh plot of the "first" layer of the 3D data
## This part works
TOOLS="pan, box_zoom, reset, save"
# The image from https://windycitizensports.files.wordpress.com/2011/10/baboon.jpg?w=595
RGB_image = imread('/Users/curt/Downloads/BaboonRGB.jpg')
nx, ny, n_colors = RGB_image.shape
source = ColumnDataSource(data={'image': RGB_image[:, :, 0]})
p = figure(title="ColorChannel",
tools=TOOLS,
x_range=[0, nx],
y_range=[0, ny],
)
p.image([source.data['image'][::-1, :]-1],
x=0,
y=0,
dh=[ny],
dw=[nx],
palette=Greys9,
source=source,
)
show(p)
# try to add interactive slider
## This part does not work & gives a JavaScript error
def update(idx=0):
global RGB_image
source.data['image'] = RGB_image[:, :, idx]
source.push_notebook()
interact(update, idx=(0, 2))
The Javascript error is:
Javascript error adding output!
TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided float value is non-finite.
See your browser Javascript console for more details.
I'm not sure how this can be. I tried coercing RGB_Image to a float by doing RGB_Image = RGB_Image.astype(float) immediately after defining it but I got the same error.

In essence, the data format is not consistent between your predefined image and what you are trying to update.
A workaround which does work:
def update(idx=0):
global RGB_image
source.data['image'] = RGB_image[:, :, idx]
p.image([source.data['image'][::-1, :]-1],
x=0,
y=0,
dh=[ny],
dw=[nx],
palette=Greys9,
source=source,
)
show(p)
interact(update, idx=(0, 2))
I'll acknowledge that defining the image over and over again is not the preferred way of doing this, but it should at least give you a handle as to where to look.