Using Observable with reactable in Quarto

Examples of using Observable with reactable in Quarto, based on the Observable JS Penguins example from the Quarto documentation.

Note

This is a work in progress, and requires new features in reactable v0.4.0.

Source code: observable-reactable.qmd

Using Observable Inputs to filter reactable

viewof billLengthMin = Inputs.range(
  [32, 50], 
  { value: 35, step: 1, label: "Bill length (min):" }
)

viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], label: "Islands:" }
)

data = FileAttachment("palmer-penguins.csv").csv({ typed: true })

filtered = data.filter(penguin => {
  return penguin.bill_length > billLengthMin && islands.includes(penguin.island)
})

// Update table data when filtered data changes
Reactable.setData('tbl', filtered)

Using reactable to filter Observable charts

// Create an Observable value that automatically tracks the table's filtered data
filteredData = Generators.observe(change => {
  return Reactable.onStateChange('tbl-input', state => {
    change(state.sortedData)
  })
})

Penguin body mass by sex and species

Plot.rectY(filteredData, 
  Plot.binX(
    { y: "count" }, 
    { x: "body_mass", fill: "species", thresholds: 20 }
  ))
  .plot({
    facet: {
      data: filteredData,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)