data = FileAttachment("flare.json").json()
viewof selection = treeInput(data)
selection
viewof selection2 = treeInput(data, {
children: (d) => d.children,
name: (d) =>
htl.html`<code style=${{
color: `hsl(${Math.random() * 360}, 50%, 50%)`
}}>${d.name}</code>`,
open: 1,
value: data.children[3]
})
selection2
function treeInput(tree, { name = getName, children = getChildren, open = 0, value = tree } = {}) {
const id = DOM.uid().id;
const form = htl.html`<form style=${{
fontFamily: "var(--sans-serif)",
fontSize: "smaller"
}}>
${inner(tree, { open })}
</form>`;
set(value)();
return form;
function set(value) {
return function () {
form.value = value;
form.dispatchEvent(new Event("input", { bubbles: true }));
};
}
function inner(node, { checked = false, open } = {}) {
const item = htl.html`
<label><input type="radio" name="${id}" checked=${node === value} onInput=${set(node)}>
${name(node)}</label>`;
return node.children?.length
? htl.html`<details open=${Boolean(open)}>
<summary>${item}</summary>
<div style=${{ marginLeft: "24px" }}>
${children(node).map(d => inner(d, {open: open - 1}))}
</div>
</details>`
: htl.html`<div>${item}</div>`;
}
}
getName = (d) => d.name
getChildren = (d) => d.children
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.
