Reactividad en documentos interactivos

Introducción

Los documentos interactivos construidos con Quarto Live pueden combinar a la perfección contenido estático pre-renderizado con código reactivo en vivo. Mediante el uso de variables OJS, puede precalcular los datos durante el tiempo de construcción y luego importarlos en celdas de código en vivo que se actualizan instantáneamente en función de las entradas del usuario. Este enfoque híbrido ofrece un alto rendimiento al tiempo que proporciona interactividad dinámica.

1. Qué es la Reactividad?

La reactividad permite que el documento se actualice automáticamente cuando cambian los datos o las entradas. Al renderizar previamente los cálculos pesados y exportarlos como variables OJS, puede pasar estos valores a celdas interactivas en vivo, lo que garantiza tiempos de carga rápidos y una respuesta inmediata.

2. Uso de variables OJS en documentos interactivos

Creación de entradas reactivas con OJS

Los bloques OJS permiten crear widgets interactivos que capturan la entrada del usuario. Por ejemplo, el siguiente código define una casilla de verificación para seleccionar especies y un menú desplegable para elegir una medida del conjunto de datos del iris.

Código fuente

reactivity.qmd

```{ojs}
//| echo: false
viewof selected_species = Inputs.checkbox(
  ["setosa", "versicolor", "virginica"],
  { value: ["setosa", "versicolor", "virginica"], label: "Select Iris Species:" }
)
viewof measure = Inputs.select(
  ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"],
  { label: "Select Measure:" }
)
```

Resultados

viewof selected_species = Inputs.checkbox(
  ["setosa", "versicolor", "virginica"],
  { value: ["setosa", "versicolor", "virginica"], label: "Select Iris Species:" }
)
viewof measure = Inputs.select(
  ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"],
  { label: "Select Measure:" }
)

Importación de variables OJS en celdas de código R

Una vez definidas, estas variables OJS pueden ser importadas en bloques de código R usando la opción input, permitiendo reactividad en vivo.

Código fuente

reactivity.qmd

```{webr}
#| input:
#|   - selected_species
#|   - measure
cat("Selected Species:", selected_species, "\n")
cat("Selected Measure:", measure, "\n")
```

Resultados

3. Pre-Renderizado de Datos e Importación en Directo

Pre-Renderizado con R

Puede precalcular los datos durante la fase de construcción y exportarlos como una variable OJS. Por ejemplo, el siguiente bloque de R pre-presenta un resumen del conjunto de datos mtcars.

library(dplyr)
# Precalcule un subconjunto de mtcars y expórtelo como variable OJS
mpg_data <- mtcars %>% select(mpg, hp) %>% filter(mpg < 25)
ojs_define(mpg_data)

Gráfico interactivo en vivo usando datos pre-renderizados en Python

A continuación, importar los datos pre-renderizados en una celda interactiva Python para crear un gráfico de dispersión.

Código fuente

```{pyodide}
#| input:
#|   - mpg_data
import pandas as pd
import matplotlib.pyplot as plt

# Convertir los datos mpg pre-renderizados en un DataFrame
df = pd.DataFrame(mpg_data)
plt.figure(figsize=(8, 4))
plt.scatter(df['mpg'], df['hp'], color='darkgreen')
plt.title("MPG vs Horsepower")
plt.xlabel("Miles per Gallon")
plt.ylabel("Horsepower")
plt.show()
```

Nota

Este intercambio de datos entre motores le permite combinar el procesamiento estático con la interactividad en vivo.

4. Ejemplos prácticos adicionales

Histograma Interactivo con Datos en Vivo y Pre-Renderizados

Este ejemplo muestra un histograma interactivo utilizando código Python en vivo, con el recuento de contenedores controlado por un control deslizante OJS.

Código fuente

histogram.qmd

```{webr}
#| input:
#|   - bin_count
# Histograma R en vivo
hist(rnorm(1000), breaks = bin_count, col = "steelblue", border = "white")
```

