Web developer and autodidact with an interest in creative coding.
function mergeInputs(inputs, target = {}) {
const props = Object.fromEntries(Object.entries(inputs).map(([key, input]) => [key, {
enumerable: true,
configurable: true,
get: () => input.value,
set: value => input.value = value,
}]));
return Object.defineProperties(target, props);
}
valueObject
viewof valueObject = {
const inputs = {
n: Range([1, 30], {value: 19, step: 1, label: "size" }),
a: Range([0, 45], {value: 27.5, step:.1, label: "angle" }),
x: Range([-100, 100], {value: 0, step: 1, label: "x offset" }),
y: Range([-100, 100], {value: 0, step: 1, label: "y offset" }),
};
const view = html`<div>${Object.values(inputs)}`;
view.value = mergeInputs(inputs);
return view;
}
valueNestedObject
viewof valueNestedObject = {
const group1 = {
n: Range([1, 30], {value: 19, step: 1, label: "size" }),
a: Range([0, 45], {value: 27.5, step:.1, label: "angle" }),
};
const group2 = {
x: Range([-100, 100], {value: 0, step: 1, label: "x offset" }),
y: Range([-100, 100], {value: 0, step: 1, label: "y offset" }),
};
const fieldset = (l, c) => html`<fieldset><legend>${l}</legend>${c}`;
const view = html`<div style="display:flex;font-family:var(--sans-serif)">
${fieldset('Group 1', Object.values(group1))}
${fieldset('Group 2', Object.values(group2))}
`;
view.value = mergeInputs({
group1: {value: mergeInputs(group1)},
group2: {value: mergeInputs(group2)},
});
return view;
}
valueArray
viewof valueArray = {
const inputs = [
Range([1, 30], {value: 19, step: 1}),
Range([0, 45], {value: 27.5, step:.1}),
Range([-100, 100], {value: 0, step: 1}),
];
const view = html`<div>${inputs}`;
view.value = mergeInputs(inputs, []);
return view;
}
valueNestedArray
viewof valueNestedArray = {
const inputs = [
[
Num([1, 30], {value: 1, step: 1}),
Num([1, 30], {value: 2, step: 1}),
],
[
Num([1, 30], {value: 3, step: 1}),
Num([1, 30], {value: 4, step: 1}),
]
];
const view = html`<div>${inputs[0]}<br>${inputs[1]}`;
view.value = mergeInputs(inputs.map(arr => ({value: mergeInputs(arr, [])})), []);
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.
