Data and Digital Storytelling Lead @ 360info.org, hosted by Monash University. ❤️ making things for fun and for social good!
Public
Edited
Oct 29, 2024
viewof maxSteps = Inputs.range([2, 6], { value: 3, step: 1 } )
viewof step = Inputs.button(
[
["Forward →", value => value < maxSteps - 1 ? value + 1 : value],
["Reset ↩", () => 0],
], {
value: 0,
id: "buttonPair"
})
Sometimes, we might want a separate button to also advance the counter. In that case, we can use Inputs.bind(), binding to the first in the above pair.
For example, here we bind to a button that also advances the counter (as it is bound to the Forward → button above), but it only appears if we're on the first step — otherwise we hide it entirely:
step == 0 ?
Inputs.bind(
Inputs.button("Get started"),
viewof step[0]) :
md``
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.
