The end-to-end solution for building and hosting better data apps, dashboards, and reports.
viewof x = Inputs.range([0,1])
x
viewof message = Inputs.text({placeholder: "Say hello"})
message
viewof color = Inputs.select(["red", "orange", "yellow", "green", "blue", "violet"], {value: "green"})
color
point
stroke
viewof silly = {
const element = htl.html`<div>I am a silly view!</div>`;
element.value = "I am a silly value.";
return element;
}
silly
explicitView = Inputs.range([0,100])
explicitValue = Generators.input(explicitView)
md `The value of *x* is ${viewof x.value}.`
viewof count = {
const element = html`<div style="display: inline-block; font-size: 64px; user-select: none;">🤪</div>`;
element.value = 0;
element.onmousedown = () => {
element.style.transition = "none";
element.style.transform = `scale(1.5) rotate(${Math.random() * 90 - 45}deg)`;
};
element.onclick = () => {
++element.value;
element.dispatchEvent(new Event("input", {bubbles: true}));
requestAnimationFrame(() => {
element.style.transition = "transform 250ms ease";
element.style.transform = "inherit";
});
};
return element;
}
count
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.
