Senior Software Engineer
elky({
id: "root",
layoutOptions: { algorithm: 'layered' },
children: [
{ id: "n1", label: 'Onboarding', fill: 'red' },
{ id: "n2", label: 'Login Credentials', fill: 'red' },
{ id: "n3", label: 'Goals', fill: 'red' },
{ id: "n4", label: 'Demographic', fill: 'red' },
{ id: "n5", label: 'Black List', fill: 'red' },
{ id: "n6", label: 'White List', fill: 'red' },
{ id: "n7", label: 'Research Top Media:' , fill: 'blue' },
{ id: "n8", label: 'Hashtag ( 5 Accounts )', fill: 'blue' },
{ id: "n9", label: 'Allies ( Latest 3 per Account, if param met )', fill: 'blue' },
{ id: "n10", label: 'Comp ( Latest 3 per Account, if param met )', fill: 'blue' },
{ id: "n11", label: 'Agent Accounts', fill: 'orange' },
{ id: "n12", label: 'Recruit Active Users from: ( Research )', fill: 'orange' },
],
edges: [
{ id: "e1", sources: ["n1"], targets: ["n2"] },
{ id: "e2", sources: ["n1"], targets: ["n3"] },
{ id: "e3", sources: ["n1"], targets: ["n4"] },
{ id: "e4", sources: ["n1"], targets: ["n5"] },
{ id: "e6", sources: ["n1"], targets: ["n6"] },
{ id: "e8", sources: ["n7"], targets: ["n8"] },
{ id: "e9", sources: ["n7"], targets: ["n9"] },
{ id: "e10", sources: ["n7"], targets: ["n10"] },
{ id: "e11", sources: ["n1"], targets: ["n11"] },
{ id: "e11", sources: ["n7"], targets: ["n11"] },
{ id: "e11", sources: ["n11"], targets: ["n12"] },
]
})
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>`;
}
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 await showLayout(await elk.layout(graph));
}
showLayout = async layout => html`
<div style='overflow-x: auto'>
<svg width='${layout.width.toFixed(2)}' height='${layout.height.toFixed(
2
)}' stroke-width="2">
<style>
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
src: url(${await toDataURL(
'https://fonts.gstatic.com/s/ibmplexmono/v5/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2'
)}) format('woff2'), url(${await toDataURL(
'https://rawcdn.githack.com/google/fonts/115c6eb/ofl/ibmplexmono/IBMPlexMono-Regular.ttf'
)}) format('truetype');
}
</style>
${layout.children.map(child)}
${layout.edges.map(edge)}
</svg>
</div>
`
edge = ({ id, sections }) => {
let section = sections[0];
return svg`<g>
<path stroke-linejoin="round" fill='none' stroke='#999' d='M${[
section.startPoint,
...(section.bendPoints || []),
{
y: section.endPoint.y,
x: section.endPoint.x - 4
}
]
.map(({ x, y }) => `${x} ${y}`)
.join('L')}' />
${arrowHead(section.endPoint)}
</g>`;
}
ELK = require('elkjs/lib/elk.bundled.js')
import { toDataURL } from "@mootari/embedding-fonts-into-an-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.
