Efficient updates of image plots in Bokeh for interactive visualization

Question

I'm trying to create a smooth interactive visualization of different slices of a muldimensional array using Bokeh. The data in the slices changes according to the user interaction and thus has to be updated several times per second. I have written a Bokeh app with several small image plots (64x64 values) to show the contents of the slices, and a callback to update the ColumnDataSources when the user interacts with the app. Everything works as expected but I can't get more than 2 or 3 frames per second and I would like to get at least 10 frames.

Here is a simplified sample of my code using 16 images with a periodic callback every 100ms to simulate user interaction. Using Bokeh 0.12.3 and Python 2.7 on Mac and Linux I get almost exactly the same timings (~300ms per frame) on both machines.

from __future__ import print_function, division
from random import randint
from timeit import default_timer as timer
import numpy as np

from bokeh.io import curdoc
from bokeh.layouts import gridplot
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure

# Set up app and fake data
grid_size = 4
data_size = 64
names = ['d{}'.format(i) for i in range(grid_size)]
plots = [[None for _ in range(grid_size)] for _ in range(grid_size)]
sources = dict()

num_images = 16
image_data = [[np.random.rand(data_size, data_size)] for i in range(num_images)]

# Create plots and datasources
plot_size = 256
for row, row_name in enumerate(names):
    for col, c_name in enumerate(names):
        d_name = row_name + "_" + c_name
        sources[d_name] = ColumnDataSource(
            {'value': image_data[randint(0, num_images - 1)]})
        plots[row][col] = figure(plot_width=plot_size,
                                 plot_height=plot_size,
                                 x_range=(0, data_size),
                                 y_range=(0, data_size))

        plots[row][col].image('value', source=sources[d_name],
                              x=0, y=0, dw=data_size, dh=data_size,
                              palette="Viridis256")


# Updates
def update():
    global sources
    start_update, end_update = [], []
    start_time = timer()
    for row, row_name in enumerate(names):
        for col, c_name in enumerate(names):
            d_name = row_name + "_" + c_name
            new_data = dict()
            new_data['value'] = image_data[randint(0, num_images - 1)]
            start_update.append(timer())  # ----- TIMER ON
            sources[d_name].data = new_data
            end_update.append(timer())    # ----- TIMER OFF

    print("\n---- \tTotal update time (secs): {:07.5f}".format(timer() - start_time))
    print("+ \tSources update times (secs): {}".format(
           ["{:07.5f}".format(end_update[i] - s) for i,s in enumerate(start_update)]))


# Document
grid = gridplot(plots)
curdoc().add_root(grid)
curdoc().add_periodic_callback(update, 100)

I've tried using only one data source with different fields for each plot, and also updating the data with the stream() method (although it doesn't make sense since the whole image is being replaced) and I haven't achieved any performance gain. Does anyone know what could I do to improve the interactivity of this visualization? Am I doing something wrong to update the image data?

My guess is that the bottleneck is the overhead caused by the JSON encoding/decoding of the image data, which might improve in the future since it appears that Bokeh developers are aware of this problem and trying to solve it. Sadly, it does not look like the fix is coming soon.

https://github.com/bokeh/bokeh/issues/2204

https://github.com/bokeh/bokeh/pull/5429

Any other suggestions?

Answer 1

As others have mentioned, an efficient binary array protocol has been implemented. So the answer is to upgrade to recent versions.

For completeness, here is a comparison of results.

With 0.12.3 (the version from the original post — make sure to use tornado < 4.5):

---- Total update time (secs): 0.14389 + Sources update times (secs): ['0.00943', '0.00962', '0.01100', '0.00908', '0.00004', '0.00975', '0.00984', '0.00997', '0.00946', '0.00926', '0.00912', '0.00898', '0.00900', '0.00908', '0.00999', '0.01014'] ^C

With 0.12.13 (the most recent version as of this time):

---- Total update time (secs): 0.01999 + Sources update times (secs): ['0.00157', '0.00231', '0.00131', '0.00143', '0.00114', '0.00123', '0.00109', '0.00118', '0.00116', '0.00102', '0.00113', '0.00118', '0.00099', '0.00099', '0.00104', '0.00104']

There is probably even more marginal improvement possible if all of the images are stored in different (length 1) columns of a single ColumnDataSource and updated at once, rather than iterating over several different data sources.