viewof n = view`<button
type=button
onclick=${e => e.target.value++}
>
Increment
</button>`(0)
n
viewof x = view(DOM.canvas(Math.min(250, width), 33), null, (c) => {
c.style.cursor = "ew-resize";
const ctx = c.getContext("2d");
const rand0_255 = () => Math.floor(Math.random() * 255);
ctx.fillStyle = `rgb(${rand0_255()}, ${rand0_255()}, ${rand0_255()})`;
ctx.fillRect(0, 0, c.width, c.height);
const color = `rgba(${rand0_255()}, ${rand0_255()}, ${rand0_255()}, `;
for (let x = 0; x < c.width; x++) {
ctx.fillStyle = color + x / c.width + ")";
ctx.fillRect(x, 0, 1, c.height);
}
c.addEventListener("mousemove", (e) => (c.value = e.offsetX / c.width));
})
x
view = createHTMLTag((content, value, attach) => {
Object.defineProperty(content, 'value', {
get: () => value,
set: newVal => {
value = newVal;
content.dispatchEvent(new CustomEvent('input'));
}
});
if (attach) {
attach(content);
}
return content;
})
createHTMLTag = create => (...args) =>
Array.isArray(args[0])
? (...opts) => create(html(...args), ...opts)
: create(...args)
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.
