Code
R code
<- iris
irism colnames(irism) <- gsub("[.]","_",tolower(colnames(irism)))
ojs_define(ojsd = irism)
Integrating OJS and R in Quarto
Roy Francis
26-Feb-2025
Convert R data.frame to OJS object. This is the only code chunk that is R. All other chunks are ojs.
Transpose JS object.
Raw JSON object.
Display as table.
Computing a new variable using an arrow function. ...
keeps all old variables and the new variable ratio
is added.
Define checkbox input.
Filter data based on checkbox inputs.
Display filtered data as table.
Display a scatterplot. X and Y axes are defined by select inputs.
Search through a table.
Data wrangling using Arquero.
Import dependencies and convert data to Arquero format.
---
title: ObservableJS in Quarto
subtitle: "Integrating OJS and R in Quarto"
author: "Roy Francis"
date: last-modified
date-format: "DD-MMM-YYYY"
format:
html:
fig-align: left
title-block-banner: true
code-tools: true
code-fold: true
toc: true
---
## Passing data
Convert R data.frame to OJS object. This is the only code chunk that is R. All other chunks are ojs.
```{r}
#| filename: R code
irism <- iris
colnames(irism) <- gsub("[.]","_",tolower(colnames(irism)))
ojs_define(ojsd = irism)
```
Transpose JS object.
```{ojs}
ojsdata = transpose(ojsd)
```
Raw JSON object.
```{ojs}
ojsdata
```
## Table
Display as table.
```{ojs}
viewof raw_table = Inputs.table(ojsdata)
```
Computing a new variable using an arrow function. `...` keeps all old variables and the new variable `ratio` is added.
```{ojs}
ojsdatamod = ojsdata.map(d => ({...d, ratio: d.sepal_width / d.petal_width}))
```
```{ojs}
viewof mod_table = Inputs.table(ojsdatamod)
```
## Checkbox filtering
Define checkbox input.
```{ojs}
viewof grp = Inputs.select(["setosa", "versicolor", "virginica"], {value: ["setosa"], multiple: false, label: "Species"})
```
Filter data based on checkbox inputs.
```{ojs}
ojsdata_filtered = ojsdata.filter(d => d.species.includes(grp))
```
Display filtered data as table.
```{ojs}
viewof filtered_table = Inputs.table(ojsdata_filtered)
```
## Scatterplot
Display a scatterplot. X and Y axes are defined by select inputs.
```{ojs}
viewof x = Inputs.select(Object.keys(ojsdata[0]), {value: "sepal_length", multiple: false, label: "X axis"})
```
```{ojs}
viewof y = Inputs.select(Object.keys(ojsdata[0]), {value: "sepal_width", multiple: false, label: "Y axis"})
```
```{ojs}
Plot.plot({
marks: [
Plot.dot(ojsdata, {
x: x,
y: y,
fill: "species",
title: (d) =>
`${d.species} \n Petal length: ${d.petal_length} \n Sepal length: ${d.sepal_length}`
})
],
grid: true
})
```
## Search
Search through a table.
```{ojs}
viewof ojsdata_filtered_search = Inputs.search(ojsdata,
{
placeholder: "Search for species",
datalist: ojsdata.map(d => d.species),
label: "Search for species: "
})
```
```{ojs}
viewof filtered_search_table = Inputs.table(ojsdata_filtered_search)
```
## Arquero
Data wrangling using Arquero.
Import dependencies and convert data to Arquero format.
```{ojs}
import { aq, op } from '@uwdata/arquero'
ojsdata_aq = aq.from(ojsdata)
ojsdata_aq
.groupby('species')
.filter(p => p.sepal_length > 5)
.rollup({
count: op.count(),
avg_mass: op.average('sepal_length')
})
.view()
```