Add animated figures to your Quarto presentations.
pip install pyfragments
A Revealjs presentation created with Quarto, which shows matplotlib figure animated with fragments (i.e., moving to the next slide):
This is created with the following code,
in a Quarto .qmd
file.
---
title: " "
format: revealjs
---
## Animated scatterplot
Move to the next slide to see the transitions.
```{python}
# | output: asis
import matplotlib.pyplot as plt
from pyfragments import AnimatedFigure
with AnimatedFigure() as ani:
plt.xlim(-1, 3)
plt.ylim(-1, 3)
for i in range(3):
with ani.fragment():
plt.scatter(i, i, s=200)
```
See the demo in GitHub Pages.
To change the order of fragments,
or make different elements appear at the same time,
use ani.fragment(<num>)
:
with ani.fragment(2): # appears second
ax.scatter(...)
with ani.fragment(1): # appears first
ax.scatter(...)
with ani.fragment(2): # appears second
ax.scatter(...)
To use SVG images,
each call to a matplotlib
function must include a group id (gid
) with a value of .fragment
.
Note: it is important to set embed-resources: true
in the YAML options.
---
format: revealjs
embed-resources: true
---
# Example of an animated figure
## Animated scatterplot
Move to the next slide to see the transitions.
```{python}
from matplotlib.figure import Figure
from pyfragments.svg import animate
fig = Figure()
ax = fig.add_subplot()
for i in range(3):
ax.scatter(i, i, gid=".fragment")
animate(fig)
```
To change the order of fragments,
or make different elements appear at the same time,
use .fragment-<num>
:
ax.scatter(..., gid=".fragment-2") # appears second
ax.scatter(..., gid=".fragment-1") # appears first
ax.scatter(..., gid=".fragment-2") # appears second
To allow animation of images,
such as with ax.imshow
,
it is important to disable image.composite_image
:
import matplotlib
matplotlib.rc("image", composite_image=False)