Pangram composerNormalize SVG elements to pathsCountry codes and flagsRun buttonReactive tableSimple slider with labelParse sequential datesConvert JavaScript to Observable JavaScriptReactive button stateGenerate copied cellsEt al.Oscillate between two valuesPipeJSON date reviverBlackjack DistanceObject stringificationMemo FetchAutosize margins in PlotTree InputRadial axis ideasiMessagevCard ParserElement InspectorLil OutputGet random point around a boxHello, PrettierMultitouch CirclesPathstuffStructured Text InputsCustom Input ExampleHover sliderColor Ramp 2DGet repeating calendar event datesSuggestD3 Hierarchy to JSONRetabCartogram
How to make a toggle button
viewof playing1 = {
let playing = false;
const node = html`<div><button>Play</button></div>`;
const button = node.querySelector("button");
button.addEventListener("click", function (e) {
node.value = playing = !playing;
node.dispatchEvent(new CustomEvent("input"));
if (playing) {
button.textContent = "Pause";
} else {
button.textContent = "Play";
}
});
node.value = playing;
return node;
}
playing1
viewof playing2 = {
let value = false;
const button = html`<button onclick=${() => set(node, !value)}>`;
const node = html`<div>${button}</div>`;
// Update the display whenever the value changes
Object.defineProperty(node, "value", {
get() {
return value;
},
set(v) {
value = v;
button.textContent = v ? "Pause" : "Play";
}
});
// Set the initial value
node.value = value;
return node;
}
playing2
html`<button onclick=${() => (mutable playing3 = !mutable playing3)}>
${playing3 ? "Pause" : "Play"}`
mutable playing3 = false
import { html } from "@observablehq/inputs"
import { set } from "@observablehq/synchronized-inputs"
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.
