How to control circle figure sizes with a slider using Javascript? I'd like the size values to be multiplied or otherwise changed in some math function by a slider's value

Community Support
1

I’m trying to get the sizes of circles to be controlled by a slider, where the value is multiplied by the slider’s value, and I’ve drafted something up in Javascript and it isn’t working as intended. Things stop rendering in the figure so I’m guessing something is wrong with my Javascript code. Could someone please help me figure out what I might be doing wrong?

Here’s a simplified example of what I’m working on which demonstrates the issue:

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Slider
from bokeh.layouts import layout
data = dict(Apples=[97, 34, 23, 6, 26, 97, 21, 92, 73, 10, 92, 14, 77, 4],
            Bananas=[87, 63, 56, 38, 57, 63, 73, 56, 30, 23, 66, 47, 76, 15],
            Oranges=[21, 65, 86, 39, 32, 62, 46, 51, 17, 79, 64, 43, 54, 50],)
data['size_active'] = data['Apples']
source = ColumnDataSource(data=data)
size_slider = Slider(value = 1, start = 0.1, end = 3, step = 0.1)
size_slider.js_on_change('value', CustomJS(args=dict(source = source, size_slider = size_slider), code = """
source.data['size_active'] = source.data['Apples'] * size_slider.value;
source.change.emit();"""))
p = figure()
p.circle('Oranges', 'Bananas', source=source, size='size_active')
m = layout(p,size_slider)
show(m)

Thanks for any help!

2

You’re right-- it is in the JS code, and just because it handles arrays a little differently than Python. Try replacing your multiplication line with this use of the map function:

source.data['size_active'] = source.data['Apples'].map(x => x * size_slider.value);