ObservableJS in Quarto

Passing data

Convert R data.frame to OJS object. This is the only code chunk that is R. All other chunks are ojs.

Code

R code

irism <- iris
colnames(irism) <- gsub("[.]","_",tolower(colnames(irism)))
ojs_define(ojsd = irism)

Transpose JS object.

Code

ojsdata = transpose(ojsd)

Raw JSON object.

Code

ojsdata

Table

Display as table.

Code

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.

Code

ojsdatamod = ojsdata.map(d => ({...d, ratio: d.sepal_width / d.petal_width}))

Code

viewof mod_table = Inputs.table(ojsdatamod)

Checkbox filtering

Define checkbox input.

Code

viewof grp = Inputs.select(["setosa", "versicolor", "virginica"], {value: ["setosa"], multiple: false, label: "Species"})

Filter data based on checkbox inputs.

Code

ojsdata_filtered = ojsdata.filter(d => d.species.includes(grp))

Display filtered data as table.

Code

viewof filtered_table = Inputs.table(ojsdata_filtered)

Scatterplot

Display a scatterplot. X and Y axes are defined by select inputs.

Code

viewof x = Inputs.select(Object.keys(ojsdata[0]), {value: "sepal_length", multiple: false, label: "X axis"})

Code

viewof y = Inputs.select(Object.keys(ojsdata[0]), {value: "sepal_width", multiple: false, label: "Y axis"})

Code

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.

Code

viewof ojsdata_filtered_search = Inputs.search(ojsdata,
{ 
  placeholder: "Search for species",
  datalist: ojsdata.map(d => d.species),
  label: "Search for species: "
})

Code

viewof filtered_search_table = Inputs.table(ojsdata_filtered_search)

Arquero

Data wrangling using Arquero.

Import dependencies and convert data to Arquero format.

Code

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

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