Issues with Binder/JupyterLab and showing a Matplotlib animation

Binder
1

Hello! I’ve been working on a project using nbinteract which uses the Binder service to show an interactive Jupyter notebook. I’m like 99% there but am running into one problem that I haven’t figured out how to overcome.

Issue: Trying to show a Matplotlib animation using funcanimation, and the animation shows fine in Jupyter Notebook with all attempted methods described below. However, it does NOT work in JupyterLab in any of the methods. I believe the nbinteract service uses Jupyterlab so there isn’t a way to not use it. Most of the issues revolve around getting the message “JavaScript output is disabled in JupyterLab” when running Matplotlib functionality. Want to see if my Binder installation files need any changes or any other ways to make this work.

  1. Running with %matplotlib notebook backend

When I use this, any Matplotlib functionality (even those not using animation) doesn’t work in JupyterLab and shows “JavaScript output is disabled in JupyterLab”. Is it possible to run %matplotlib notebook in JupyterLab successfully by adding some installation setting to the Binder server?

  1. Running with %matplotlib widget backend

When I use this, I don’t get the JavaScript error message but instead get no output when trying to show the graph and the following text displays: Canvas(toolbar=Toolbar(toolitems=[(‘Home’, ‘Reset original view’, ‘home’, ‘home’), (‘Back’, 'Back to previous …

There are a couple related threads out there (https://github.com/matplotlib/ipympl/issues/148 ) but I should have the required stuff installed. It mentions restarting Jupyter server, is there a way to do this from the terminal in Binder (if that is indeed needed)?

When I run with %matplotlib inline backend, I get no errors in Jupyterlab, but the animation only shows the first frame because inline won’t show animations, only the first static frame, which is why I likely need %matplotlib notebook or %matplotlib widget backend.

Here are my file contents that Binder uses for installation:

requirements.txt file:
numpy
ipywidgets
nbinteract
matplotlib
pandas
xlrd
nodejs
ipympl

postBuild file:

jupyter labextension install @jupyter-widgets/jupyterlab-manager
jupyter labextension install jupyter-matplotlib
jupyter nbextension enable --py widgetsnbextension

Ultimately I’m trying to get an interactive notebook that already works fine in Jupyter Notebook to fully work in Jupyterlab and everything works in both except for the Matplotlib functionality. I’m wondering if anyone has any advice on why these issues occur and/or what changes I can make to my Binder installation files to enable correct functionality in JupyterLab. I’d like to think it’s possible somehow to run a Matplotlib animation in JupyterLab.

Thanks!

2

It isn’t Binder that is the issue. It is JupyterLab and matplotlib. You cannot use the same approaches in JupyterLab as the classic notebook mode.

See my notes in the first paragraph of the notebook that launches from the launch badge here. The code I found that works in JupyterLab 1.2.6 and JuptyerLab 2.1.2 (both launched via MyBinder from different repos) is here.

1 Like
3

I’ve made very good experiences with to_jshtml().

This works on both JupyterLab and the Classic Notebook. And it works totally fine on Binder.

As an added bonus, you get interactive controls to start/stop the animation, change its speed or step through the frames one-by-one.

Here’s an example page where I’ve used this:

3 Likes
4

@mgeier Thank you for your reply! I probably should have mentioned I’ve used to_jstml() and am a big fan, but I’m running into a problem with it in my specific use case here (which originally caused me to try the other non-inline backends). I just dug into it more and here’s the issue:

  • When I use it and it runs automatically in the cell, it works fine in Jupyterlab. Example (should see animation show up at bottom after a couple seconds) : https://amuffitt.github.io/nbinteract-tutorial/Test_Packers_Receiving_Yards_nowidget.html

  • However, my use case is running this animation on user initiation, not automatically. Using ipywidgets and nbinteract, the user would select some inputs like date range in drop down selectors and run the animation by checking a widget checkbox. Here, when I run the same animation code triggered by the widget checkbox, it actually displays the player but blocks out the image and in the Chrome developer tool trace it says “JupyterLab does not execute inline JavaScript in HTML” Simplified example that just shows a “Show Result” checkbox at the bottom that enables the animation by checking it: https://amuffitt.github.io/nbinteract-tutorial/Test_Packers_Receiving_Yards.html (Note, to see the checkbox appear you many need to click “Show Widgets” button and wait for “Initializing Widgets” to finish which can either take a few seconds or much longer if the Binder service is laggy)

I’ll also note that these widgets/selectors work fine in Jupyterlab running static Matplotlib graphs, it only has the issue running the funcanimation jshtml )

Any ideas on other hacks or ways around this to not block the jshtml animation content in Jupyterlab or get this animation run on user initiation not using a widget? Again, works fine in Notebook and works fine running the animation automatically but I need the animation to be started by the user rather than automatically run. Any ideas appreciated!

Screenshot below of the inline javascript blocking when run from the checkbox (circled in red), and dev tool trace on the side

jupyterlaberror
jupyterlaberror2644×1056 301 KB