2D plot with slider of a 3D dataset

[albe-jj]

I’m trying to visualize a 3D dataset displaying 2D slices of it and using a slider to change from one slice to another.

However although I don’t seem to get errors the slider has no effect on the plot. Below the code.

# Generate some sample data
x = np.linspace(-10, 10, 100)
y = np.linspace(-10, 10, 100)
z = np.linspace(-10, 10, 50)
xx, yy, zz = np.meshgrid(x, y, z, indexing='ij')
data = np.sin(xx) * np.cos(yy) * np.sin(zz)

# Create a ColumnDataSource
source = ColumnDataSource(data=dict(image=[data[:,:,0]]))

# Create a plot
plot = figure(x_range=(x.min(), x.max()), y_range=(y.min(), y.max()))

# Add the image glyph
image = plot.image(image='image', source=source, x=x.min(), y=y.min(), dw=(x.max()-x.min()), dh=(y.max()-y.min()))

# Create a slider to switch between different slices
slider = Slider(start=0, end=z.size-1, step=1, value=0)
slider.js_on_change('value', CustomJS(args=dict(source=source, slider=slider, data=data.tolist()), code="""
    console.log("Slider value:", slider.value);
    const image = [data[slider.value]]
    console.log("image value:", image);
    console.log("source.data value:", source.data);
    source.data.image = image;
"""))
# Create a layout for the plot and slider
layout = row(plot, slider)

# Show the plot
# output_file("3d_to_2d_with_slider.html")
show(layout)

[Bryan]

Hi @albe-jj I’m happy to take a closer look, but first I would need a complete Minimal Reproducible Example that I can actually take and run (as-is) to investigate. The above snippet is missing (at least) imports.

I’d also like to point your attention to a recent comment on a PR that another core dev made to add categorical colormapping to 3d image stacks:

bryevdv

My comment was that it seems this could easily be extended to support picking individual slices from s stack to colormap (e.g. that a slider could then be used to scrub through). I don’t think I ever got around to making an issue about it though, so I’d really like to encourage you to make a GitHub Issue for this feature request (it’s always better when feature requests are described by end-users).