Export Animation

[Leonel_Quiroz]

Hi,

I’m new in Bokeh and I’m very impressed with the library.

Here is my issue:

In matplotlib, I can make a gif with “FuncAnimation” and export it with the method “to_jshtml()” that returns an HTML. This output adds a “scrubber” widget to the animation, which is great. Here is a reproducible example:

import xarray as xr
from matplotlib import pyplot as plt, animation
from IPython.display import HTML

ds = xr.tutorial.open_dataset('air_temperature')
tas=ds.air
tas = tas - 273.15

# Get a handle on the figure and the axes
fig, ax = plt.subplots(figsize=(12,6))

# Plot the initial frame. 
cax = tas[0,:,:].plot(
    add_colorbar=True,
    cmap='coolwarm',
    vmin=-40, vmax=40,
    cbar_kwargs={
        'extend':'neither'
    }
)

# Next we need to create a function that updates the values for the colormesh, as well as the title.
def animate(frame):
    cax.set_array(tas[frame,:,:].values.flatten())
    ax.set_title("Time = " + str(tas.coords['time'].values[frame])[:13])

# Finally, we use the animation module to create the animation.
ani = animation.FuncAnimation(
    fig,             # figure
    animate,         # name of the function above
    frames=40,       # Could also be iterable or list
    interval=200     # ms between frames
)

then:

HTML(ani.to_jshtml())

Now, I would like to make something similar with bokeh, i.e. I want to make a gif with the “scrubber” widget and export it to HTML to be embedded in a webpage, but leverage the possibilities of customization of bokeh, e. g. the option “stretch_both” of “sizing_mode” to put it inside a div.

There is a way to do this?

Thanks!!

[nmasnadi]

Hi, I think if you use Bokeh, you don’t actually need to convert your plot to a gif. You can use a slider to update the data source of your plot, or you can add a play/pause button if you want to animate the data. I suggest you take a look at the gapminder example in the docs:

https://demo.bokeh.org/gapminder

bokeh/examples/server/app/gapminder at main · bokeh/bokeh

This example uses bokeh server, but I think you can implement something similar in a standalone document (this requires some code in Javascript) and embed the document in your html (see this link for details).

[Bryan]

@nmasnadi Has it exactly right. This kind of goal is achieved in Bokeh by updating a plot’s data (either by computing or selecting it) rather than by pre-rendering actual frames for an animation. Updates can happen via Python code in the Bokeh server case, but it’s also possible to update from JavaScript widget callbacks for standalone HTML content. See:

JavaScript callbacks