Hybrid Execution

Combine pre-rendered and client-side WebAssembly computation

Transferring data through OJS variables allows for communication between the different execution contexts provided by the quarto-live extension.

Build-time OJS data source

In standard Quarto code cell blocks data can be evaluated at build-time and exported as an OJS data source. The data is then subsequently available to OJS blocks at runtime.

Source

hybrid.qmd

```{r}
library(ggplot2)
glimpse(diamonds)
ojs_define(diamonds)
```

```{ojs}
diamonds
```

Output

library(ggplot2)
head(diamonds)

  carat       cut color clarity depth table price    x    y    z
1  0.23     Ideal     E     SI2  61.5    55   326 3.95 3.98 2.43
2  0.21   Premium     E     SI1  59.8    61   326 3.89 3.84 2.31
3  0.23      Good     E     VS1  56.9    65   327 4.05 4.07 2.31
4  0.29   Premium     I     VS2  62.4    58   334 4.20 4.23 2.63
5  0.31      Good     J     SI2  63.3    58   335 4.34 4.35 2.75
6  0.24 Very Good     J    VVS2  62.8    57   336 3.94 3.96 2.48

ojs_define(diamonds)

diamonds

WebAssembly quarto-live cells

Since the build-time data export is available as an OJS variable, it can be imported back into an R or Python environment using the input code cell option.

With this, you can do further processing of data, in a serverless fasion, using client-side WebAssembly engines.

hybrid.qmd

```{webr}
#| input:
#|   - diamonds
si1 <- diamonds |> dplyr::filter(clarity == "SI1")
plot(si1$depth, si1$price)
head(si1)
```

Passing data between engines

The mechanism described in the previous section can also be used to pass data between WebAssembly engines.

Source

```{webr}
#| edit: false
#| define:
#|   - mpg
# Process and export data from R
mpg <- mtcars |>
  dplyr::select(mpg, hp) |>
  dplyr::filter(mpg < 25)
```

```{pyodide}
#| edit: false
#| input:
#|   - mpg
# Import and plot data in Python

import matplotlib.pyplot as plt
import pandas as pd

df = pd.DataFrame(mpg)
plt.plot(df['mpg'], df['hp'])
plt.show()
```

Output