Public
Edited
Nov 14, 2023
renderNaive(small)
renderNaive = (nodes) => {
nodes = [...nodes].sort(({t: t1}, {t: t2}) => t1 - t2)
const rows = {}
const columns = {}
const firstChildren = {}
let nextColumn = 1
const renderNode = (node) => {
const inheritParentColumn = node.parent && !firstChildren[node.parent]
if (inheritParentColumn) {
columns[node.id] = columns[node.parent]
firstChildren[node.parent] = node.id
} else {
columns[node.id] = nextColumn
nextColumn += 1
}
rows[node.id] = 2 * nodes.length - 2 * node.t - 1
return htl.html.fragment`
<small style="grid-column: 1; grid-row: ${rows[node.id]}; place-self: center; margin: 0.25em;">${node.id}</small>
<div style="grid-column: ${columns[node.id] + 1}; grid-row: ${rows[node.id]}; padding: 0.25em; box-sizing: border-box; width: 1em; height: 1em; border: 2px solid black; border-radius: 50%; background-color: skyblue; display: flex; align-items: center; justify-content: center;">
</div>
${node.parent
? htl.html.fragment`<div title="${node.parent} -> ${node.id}" style="position: relative; display: flex; z-index: -1; padding: 0.5em;grid-row: ${rows[node.id]} / ${rows[node.parent] + 1};grid-column: ${columns[node.parent] + 1} / ${columns[node.id] + 2};">
<div style="box-sizing: content-box; border: 2px solid gray; border-left: none; border-top: none; border-radius: 0.25em; width: 100%; transform: ${firstChildren[node.parent] === node.id ? 'translate(-1px, 0)' : 'translate(1px, 1px)'};" />
</div>`
: null
}
`
}
const items = nodes.map(renderNode)
const grid = htl.html`
<div style="display: flex;">
<div style="display: grid; grid-template: repeat(${nodes.length}, 1em 0.5em) / auto repeat(${nextColumn - 1}, 1em);">
${items}
</div>
</div>
`
return grid
}
small = [
{t: 0, id: 'R'},
{t: 1, id: 'A1', parent: 'R'},
{t: 2, id: 'A2', parent: 'A1'},
{t: 3, id: 'A3', parent: 'A2'},
{t: 4, id: 'A4', parent: 'A3'},
{t: 5, id: 'A5', parent: 'A4'},
{t: 6, id: 'B1', parent: 'A4'},
{t: 7, id: 'B2', parent: 'B1'},
{t: 8, id: 'C1', parent: 'A2'},
{t: 9, id: 'C2', parent: 'C1'},
{t: 10, id: 'B3', parent: 'B2'},
{t: 11, id: 'D1', parent: 'B2'},
{t: 12, id: 'A6', parent: 'A5'},
]
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.
