Interactive figure in jupyter notebook ends up frozen in quarto project

[cgadal]

Description

I am trying include an interactive matplotlib figure inside my quarto project. In jupyter notebook, two methods can be used:

• https://matplotlib.org/ipympl/

%matplotlib widget

import matplotlib.pyplot as plt
import numpy as np
fig = plt.figure()
plt.plot(np.sin(np.linspace(0, 20, 100)));

• http://mpld3.github.io/

import matplotlib.pyplot as plt, mpld3
plt.plot([3,1,4,1,5], 'ks-', mec='w', mew=5, ms=20)
mpld3.show()

Including those in quarto results in a png figure included in the webpage. How should I proceed ?

[cscheid]

How should I proceed ?

I believe the interactive matplotlib kernel requires a running python process for the execution. Quarto's jupyter execution serves a static HTML page (obtained from a .ipynb file derived from your page), so this is not possible.

[mcanouil]

FYI, it's clearly stated at the top of the Matplotlib website.

ipympl enables using the interactive features of matplotlib in Jupyter Notebooks, Jupyter Lab, Google Colab, VSCode notebooks.

Matplotlib requires a live Python kernel to have interactive plots so by default the outputs on this page will not be interactive. To try things out yourself you can either use Binder or make these docs interactive by clicking on the rocket icon in the top right of the page.

[cgadal]

I believe you are right for ipympl, but mpld3 behaves very similarly to plotly. More specifically, running the piece of code in my first post in a regular python kernel will open an html figure in the browser, which can be saved as html and re-opened without a running python kernel.

For now, I can plot save the figure as html in a separate code, and then include it in my quarto document. But I believe it should be possible to make the code run directly from quarto, similarly to plotly ?

[mcanouil]

Use display() not show() method for mpld3, see http://mpld3.github.io.
In the end, the issue is not on Quarto side but rather on using the right methods for your needs, which are described in the tools respective documentations.