50k points with image hover over

picture_grid.py

import numpy as np

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import HoverTool

output_file("toolbar.html")

npt = 700

images = ['https://cdn.spacetelescope.org/archives/images/screen/heic1107a.jpg'] * npt **2
x = np.linspace(0,npt**2, npt)
y = np.arange(0, npt**2, npt)
X,Y = np.meshgrid(x,y)
XY=np.array([X.flatten(),Y.flatten()]).T
x = XY[:,1]
y = XY[:,0]


source = ColumnDataSource(data=dict(
    x=x,
    y=y,
    desc=x,
    imgs=images
))

hover = HoverTool( tooltips="""
    <div>
        <div>
            <img
                src="@imgs" height="42" alt="@imgs" width="42"
                style="float: left; margin: 0px 15px 15px 0px;"
                border="2"
            ></img>
        </div>
        <div>
            <span style="font-size: 17px; font-weight: bold;">@desc</span>
            <span style="font-size: 15px; color: #966;">[$index]</span>
        </div>
        <div>
            <span style="font-size: 15px;">Location</span>
            <span style="font-size: 10px; color: #696;">($x, $y)</span>
        </div>
    </div>
    """
)

p = figure(plot_width=1500, plot_height=1500, tools=[hover,'zoom_in,zoom_out'],
           title="Mouse over the dots", output_backend="webgl")

p.scatter('x', 'y', size=60 * (10/npt), source=source)

show(p)