Slider modifying Segment endpoints

Community Support
1

Inspired by the demo: slider — Bokeh 3.5.1 Documentation

I’m trying to do something similar with line segments (eventually arrows). Specifically, I’d like to have a slider that when dragged modifies the calculation of the one of the endpoints of each of the line segments. Essentially allowing them to grow and shrink as I drag the slider around. Again with deep inspiration from slider — Bokeh 3.5.1 Documentation I’ve tried to build this and the plot looks really nice. However, I’m clearly doing something wrong with the call back because the line segments don’t change when I click and drag on the “magnitude slider”. I feel like I’m close but I’m missing some fundamental concept.

Any guidance would be much appreciated!

The complete minimal reproducible example is:

import numpy as np
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, CustomJS, Segment, Slider
from bokeh.plotting import figure, show

# Create initial segment data
N = 9
x = np.linspace(-2, 2, N)
y = x**2
source = ColumnDataSource(
    dict(
        x=x,
        y=y,
        xm01=x - x**3 / 10 + 0.3,
        ym01=y - x**2 / 10 + 0.5,
    )
)

# Create figure
plot = figure(y_range=(-5, 5), width=400, height=400)

# Plot initial data
glyph = Segment(
    x0="x", y0="y", x1="xm01", y1="ym01", line_color="#f4a582", line_width=1
)
plot.add_glyph(source, glyph)

# Slider with the intention of scaling the magnitude of segments
mag = Slider(start=0.1, end=10, value=1, step=0.1, title="magnitude")

# Call back to change one end point of segments when slider moves
callback = CustomJS(
    args=dict(source=source, mag=mag),
    code="""
    const m = mag.value

    const x = source.data.x
    const y = source.data.y

    const xm01 = x - m * (x**3 / 10 + 0.3),
    const ym01 = y - m * (x**2 / 10 + 0.5),

    source.data = { x, y, xm01, ym01 }
""",
)  # noqa

# Make call back active
mag.js_on_change("value", callback)

# Show the figure
show(row(plot, column(mag)))

Screenshot for reference:

Screenshot 2024-08-14 at 12.05.26 PM
Screenshot 2024-08-14 at 12.05.26 PM1422×846 28.1 KB

2

There is no NumPy in JavaScript, so these lines will not do what you are expecting. You will need to express these computations as actual explicit loops, or else use something like Array.from as in the linked example.

Separately, just FYI when developing/debugging CustomJS it’s almost always helpful to check the browser’s JavaScript console for any messages or errors. Specifics of how to access the console varies by browser, so all I can do is mention the idea. (I would expect the code above to report an error in console).

3

@Bryan . Thank you so much. Both pieces of advice (for loop and console) worked to help me understand how things work. Also, Bokeh is amazing! It looks great and the speed is revolutionary for me. Thank you!

1 Like