Published
Edited
Apr 1, 2021
ELK = require('elkjs@0.7.1/lib/elk.bundled.js').catch(() => window["ELK"])
elk = new ELK()
laidout = elk.layout({
id: "root",
layoutOptions: { 'elk.algorithm': 'layered' },
children: [
{ id: "n1", width: 30, height: 30 },
{ id: "n2", width: 30, height: 30 },
{ id: "n3", width: 30, height: 30 }
],
edges: [
{ id: "e1", sources: [ "n1" ], targets: [ "n2" ] },
{ id: "e2", sources: [ "n1" ], targets: [ "n3" ] }
]
})
html`<svg width=${laidout.width} height=${laidout.height}>
${laidout.children.map(node => svg`
<rect
width=${node.width}
height=${node.height}
x=${node.x}
y=${node.y}
fill="gray"
/>`)}
${laidout.edges.flatMap(edge => edge.sections.flatMap(section => {
const bends = section.bendPoints || []
const starts = [section.startPoint, ...bends]
const ends = [...bends, section.endPoint]
return starts.map((start, i) =>
svg`
<line x1=${start.x}
y1=${start.y}
x2=${ends[i].x}
y2=${ends[i].y}
stroke="black"
/>
`)}))}
</svg>`
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.
