Examples of using Observable with reactable in Quarto, based on the Observable JS Penguins example from the Quarto documentation.
This is a work in progress, and requires new features in reactable v0.4.0.
Source code: observable-reactable.qmd
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:" } )
Reactable.setFilter('tbl', 'bill_length', billLengthMin)
Reactable.setFilter('tbl', 'island', islands)
// 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) }) })
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(), ] } )