How to display and scroll set of images in horizontal, when clicked on the scatter plot? Example below

from bokeh.plotting import ColumnDataSource, figure, output_file, show
from bokeh.models.callbacks import CustomJS


def interactive(Y,imgList,dataset,tc):
    output_file("Scatter Plot Images over the Image Error distribution of Dataset {} {} .html".format(dataset,tc))

    source = ColumnDataSource(data=dict(
        x = Y,
        y=Y,
        imgs=imgList,
    ))

    TOOLTIPS = """
        <div>
            <div>
                <img
                    src="@imgs" height="200" alt="@imgs" width="200"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        </div>
    """
    p = figure(plot_width=1440, plot_height=800, tooltips=TOOLTIPS,
               title="{} {}".format(dataset,tc))

    p.circle('x', 'y', size=5, source=source)
# execute a callback whenever the plot canvas is tapped
    show(p)

This does the work, but the images are shown vertically all once. I wish to show few images, and should be scroll able on horizontal axis.
Please do let me know how to achieve this.

should be scroll able on horizontal axis.

The entire tooltip itself always moves to exactly follow the mouse. It is not possible to ever have the mouse “inside” the tooltip, so it will not be possible to scroll anything inside the tooltip.

A better approach is probably to allow users to click the points (generating a “selection”) and then having a selection callback update content in a Div outside the plot.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.