Sliders not showing in figure

[Enrrod]

Hi everyone,

I’ve been following the Bokeh tutorials and tried something similar to the “Sliders example”. Both in my own code and executing the example the figure shows up without the sliders. I haven’t been able to find anything in google about this issue. What could be happening for the sliders to not show without any error message?

My code is the following:

output_file('testUMAPslider.html')
#Load the datframe
df = pd.read_pickle('testRpDF.pkl')
freq = np.load('testSynth_freq.npy')

#Define the function to select scatter data for each n_neighbors value
def make_dataset(df, n=10):
	#Extract the subset of the points with n_neighbors = n
	subset = df[df['n_neighbors'] == n]
	return ColumnDataSource(subset)


def make_plot(src, colorLabel):
	col = ["#%02x%02x%02x" % (int(r), int(g), int(b)) for r, g, b, _ in 255*cm.coolwarm(colors.Normalize()(colorLabel))]
	p = figure(plot_width = 700, plot_height = 700, 
              title = 'UMAP projection of synthetic ripples')
	p.scatter(src.data['x'], src.data['y'], radius=0.05, fill_color=col, fill_alpha=0.6, line_color=None)
	return p


def update(attr, old, new):
    new_src = make_dataset(df, neigh_select.value)
    src.data = new_src.data


neigh_select = Slider(start = 10, end = 30, 
                     step = 10, value = 10,
                     title = 'n_neighbors')
neigh_select.on_change('value', update)

# Find the initially selected n_neighbors
initial_neighbors = neigh_select.value

src = make_dataset(df, initial_neighbors)

p = make_plot(src, freq)

# Put controls in a single element
inputs = column(neigh_select)


# Add it to the current document (displays plot)
curdoc().add_root(row(inputs, p, width=500))
curdoc().title = "Sliders"

[_jm]

Hi @Enrrod

I was able to get your code to display the slider by adding the required imports for pandas, numpy, and the bokeh models, layouts, etc. that you use.

The posted code only has one control (slider) and it shows up to the left of the plot as expected with the layout you provided.

What version of bokeh are you using?

Also, note there are a few things you’ll probably want to change for proper operation. The following caught my eye.

1. In the make_plot() function, you have:

p.scatter(src.data['x'], src.data['y'], radius=0.05, fill_color=col, fill_alpha=0.6, line_color=None)

which will render a scatter plot using the source data numerical values only. As such changes to the source via the slider will have no effect.

What you want is the following, I believe:

p.scatter('x', 'y', source=src, radius=0.05, fill_color=col, fill_alpha=0.6, line_color=None)

Note that the (x,y) coordinates of the points are specified via the column names and the source is explicitly provided.

2. Pay attention to warning/error messages on the console, if any, about how you’re updating the data source in the update function. I saw some errors when I was trying to run your code, and made some changes locally to get it to work. I don’t remember what I did b/c I did not save my local test code.

3. In your update() function, you have:

new_src = make_dataset(df, neigh_select.value)

You should probably use new rather than neigh_select.value in the call to make_dataset(). new` is the updated value of the slider

I hope this helps.

[Enrrod]

Hi,

First of all, thanks for your detailed answer. I’ve just tried everything you said. And the same is happening:

Bokeh version: 2.0.1
No warnings in the terminal after execution. When I execute show, to show the document, the scatter plot shows in the upper left of the browser’s window, but the slider is not showing. As there are no warnings or error messages I’m unable to know what is happening.

EDIT: I’ve tried reinstallation of Bokeh module and update it to 2.0.2 but tthe same is happening. Im using Anaconda3 in windows 10.

[_jm]

Hi @Enrrod

Perhaps its a disconnect in how you’re attempting to run the application. You have Python code for your callbacks, which means you cannot run it as a standalone HTML application; a bokeh server is required. See the bokeh documentation or this stackoverflow post for a similar Q&A. https://stackoverflow.com/questions/51989100/export-interactive-bokeh-plots-with-widgets-to-standalone-html

The following is a modification of your example, that works for me. Apologies for the messy hacks; I was just focusing on a working example of the main issue and style wasn’t addressed. I also removed things like the color-coding of the nearest-neighbor points which I considered of secondary importance to the issue.

If the Python file is assumed to be named myapp.py, you can run it from a terminal window (or Windows command prompt) via

>> bokeh serve --show myapp.py

myapp.py

#output_file('testUMAPslider.html')
#Load the datframe
#df = pd.read_pickle('testRpDF.pkl')
#freq = np.load('testSynth_freq.npy')
import pandas as pd
import numpy as np

from bokeh.plotting import curdoc, figure
from bokeh.layouts import row,column

from bokeh.models import ColumnDataSource
from bokeh.models import Slider

x = np.random.randn(1001)
y = np.random.randn(1001)
nn = (np.random.rand(1001).round(1)*100.0).astype(int)
df = pd.DataFrame(np.column_stack((x,y,nn.astype(np.object))),columns=('x','y','n_neighbors'))

#Define the function to select scatter data for each n_neighbors value
def make_dataset(df, n=10):
	#Extract the subset of the points with n_neighbors = n
    ss = df[df['n_neighbors'] == n]
    return ss
	#return ColumnDataSource(subset)

def make_plot(src, colorLabel):
	#col = ["#%02x%02x%02x" % (int(r), int(g), int(b)) for r, g, b, _ in 255*cm.coolwarm(colors.Normalize()(colorLabel))]
	p = figure(plot_width = 700, plot_height = 700, 
              title = 'UMAP projection of synthetic ripples')
	#p.scatter(src.data['x'], src.data['y'], radius=0.05, fill_color=col, fill_alpha=0.6, line_color=None)
	p.scatter('x', 'y', source=src, radius=0.05, fill_alpha=0.6, line_color=None)
	return p


def update(attr, old, new):
    new_data = make_dataset(df, new)
    src.data = new_data
    src.update()


neigh_select = Slider(start = 10, end = 30, 
                     step = 10, value = 10,
                     title = 'n_neighbors')
neigh_select.on_change('value', update)

# Find the initially selected n_neighbors
initial_neighbors = neigh_select.value

data = make_dataset(df, initial_neighbors)
src = ColumnDataSource(data)

p = make_plot(src, None)

# Put controls in a single element
inputs = column(neigh_select)


# Add it to the current document (displays plot)
curdoc().add_root(row(inputs, p, width=500))
curdoc().title = "Sliders"

And the UI in your default web browser will look like the following for three settings (10,20,30) of the nearest-neighbor selector slider…

[Enrrod]

@_jm

bokeh serve --show myapp.py

Thanks! Now this works and the slider shows. One last question, is there any way to make it work as an .html file? I would like to be able to send the html file working the same way as in my computer, but I’m not sure this is possible.

Thanks for all the help again!

[p-himik]

Since your Python callback is pretty simple, it is definitely possible. You will have to write some JavaScript for CustomJS though and probably use a CDSView with some filters: Providing data — Bokeh 2.4.2 Documentation

There are numerous examples of such functionality both on Discourse and on StackOverflow.

[Enrrod]

OK thank you for the help!