Published
Edited
Aug 14, 2022
2 stars
Shiny... to Observable... to Quarto
shinyinput
viewof shinyinput = {
// instantiate value
let shinyinput = 'NULL'
var svg = d3.select(DOM.svg(width, 100))
.property("value", shinyinput);
///Create bars
svg.selectAll("circles")
.data(['red', 'blue', 'yellow'])
.enter()
.append("circle")
.attr("r", 40)
.attr("cx", function(d,i) { return 60 + (i*100) })
.attr("cy", 50)
.attr("fill", d => colorScale(d))
.attr('stroke', 'black')
.attr('stroke-width', 3)
.attr('data-value', d => d)
.attr('cursor', 'pointer')
// how do I set the dispatch to the value?
// R people: this is like shny.SetInputvalue("shinyinput", shinyInput)
.on("click", (event, d) => {
shinyinput = d
svg.property("value", shinyinput).dispatch("input");
});
return svg.node()
}
colorScale = d3.scaleOrdinal().domain(['red', 'blue', 'yellow']).range(['red', 'blue', 'yellow'])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
