Reaktivität in interaktiven Dokumenten

Einführung

Mit Quarto Live erstellte interaktive Dokumente können nahtlos vorgerenderte statische Inhalte mit reaktivem Live-Code kombinieren. Durch die Verwendung von OJS-Variablen können Sie Daten während der Erstellungszeit vorberechnen und sie dann in Live-Code-Zellen importieren, die auf der Grundlage von Benutzereingaben sofort aktualisiert werden. Dieser hybride Ansatz bietet hohe Leistung und gleichzeitig dynamische Interaktivität.

1. Was ist Reaktivität?

Reaktivität ermöglicht die automatische Aktualisierung Ihres Dokuments, wenn sich Daten oder Eingaben ändern. Indem Sie umfangreiche Berechnungen vorbereiten und als OJS-Variablen exportieren, können Sie diese Werte an interaktive Live-Zellen weitergeben und so kurze Ladezeiten und unmittelbares Feedback gewährleisten.

2. OJS-Variablen in interaktiven Dokumenten verwenden

Reaktive Eingaben mit OJS erstellen

Mit OJS-Blöcken können Sie interaktive Widgets erstellen, die Benutzereingaben erfassen. Der folgende Code definiert beispielsweise eine Checkbox-Eingabe für die Auswahl von Arten und ein Dropdown-Menü für die Auswahl einer Messung aus dem Iris-Datensatz.

Quellcode

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

Ergebnisse

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

Importieren von OJS-Variablen in R-Code-Zellen

Sobald diese OJS-Variablen definiert sind, können sie mit der Option input in R-Codeblöcke importiert werden und ermöglichen so Live-Reaktivität.

Quellcode

reactivity.qmd

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

Ergebnisse

3. Daten vorberechnen und live importieren

Vor-Rendering mit R

Sie können Daten während der Erstellungsphase vorberechnen und sie als OJS-Variable exportieren. Der folgende R-Block berechnet beispielsweise eine Zusammenfassung des mtcars-Datensatzes vor.

library(dplyr)
# Vorberechnung einer Teilmenge von mtcars und Export als OJS-Variable
mpg_data <- mtcars %>% select(mpg, hp) %>% filter(mpg < 25)
ojs_define(mpg_data)

Interaktiver Live-Plot mit vorgerenderten Daten in Python

Importieren Sie anschließend die vorgerenderten Daten in eine interaktive Python-Zelle, um ein Streudiagramm zu erstellen.

Quellcode

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

# Konvertieren der vorgerenderten mpg_data in einen 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()
```

Hinweis

Durch die gemeinsame Nutzung von Daten zwischen den Engines können Sie statische Verarbeitung mit Live-Interaktivität kombinieren.

4. Zusätzliche praktische Beispiele

Interaktives Histogramm mit Live- und vorgerenderten Daten

Dieses Beispiel zeigt ein interaktives Histogramm mit Live-Python-Code, bei dem die Bin-Anzahl durch einen OJS-Schieberegler gesteuert wird.

Quellcode

histogram.qmd

```{webr}
#| input:
#|   - bin_count
# R-Histogramm live
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:" })
```

Ergebnisse

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

Reaktiver Boxplot mit iris-Datensatz

Bei diesem interaktiven Boxplot können die Benutzer eine Irisart und ein Maß für die Anzeige auswählen.

Wichtigste Schritte:

1. Erstellen einer R-Funktion mit reaktiven Eingaben als Argumente
2. Exportieren der Funktion als OJS-Variable

dashboard.qmd

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

do_reactive_boxplot <- function(selected_species, measure) {
  # Filtern des Iris-Datensatzes basierend auf ausgewählten Arten
  filtered_iris <- iris %>% filter(Species %in% selected_species)

  # Erstellen Sie einen interaktiven Boxplot mit dem gewählten Maß
  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)
}
```

Als Nächstes erstellen Sie reaktive OJS-Eingaben für die Auswahl von Arten und Messungen, um die exportierte Funktion do_reactive_boxplot() aufzurufen.

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

Ergebnisse

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

Hinweis

Wenn Sie die Auswahlen in den OJS-Widgets anpassen, wird der Boxplot automatisch aktualisiert.

5. Best Practices für reaktive Dokumente

• Statischen von Live-Code trennen:
  Führen Sie umfangreiche Berechnungen im Voraus durch und exportieren Sie sie als OJS-Variablen, um den Live-Code schlank zu halten.

• Daten-Nutzlast minimieren:
  Exportieren Sie nur die notwendigen Daten, um schnelle Ladezeiten zu gewährleisten.

• Interaktivität testen:
  Überprüfen Sie, ob Änderungen in den OJS-Eingaben korrekt Aktualisierungen in Ihren interaktiven Zellen auslösen.

• Konsolenprotokolle überwachen:
  Prüfen Sie die Entwicklerwerkzeuge des Browsers auf Fehler oder Warnungen während des ersten Ladevorgangs.

Weiterführende Literatur

• Interaktive Code-Blöcke erklärt
  Eintauchen in die Funktionsweise interaktiver Codeblöcke in Quarto Live.
• Laden und Verwenden von Paketen
  Lernen Sie Techniken zur Verwaltung und Installation von Paketen.
• Verwaltung von Ausführungsumgebungen
  Entdecken Sie Methoden zur Steuerung der gemeinsamen Nutzung und Isolierung von Variablen.
• Zellenoptionen-Referenz
  Erkunden Sie erweiterte Konfigurationsoptionen für interaktive Codeblöcke.

Schlussfolgerung

Durch die Nutzung von OJS-Variablen können Sie vorgerenderte Daten mit reaktivem Live-Code mischen, um hochdynamische interaktive Dokumente zu erstellen. Diese Techniken - die anhand von Beispielen wie interaktiven Histogrammen und Boxplots demonstriert werden - ermöglichen es Ihnen, die Leistung zu optimieren und gleichzeitig umfassende Interaktivität in Echtzeit zu bieten. Experimentieren Sie mit diesen Ansätzen, um ansprechende, reaktionsfähige Dokumente mit Quarto Live und WebAssembly zu erstellen.

Weitere Artikel erkunden

Hinweis

Hier finden Sie weitere Artikel aus derselben Kategorie, die Ihnen helfen, tiefer in das Thema einzutauchen.