viewof checkbox1 = checkbox({label: object.message, fill: object.fill, size: object.size})
viewof checkbox2 = checkbox({label: object.message2, fill: object.fill, size: object.size}, false)
viewof checkbox3 = checkbox({label: "Here's the API.",
fill: `hsl(${object.hue},100%,50%)`,
size: 24},
true, // initial value, checked == true
width / 2) // width
[checkbox1, checkbox2, checkbox3]
function checkbox(object, initialize = true, width = 300) {
const checkbox = html`<svg width="${width}" height="64" viewbox="0 0 ${width} 64"
style="width:100%;max-width:${width}px;height:auto;display:block;background:#fff; cursor:pointer;">
<rect x="0" y="0" width="${width}" height="64" rx="4" style="fill:#333;"></rect>
<rect x="14" y="14" width="36" height="36" style="fill:#eee;"></rect>
<path d="M18,32L29,44L46,18" style="stroke:#000; stroke-width:6; fill:none; stroke-linecap:round;"></path>
${Object.assign(svg`<text x="50%" y="50%" dy=".35em" text-anchor="middle" style="user-select: none; white-space: pre;" fill="${object.fill}" font-size="${object.size}">`,
{ textContent: object.label })}
</svg>`
const check = checkbox.getElementsByTagName("path")[0];
checkbox.value = initialize; // typeof initialize == 'undefined' ? true : initialize;
check.style.visibility = checkbox.value ? 'visible' : 'hidden';
checkbox.onclick = () => {
checkbox.value = !checkbox.value;
check.style.visibility = checkbox.value ? 'visible' : 'hidden';
checkbox.dispatchEvent(new CustomEvent("input"));
};
return checkbox;
}
import {form} from "@mbostock/form-input"
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.
