ObservableJS in Quarto

1 Passing data

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

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

Transpose JS object.

ojsdata = transpose(ojsd)

Raw JSON object.

ojsdata

2 Table

Display as table.

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.

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

viewof mod_table = Inputs.table(ojsdatamod)

3 Checkbox filtering

Define checkbox input.

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

Filter data based on checkbox inputs.

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

Display filtered data as table.

viewof filtered_table = Inputs.table(ojsdata_filtered)

4 Scatterplot

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

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

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

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

5 Search

Search through a table.

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

viewof filtered_search_table = Inputs.table(ojsdata_filtered_search)

6 Arquero

Data wrangling using Arquero.

Import dependencies and convert data to Arquero format.

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