Python to Interactive Python

Overview

We can use {quarto-panelize} to take a usual Python code cell and convert it into an interactive cell powered by Pyodide. In this guide, we’ll walk through the steps!

Code Cell

For example, let’s take the following Python cell:

```{python}
x = [1, 2]
print(x)
```

Document Header modification

Next, in our document header, we need to specify both the panelize and pyodide filters under the filters key, e.g. 

---
title: "My title"
format: html
filters:
- panelize
- pyodide
---

Important

The order matters! Please make sure panelize comes before pyodide. Otherwise, the pyodide filter will not see the code cell.

You will also need to have the {quarto-pyodide} extension installed by typing in Terminal:

quarto add coatless-quarto/pyodide

Wraping the code cell

Next, we use a special class called .to-pyodide inside of a Div denoted by ::: around a usual R code cell, e.g. 

:::{.to-pyodide}
```{python}
x = [1, 2]
print(x)
```
:::

This allows us to ensure the computational order is maintained when translating from R to a {quarto-webr} code cell.

Result

As a result, we now have access to two tabs: Result and Interactive.

Result

x = [1, 2]
print(x)

[1, 2]

Interactive

Graphs

We can also use the same approach for plotting graphs, e.g.

Result

import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [1, 4, 9, 16, 25]

plt.plot(x, y)
plt.show()

Interactive

Multiline

We can also use the same approach for multiline code cells, e.g.

Result

x = list(range(1, 11))
x

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

y = [i**2 for i in x]
y

[1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [1, 4, 9, 16, 25]

plt.plot(x, y)
plt.show()

Interactive