elky({
id: "root",
layoutOptions: { 'elk.algorithm': 'layered' },
children: [
{ id: "n1", label: 'THREE', fill: 'blue' },
{ id: "n2", label: 'Yeah' },
{ id: "n3", label: 'B' }
],
edges: [
{ id: "e1", sources: ["n1"], targets: ["n2"] },
{ id: "e2", sources: ["n1"], targets: ["n3"] },
{ id: "e3", sources: ["n2"], targets: ["n3"] }
]
})
plex = html`<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,600&display=swap" rel="stylesheet">`
charMetrics = ({
width: 8.4,
height: 21
})
arrowHead = ({ x, y }) =>
svg`<path d="M 0 0 L 3 3 L 0 6Z" fill="#999" transform='translate(${x -
6}, ${y - 3})' />`
child = ({ label, width, height, x, y, fill = '#000' }) => {
return svg`<g transform='translate(${x}, ${y})' style='color:${fill}'>
<rect width='${width}' height='${height}' fill='currentColor' rx="3" opacity="0.15" />
<g transform='translate(5, ${1 + height / 2})'>
<text alignment-baseline='middle' style='font-family:IBM Plex Mono;font-size: 14px;' fill='currentColor'>${label}</text>
</g>
</g>`;
}
charMetrics.height
elky = async graph => {
const elk = new ELK();
for (let child of graph.children) {
if (!child.width) {
// Add half-line height addition to accept more input nodes
let inletCompensation =
Math.max(
0,
graph.edges.filter(edge => edge.targets[0] === child.id).length - 1
) *
charMetrics.height *
0.5;
child.height = charMetrics.height * 1.1 + inletCompensation;
child.width = charMetrics.width * child.label.length + 10;
}
}
return showLayout(await elk.layout(graph));
}
showLayout = layout => html`
${plex}
<div style='overflow-x: auto' id='comPath'>
<svg width='${layout.width.toFixed(2)}' height='${layout.height.toFixed(2)}'>
${layout.children.map(child)}
${layout.edges.map(edge)}
</svg>
</div>
`
dpt = ({ x, y }) => `${x} ${y}`
edge = ({ id, sections }) => {
let section = sections[0];
return svg`<g>
<path stroke-linejoin="round" fill='none' stroke-width='2' stroke='#999' d='M${[
section.startPoint,
...(section.bendPoints || []),
{
y: section.endPoint.y,
x: section.endPoint.x - 4
}
]
.map((pt, i, pts) => {
if (i === pts.length) return dpt(pt);
return dpt(pt);
})
.join('L')}' />
${arrowHead(section.endPoint)}
</g>`;
}
ELK = require('elkjs/lib/elk.bundled.js')
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.
