Published
Edited
May 26, 2022
2 forks
26 stars
Insert cell
Insert cell
Insert cell
viewof replay = Inputs.button("Replay")
Insert cell
progress = {
replay;
const width = 360;
const height = 20;
const context = DOM.context2d(width, height);
context.canvas.style.border = "solid 1px black";
for (let i = width; i >= 0; --i) {
context.clearRect(0, 0, width, height);
context.fillRect(0, 0, i, height);
yield context.canvas;
}
}
Insert cell
Insert cell
viewof clicks = Inputs.button("Click me")
Insert cell
clicks
Insert cell
md`You have clicked ${clicks.toLocaleString("en")} times.`
Insert cell
Insert cell
viewof time = Inputs.button("Update", {value: null, reduce: () => new Date})
Insert cell
time
Insert cell
Insert cell
Insert cell
viewof counter = Inputs.button([
["Increment", value => value + 1],
["Decrement", value => value - 1],
["Reset", value => 0]
], {value: 0, label: "Counter"})
Insert cell
counter
Insert cell
Insert cell
viewof x = Inputs.button()
Insert cell
Insert cell
viewof y = Inputs.button(html`<i>Fancy</i>`)
Insert cell
Insert cell
viewof confirm = Inputs.button("OK", {label: "Continue?"})
Insert cell
confirm ? md`Confirmed!` : md`Awaiting confirmation…`
Insert cell
Insert cell
Inputs.button("copy to clipboard", {value: null, reduce: () => navigator.clipboard.writeText(time)})
Insert cell

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.
Learn more