2c:null 2d:["$","title",null,{"children":"Elk | Tom MacWright | Observable"}] 32:[] 30:{"id":"9d867112d4dcc684","slug":"elk","title":"Elk","thumbnail":"aec3ac65de5ff78c778fa1255ca6161054ebbab7417cfd28112a7e47e374a6e8","access_level":"public","create_time":"$D2019-10-07T20:26:38.331Z","update_time":"$D2020-05-21T20:12:01.045Z","view_time":null,"first_public_time":"$D2019-10-07T21:33:49.142Z","has_unpublished_edits":null,"fork":false,"stars":29,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":308,"publish_version":308,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Elk","cells":[{"id":0,"value":"md`# Elk\n\nA small render on top of [Elkjs](https://github.com/OpenKieler/elkjs), a port of Eclipse’s graph rendering engine, that renders directly to SVG and bakes in a few opinions. It’s easy to change these opinions if you’d like - this is a work in progress and an editable notebook.\n\nUsed for the [Elk Edition of the Notebook Visualizer](https://observablehq.com/@tmcw/notebook-visualizer-elk-edition).\n\n### Features\n\n- Automatically finds a suitable width & height for children if you omit it.\n- Includes [IBM Plex](https://fonts.google.com/specimen/IBM+Plex+Mono?selection.family=IBM+Plex+Mono) for font niceness.\n- Graphs are scrollable if they get too wide.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"elky({\n id: \"root\",\n layoutOptions: { algorithm: 'layered' },\n children: [\n { id: \"n1\", label: 'Oh', fill: 'blue' },\n { id: \"n2\", label: 'Yeah' },\n { id: \"n3\", label: 'Haha' }\n ],\n edges: [\n { id: \"e1\", sources: [\"n1\"], targets: [\"n2\"] },\n { id: \"e2\", sources: [\"n1\"], targets: [\"n3\"] },\n { id: \"e3\", sources: [\"n2\"], targets: [\"n3\"] }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"charMetrics = ({\n width: 8.4,\n height: 21\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"arrowHead = ({ x, y }) =>\n svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"child = ({ label, width, height, x, y, fill = '#000' }) => {\n return svg`\n \n \n ${label}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"elky = async graph => {\n const elk = new ELK();\n\n for (let child of graph.children) {\n if (!child.width) {\n // Add half-line height addition to accept more input nodes\n let inletCompensation =\n Math.max(\n 0,\n graph.edges.filter(edge => edge.targets[0] === child.id).length - 1\n ) *\n charMetrics.height *\n 0.5;\n child.height = charMetrics.height * 1.1 + inletCompensation;\n child.width = charMetrics.width * child.label.length + 10;\n }\n }\n\n return await showLayout(await elk.layout(graph));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"showLayout = async layout => html`\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"edge = ({ id, sections }) => {\n let section = sections[0];\n return svg`\n \n ${arrowHead(section.endPoint)}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"ELK = require('elkjs/lib/elk.bundled.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"import { toDataURL } from \"@mootari/embedding-fonts-into-an-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"