Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 1, 2022
6 forks
Importers
104 stars
viewof object = form(html`<form>
<div><label><input name="message" type="text" value="Hello, form!"> <i>message</i></label></div>
<div><label><input name="hue" type="range" min=0 max=360> <i>hue</i></label></div>
<div>
<label><input name="size" type="radio" value="12"> <i>small</i></label>
<label><input name="size" type="radio" value="24" checked> <i>medium</i></label>
<label><input name="size" type="radio" value="48"> <i>large</i></label>
</div>
<div>
<label>
<select name="emojis" multiple size="3">
<option value="🍎">🍎</option>
<option value="🔥">🔥</option>
<option value="🐙">🐙</option>
</select>
<i>emojis</i></label>
</div>
</form>`)
object
html`<svg
width="640"
height="64"
viewBox="0 0 640 64"
style="width:100%;max-width:640px;height:auto;display:block;background:#333;"
>
${Object.assign(
svg`<text
x="50%"
y="50%"
text-anchor="middle"
dy="0.35em"
fill="hsl(${object.hue},100%,50%)"
font-size="${object.size}"
>`,
{
textContent: `${object.message} ${object.emojis.join(" ")}`
}
)}
</svg>`
function form(form) {
const container = html`<div>${form}`;
form.addEventListener("submit", event => event.preventDefault());
form.addEventListener("change", () => container.dispatchEvent(new CustomEvent("input")));
form.addEventListener("input", () => container.value = formValue(form));
container.value = formValue(form);
return container
}
function formValue(form) {
const object = {};
for (const input of form.elements) {
if (input.disabled || !input.hasAttribute("name")) continue;
let value = input.value;
switch (input.type) {
case "range":
case "number": {
value = input.valueAsNumber;
break;
}
case "date": {
value = input.valueAsDate;
break;
}
case "radio": {
if (!input.checked) continue;
break;
}
case "checkbox": {
if (input.checked) value = true;
else if (input.name in object) continue;
else value = false;
break;
}
case "file": {
value = input.multiple ? input.files : input.files[0];
break;
}
case "select-multiple": {
value = Array.from(input.selectedOptions, option => option.value);
break;
}
}
object[input.name] = value;
}
return object;
}
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.
