viewof count = Inputs.button("Add one")
count
{
const node = htl.html`<strong style=${{opacity: Math.min(count, 1)}}>Clicked!</strong>`;
d3.select(node).transition().duration(1000).style("opacity", 0);
return node;
}
<button onclick=${() => mutable time = new Date().toLocaleTimeString("en-US")}>Set time</button>
mutable time = null
viewof state = stateButton("Kick the ball")
state
{
let x = 10;
while (true) {
yield htl.svg`<svg width=${width} height="20">
<circle cx=${x} cy="10" r="9" stroke="black" fill=${state.hovering ? "black" : "none"}></circle>
</svg>`
if (state.clicking) x++;
}
}
viewof state2 = stateButton("Click me")
mutable hasBeenClicked = false
{
if (state2.clicking) mutable hasBeenClicked = true;
}
viewof state3 = stateButton("Kick the ball")
mutable x = 10;
{
while (true) {
if (state3.clicking) mutable x = (mutable x + 1) % width;
yield undefined;
}
}
<svg width=${width} height="20">
<circle cx=${x} cy="10" r="9" stroke="black" fill=${state3.hovering ? "black" : "none"}></circle>
</svg>
colors = ["red", "green", "blue"]
viewof color = Inputs.button("Change color", {
value: colors[0],
reduce: (d) => colors[(colors.indexOf(d) + 1) % colors.length]
})
color
viewof x2 = Inputs.button("Kick the ball", {
value: 10,
reduce: (d) => (d + 10) % width
})
<svg width=${width} height="20">
<circle cx=${x2} cy="10" r="9" stroke="black" fill="none"></circle>
</svg>
stateButton = (label) => {
const node = htl.html`<div><button>${label}</button></div>`;
const button = node.querySelector("button");
const state = { hovering: false, clicking: false };
set(node, state);
button.addEventListener("pointerdown", setState({clicking: true}));
button.addEventListener("pointerup", setState({clicking: false}));
button.addEventListener("mouseenter", setState({hovering: true}));
button.addEventListener("mouseleave", setState({hovering: false, clicking: false}));
function setState(newState) {
return function() {
Object.assign(state, newState);
set(node, state);
}
}
return node;
}
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
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.
