The fiddle is doing something entirely different than what Bokeh does.
The fiddle creates a 5k canvas and loops to draw on it, never actually storing any of the data used for the drawing. The size of that canvas is roughly 100MB (5000 x 5000 x 32 bit RGBA). That’s starting to be alot for one browser tab, but not (evidently) unmanageable.
By contrast the Bokeh app serializes and sends the entire scalar array from Python over the network to a
Float64Array typed array in the browser. That right right there is ~200 MB since numpy defaults to float64. Now, since we have used the
image glyph, there is a colormapping step in the browser (that is what
image is for). That means creating another 100MB RGBA array to then display by passing to
ctx.draw_image on the 100MB canvas. So now you are pushing near to half a GB of data in one browser tab, and that’s just off the top of my head. Bokeh is intended to send all the data, to afford interactivity over that data, but past a certain point browsers will not handle that mode of use.
Bokeh is not magic, and if you want to just draw a 5k canvas while throwing away all the data that went into the drawing, Bokeh is not the right tool for that job. Otherwise, some options:
Colormap the data yourself in Python, and use
image_rgba instead of
image. That will probably halve the data usage right there
Downsample in Python. You could do this manually, but you could also leverage high level tools like Holoviews which can efficiently coordinate Bokeh and Datashader for large data sets.