Exporting animated Bokeh plots as GIF

Question

I've been looking into using the Bokeh library to create animated data visualisations for some small projects I am working on. I feel that the gif format would be the best file format to export these visualisations in. It is widely used and they should be easy to share.

Is it possible (and advisable) to export bokeh animated plots in the gif format?

If so, will I need to make use of any additional tools to do this?

If not, is there a different file format that would be better suited to this?

I found this thread about potential options for creating gifs in Python, but I'm not sure if any of them are relevant to the Bokeh library. Programmatically generate video or animated GIF in Python?

Any help would be much appreciated. Many thanks.

Answer 1

Bokeh plot has a SaveTool which allows you to save the plot canvas manually in PNG format but this would be a lot of work for you to do. Alternatively you could automate this process by implementing Bokeh server app with update() function that updates the data_source property of your plot e.g. each second and saves a screenshot using export_png() function. Then you could use those images to build an animation e.g. using the Python lib you mentioned above.

This is an example script to run with bokeh serve --show app.py:

The content of app.py:

from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, curdoc
from datetime import datetime
from bokeh.io import export_png
import random

source = ColumnDataSource(dict(time = [datetime.now()], value = [random.randint(5, 10)]))
plot = figure(plot_width = 1200, x_axis_type = 'datetime', tools = 'pan,box_select,crosshair,reset,save,wheel_zoom')
plot.line(x = 'time', y = 'value', line_color = 'black', source = source)

counter = 0
def update():
    global counter
    new_source_data = dict(time = [datetime.now()], value = [random.randint(5, 10)])
    source.stream(new_source_data)
    counter = counter + 1
    export_png(plot, filename = "plot_" + str(counter) + ".png")

curdoc().add_root(plot)
curdoc().add_periodic_callback(update, 1000)

To make this script work you need to have phantomjs installed on your system. So first you need to install nodejs and npm, then install phantomjs like this:

sudo npm install -g phantomjs-prebuilt

If you are using Mac then another option is to use QuickTime Player screen recording to make a movie and then convert it into an animated gif using FFMPEG like explained in this post