Réactivité dans les documents interactifs

Introduction

Les documents interactifs créés avec Quarto Live peuvent combiner de manière transparente du contenu statique pré-rendu avec du code réactif. En utilisant des variables OJS, vous pouvez pré-calculer des données lors de la construction, puis les importer dans des cellules de code en direct qui se mettent à jour instantanément en fonction des entrées de l’utilisateur. Cette approche hybride permet d’obtenir des performances élevées tout en offrant une interactivité dynamique.

1. Qu’est-ce que la réactivité?

La réactivité permet à votre document de se mettre à jour automatiquement lorsque les données ou les entrées changent. En effectuant un pré-rendu des calculs lourds et en les exportant sous forme de variables OJS, vous pouvez transmettre ces valeurs à des cellules interactives vivantes, ce qui garantit des temps de chargement rapides et un retour d’information immédiat.

2. Utilisation de variables OJS dans des documents interactifs

Création d’entrées réactives avec OJS

Les blocs OJS vous permettent de créer des widgets interactifs qui capturent les données de l’utilisateur. Par exemple, le code suivant définit une case à cocher pour la sélection des espèces et un menu déroulant pour le choix d’une mesure à partir de l’ensemble de données sur l’iris.

Source Code

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:" }
)
```

Résultats

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:" }
)

Importation de variables OJS dans des cellules de code R

Une fois définies, ces variables OJS peuvent être importées dans des blocs de code R à l’aide de l’option input, ce qui permet une réactivité en direct.

Source Code

reactivity.qmd

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

Résultats

3. Pré-rendu des données et importation en direct

Pré-rendu avec R

Vous pouvez précalculer les données pendant la phase de construction et les exporter en tant que variable OJS. Par exemple, le bloc R suivant pré-rend un résumé de l’ensemble de données mtcars.

library(dplyr)
# Précalculer un sous-ensemble de mtcars et l'exporter en tant que variable OJS
mpg_data <- mtcars %>% select(mpg, hp) %>% filter(mpg < 25)
ojs_define(mpg_data)

Tracé interactif en direct utilisant des données pré-rendues en Python

Ensuite, importer les données pré-rendues dans une cellule interactive Python pour créer un graphique en nuage de points.

Source Code

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

# Convertir les données pré-rendues mpg_data en 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()
```

Note

Ce partage de données entre moteurs vous permet de combiner le traitement statique avec l’interactivité en direct.

4. Autres exemples pratiques

Histogramme interactif avec des données en direct et des données pré-rendues

Cet exemple montre un histogramme interactif utilisant du code Python en direct, avec le nombre de cellules contrôlé par un curseur OJS.

Source Code

histogram.qmd

```{webr}
#| input:
#|   - bin_count
# Histogramme R en direct
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:" })
```

Résultats

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

Boxplot réactif avec l’ensemble de données iris

Ce diagramme en boîte interactif permet aux utilisateurs de sélectionner une espèce d’iris et une mesure à afficher.

Étapes principales:

1. Créer une fonction R prenant des entrées réactives comme arguments
2. Exporter la fonction en tant que variable OJS

dashboard.qmd

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

do_reactive_boxplot <- function(selected_species, measure) {
  # Filtrer l'ensemble des données d'iris en fonction des espèces sélectionnées
  filtered_iris <- iris %>% filter(Species %in% selected_species)

  # Créer un diagramme en boîte interactif en utilisant la mesure choisie
  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)
}
```

Ensuite, créez des entrées réactives OJS pour la sélection des espèces et des mesures afin d’invoquer la fonction exportée 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);
```

Résultats

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);

Note

Lorsque vous ajustez les sélections dans les widgets OJS, le diagramme en boîte se met à jour automatiquement.

5. Meilleures pratiques pour les documents réactifs

• Séparer le code statique du code réel:
  Pré-rendez les calculs lourds et exportez-les en tant que variables OJS pour conserver la légèreté du code en direct.

• Minimiser la charge utile des données:
  Exporter uniquement les données nécessaires pour garantir des temps de chargement rapides.

• Tester l’interactivité:
  Validez que les changements dans les entrées OJS déclenchent correctement des mises à jour dans vos cellules interactives.

• Surveiller les logs de la console:
  Vérifier les outils de développement du navigateur pour détecter les erreurs ou les avertissements lors du chargement initial.

Plus d’informations

• Explication des blocs de code interactifs
  Plongez dans le fonctionnement des blocs de code interactifs dans Quarto Live.
• Chargement et utilisation des packages
  Apprendre les techniques de gestion et d’installation des paquets.
• Gestion des environnements d’exécution
  Découvrez les méthodes de contrôle du partage et de l’isolation des variables.
• Référence des options de cellule
  Explorer les options de configuration avancées pour les blocs de code interactifs.

Conclusion

En exploitant les variables OJS, vous pouvez combiner des données pré-rendues avec du code réactif en direct pour créer des documents interactifs hautement dynamiques. Ces techniques, illustrées par des exemples tels que des histogrammes et des diagrammes en boîte interactifs, vous permettent d’optimiser les performances tout en offrant une interactivité riche et en temps réel. Expérimentez ces approches pour créer des documents engageants et réactifs avec Quarto Live et WebAssembly.

Explorer d’autres articles

Note

Voici d’autres articles de la même catégorie pour vous aider à approfondir le sujet.