https://github.com/maurosilber/pyfragments

Animated figures for Quarto
https://github.com/maurosilber/pyfragments

matplotlib presentation quarto revealjs

Last synced: about 2 months ago
JSON representation

Animated figures for Quarto

• Host: GitHub
• URL: https://github.com/maurosilber/pyfragments
• Owner: maurosilber
• License: mit
• Created: 2023-05-14T00:58:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-01T17:01:43.000Z (6 months ago)
• Last Synced: 2024-08-11T10:04:20.704Z (4 months ago)
• Topics: matplotlib, presentation, quarto, revealjs
• Language: Python
• Homepage:
• Size: 4.62 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

README

        
# PyFragments

Add animated figures to your [Quarto](https://quarto.org) presentations.

## Install

```

pip install pyfragments

```

## Example

A [Revealjs](https://quarto.org/docs/presentations/revealjs/)

presentation created with Quarto,

which shows matplotlib figure animated with fragments

(i.e., moving to the next slide):

![Animated scatterplot](https://raw.githubusercontent.com/maurosilber/pyfragments/main/docs/static/animated_png.gif)

This is created with the following code,

in a Quarto `.qmd` file.

````qmd

---

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)

```

````

## Docs

See the demo in [GitHub Pages](https://maurosilber.github.io/pyfragments).

To change the order of fragments,

or make different elements appear at the same time,

use `ani.fragment()`:

```python

with ani.fragment(2):  # appears second

    ax.scatter(...)

with ani.fragment(1):  # appears first

    ax.scatter(...)

with ani.fragment(2):  # appears second

    ax.scatter(...)

```

### SVG

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.

````qmd

---

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-`:

```python

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`:

```python

import matplotlib

matplotlib.rc("image", composite_image=False)

```