Reatividade em documentos interativos

Introdução

Os documentos interativos criados com o Quarto Live podem combinar perfeitamente o conteúdo estático pré-renderizado com o código reativo ao vivo. Com o uso de variáveis OJS, é possível pré-computar dados durante o tempo de compilação e, em seguida, importá-los para células de código ativo que são atualizadas instantaneamente com base nas entradas do usuário. Essa abordagem híbrida oferece alto desempenho ao mesmo tempo em que proporciona interatividade dinâmica.

1. O que é reatividade?

A reatividade permite que seu documento seja atualizado automaticamente quando os dados ou as entradas são alterados. Ao pré-renderizar cálculos pesados e exportá-los como variáveis OJS, você pode passar esses valores para células interativas ativas, garantindo tempos de carregamento rápidos e feedback imediato.

2. Uso de variáveis OJS em documentos interativos

Criação de entradas reativas com OJS

Os blocos OJS permitem a criação de widgets interativos que capturam a entrada do usuário. Por exemplo, o código a seguir define uma entrada de caixa de seleção para selecionar espécies e um menu suspenso para escolher uma medida do conjunto de dados da íris.

Código-fonte

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

Importação de variáveis OJS para células de código R

Uma vez definidas, essas variáveis OJS podem ser importadas para blocos de código R usando a opção input, permitindo a reatividade ao vivo.

Código-fonte

reactivity.qmd

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

Resultados

3. Pré-renderização de dados e importação em tempo real

Pré-renderização com R

Você pode pré-computar dados durante a fase de construção e exportá-los como uma variável OJS. Por exemplo, o bloco R a seguir pré-renderiza um resumo do conjunto de dados mtcars.

library(dplyr)
# Pré-computar um subconjunto de mtcars e exportar como uma variável OJS
mpg_data <- mtcars %>% select(mpg, hp) %>% filter(mpg < 25)
ojs_define(mpg_data)

Gráfico interativo ao vivo usando dados pré-renderizados em Python

Em seguida, importe os dados pré-renderizados em uma célula interativa Python para criar um gráfico de dispersão.

Código-fonte

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

# Converta os dados mpg_data pré-renderizados em um 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

Esse compartilhamento de dados entre mecanismos permite combinar processamento estático com interatividade ao vivo.

4. Exemplos práticos adicionais

Histograma interativo com dados ao vivo e pré-renderizados

Este exemplo demonstra um histograma interativo usando código Python em tempo real, com a contagem de compartimentos controlada por um controle deslizante OJS.

Código-fonte

histogram.qmd

```{webr}
#| input:
#|   - bin_count
# Histograma em tempo real em R
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 reativo com conjunto de dados iris

Esse boxplot interativo permite que os usuários selecionem espécies de íris e uma medida a ser exibida.

Etapas principais:

1. Crie uma função R usando entradas reativas como argumentos
2. Exportar a função como uma variável OJS

dashboard.qmd

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

do_reactive_boxplot <- function(selected_species, measure) {
  # Filtrar o conjunto de dados da íris com base nas espécies selecionadas
  filtered_iris <- iris %>% filter(Species %in% selected_species)

  # Crie um boxplot interativo usando a medida escolhida
  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)
}
```

Em seguida, crie entradas reativas do OJS para seleção de espécies e medidas para invocar a função 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

À medida que você ajusta as seleções nos widgets OJS, o boxplot é atualizado automaticamente.

5. Práticas recomendadas para documentos reativos

• Separar código estático de código ativo:
  Faça a pré-renderização de cálculos pesados e exporte-os como variáveis OJS para manter o código ao vivo leve.

• Minimizar a carga útil de dados:
  Exporte somente os dados necessários para garantir tempos de carregamento rápidos.

• Teste a interatividade:
  Valide se as alterações nas entradas do OJS acionam corretamente as atualizações em suas células interativas.

• Monitorar os registros do console:
  Verifique se há erros ou avisos nas ferramentas de desenvolvedor do navegador durante o carregamento inicial.

Leitura adicional

• Blocos de código interativo explicados
  Veja como os blocos de código interativos funcionam no Quarto Live.
• Carregando e usando pacotes
  Aprenda técnicas para gerenciar e instalar pacotes.
• Gerenciando ambientes de execução
  Descubra métodos para controlar o compartilhamento e o isolamento de variáveis.
• Referência de opções de células
  Explore opções avançadas de configuração para blocos de código interativos.

Conclusão

Ao aproveitar as variáveis do OJS, você pode combinar dados pré-renderizados com código ativo e reativo para criar documentos interativos altamente dinâmicos. Essas técnicas - demonstradas por meio de exemplos como histogramas interativos e boxplots - permitem otimizar o desempenho e, ao mesmo tempo, oferecer interatividade rica e em tempo real. Experimente essas abordagens para criar documentos envolventes e responsivos com o Quarto Live e o WebAssembly.

Explore mais artigos

Nota

Aqui estão mais artigos da mesma categoria para ajudá-lo a se aprofundar no tópico.