Computer Graphics & Visualization @ufrj.br
Published
Edited
Aug 3, 2021
Importers
function color(options = {}) {
let { value = "#FF0000", label = "" } = options;
let inp = html`<input type=color value=${value} style=""/>`;
let div = html`<form style="--length1: 3.25px;--length2: 6.5px;--length3: 13px;--label-width: 120px;--input-width: 240px;font: 13px/1.2 var(--sans-serif);display:flex;flex-wrap:nowrap;width:360px;min-height: 25.5px;align-items:center;">
<label style="flex-shrink: 0; align-self: start;padding: 5px 0 4px 0; width: var(--label-width); margin-right: var(--length2);">${label} </label>
<div style="align-items:center;display:flex;width:100%;">
${inp}
</div>
</form>`;
let cb = (e) => {
div.value = inp.value;
div.dispatchEvent(new Event("input"));
};
inp.oninput = cb;
cb();
return div;
}
html`<div>${Inputs.range([1, 10], { label: "Some range input" })}
${color({ label: "Background" })}</div>`
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.
