Wise Fool.
Visioneer.
viewof mies = {
const value = [0, 0, 0, 0, 0]
const color = (c) => d3.schemeCategory10[c % d3.schemeCategory10.length];
const createButton = (v, i) => {
const x = i * 50, y = 0;
const text = svg`<text dy=5 style="text-anchor:middle; fill:white; font-family:monospace; font-weight:999;">${v}</text>`;
const button = svg`<g transform="translate(${x} ${y})" style="opacity:.3;"><circle r="20"/>${text}</g>`;
button.onmouseenter = () => {
button.style.fill = color(v);
button.style.opacity = 1;
value[i] = ++v;
text.textContent = v;
view.dispatchEvent(new CustomEvent("input"));
};
button.onmouseleave = () => {
button.style.opacity = .3;
};
return button;
};
const view = svg`<svg width="${width}" height="${width/16*2}" viewBox="-20 -10 600 50">${value.map(createButton)}</svg>`;
view.value = value;
return view;
}
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.