```{ojs}
//| echo: false
//  OJS Input for Bin Count
viewof bin_count = Inputs.range([5, 50], { value: 15, step: 1, label: "Number of Bins:" })
```

Resultados

//  OJS Input for Bin Count
viewof bin_count = Inputs.range([5, 50], { value: 15, step: 1, label: "Number of Bins:" })

Boxplot Reactivo con el Conjunto de Datos iris

Este boxplot interactivo permite a los usuarios seleccionar especies de iris y una medida para mostrar.

Pasos principales:

1. Crear una función R tomando entradas reactivas como argumentos
2. Exportar la función como una variable OJS

dashboard.qmd

```{webr}
#| edit: false
#| output: false
#| define:
#|   - do_reactive_boxplot
library(ggplot2)
library(dplyr)

do_reactive_boxplot <- function(selected_species, measure) {
  # Filtrar el conjunto de datos del iris en función de las especies seleccionadas
  filtered_iris <- iris %>% filter(Species %in% selected_species)

  # Crear un boxplot interactivo utilizando la medida elegida
  p <- ggplot(filtered_iris, aes(x = Species, y = .data[[measure]], fill = Species)) +
    geom_boxplot() +
    labs(title = paste("Boxplot of", measure, "by Species"),
         x = "Species",
         y = measure) +
    theme_minimal()

  print(p)
}
```

A continuación, cree entradas reactivas OJS para la selección de especies y medidas para invocar la función exportada do_reactive_boxplot().

dashboard.qmd

```{ojs}
//| echo: false
viewof species = Inputs.checkbox(
  ["setosa", "versicolor", "virginica"],
  { value: ["setosa", "versicolor", "virginica"], label: "Select Iris Species:" }
);

viewof measures = Inputs.select(
  ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"],
  { label: "Select Measure:" }
);

do_reactive_boxplot(species, measures);
```

Resultados

viewof species = Inputs.checkbox(
  ["setosa", "versicolor", "virginica"],
  { value: ["setosa", "versicolor", "virginica"], label: "Select Iris Species:" }
);
viewof measures = Inputs.select(
  ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"],
  { label: "Select Measure:" }
);
do_reactive_boxplot(species, measures);

Nota

A medida que se ajustan las selecciones en los widgets OJS, el diagrama de caja se actualiza automáticamente.

5. Mejores prácticas para documentos reactivos

• Separar el Código Estático del Código Vivo:
  Pre-renderiza los cálculos pesados y expórtalos como variables OJS para mantener ligero el código en vivo.

• Minimizar la Carga de Datos:
  Exporte sólo los datos necesarios para garantizar tiempos de carga rápidos.

• Probar la interactividad:
  Valide que los cambios en las entradas OJS activan correctamente las actualizaciones en sus celdas interactivas.

• Monitorizar Logs de Consola:
  Compruebe las herramientas de desarrollador del navegador en busca de errores o advertencias durante la carga inicial.

Lecturas adicionales

• Explicación de los bloques de código interactivo
  Sumérgete en cómo funcionan los bloques de código interactivo en Quarto Live.
• Carga y uso de paquetes
  Aprende técnicas para gestionar e instalar paquetes.
• Gestión de entornos de ejecución
  Descubra métodos para controlar el uso compartido y el aislamiento de variables.
• Referencia de opciones de celda
  Explorar opciones de configuración avanzadas para bloques de código interactivo.

Conclusión

Al aprovechar las variables OJS, puedes combinar datos pre-renderizados con código vivo y reactivo para crear documentos interactivos altamente dinámicos. Estas técnicas -demostradas a través de ejemplos como histogramas interactivos y gráficos de caja- le permiten optimizar el rendimiento a la vez que ofrece una interactividad rica y en tiempo real. Experimente con estos enfoques para construir documentos atractivos y reactivos con Quarto Live y WebAssembly.

Explorar más artículos

Nota

Aquí hay más artículos de la misma categoría para ayudarte a profundizar en el tema.