Computer Graphics & Visualization @ufrj.br
md`This is a range input ${bind(html`<input type=range style="width:80px;">`, viewof apples)}.
This is a number input ${bind(html`<input type=number style="width:80px;">`, viewof apples)}.`
bind(html`<input type=range>`, viewof apples)
viewof apples = new View(3)
new Array(apples + 1).join("🍎")
function bind(input, view) {
const value = ["range", "number"].includes(input.type) ? "valueAsNumber" : "value";
var update;
if (input.type == "file") {
update = () => { };
input.oninput = () => { view.value = input.files };
}
else if (input.type == "radiogroup") {
update = () => { input.setter(view.value) };
input.oninput = () => { view.value = input.getter() };
}
else if (input.type == "checkbox") {
update = () => input.checked = view.value;
input.oninput = () => view.value = input.checked;
}
else {
update = () => input[value] = view.value;
input.oninput = () => view.value = input[value];
}
view.addEventListener("input", update);
disposal(input).then(() => view.removeEventListener("input", update));
return update(), input;
}
md`### Example:`
md `X: ${bindSelect({options:["a","b","c"]}, viewof x)} Y:${bindSliderNumber ({min:0,max:10,step:0.1}, viewof y)}
Z: ${bindCheckbox("z", viewof z)}
W: ${bindRadioGroup ({options:["a","b","c"]}, viewof w)}
S: ${bindCheckGroup ({options:["a","b","c"]}, viewof s)}
F: ${bindFile({multiple:true, accept:".png,.jpg", size:'20em'}, viewof f)}
C: ${bindColor({}, viewof c)}`
viewof c = new View("#ffaa00")
[x,y,z,w,s]
{
const div = html`<div>`;
div.append(html`<h3>Image:</h3>`);
for (var j = 0; j < f.length; j++) {
let file = f[j];
let img = html`<img height="125px" />`
img.src = await Files.url(f[j]);
div.append(img);
}
return div;
}
md`### Imports`
import {View} from "@mbostock/synchronized-views"
import {disposal} from "@mbostock/disposal"
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.
