29:null 2a:["$","title",null,{"children":"Elk | Alan Kang | Observable"}] 2f:[] 2d:{"id":"712d2c2151c7aed4","slug":"elk","title":"Elk","thumbnail":"d7499698e09b258d653cf37bd6fdabf726e2107c7f3d0803dcf2855a1d96ec46","access_level":"public","create_time":"$D2025-06-17T02:13:26.303Z","update_time":"$D2026-08-26T03:55:25.655Z","view_time":null,"first_public_time":"$D2025-06-17T02:17:06.393Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d3839238eae2fb1b","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":"starter_2024"},"version":47,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b68a5a7082b1642e","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":null}],"members":[{"type":"individual","id":"b68a5a7082b1642e","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":null,"role":"editor"},{"type":"team","id":"d3839238eae2fb1b","login":"akngs","name":"Alan Kang","avatar_url":"https://avatars-next.observableusercontent.com/506c1d585ef2c8c9c159415d412ed2aef6ba6cd239f6448b72109f691e01e942","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Elk","cells":[{"id":0,"value":"# Elk","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`# Elk\n\n- Almost exact copy of https://observablehq.com/@tmcw/elk\n- Just added YAML support\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"yelky(`\nlayoutOptions:\n elk.direction: DOWN\nchildren:\n - 오직 수단으로만 취급하나?\n - 직접 피해를 입히나?\n - 간접 피해를 입히나?\n - 다른 이의 억압 경험을 비유로 사용하나?\n - 종합적으로 긍정적 영향이 월등히 큰가?\n - id: 위험!\n fill: red\n - id: 어쩌면 오케이\n fill: blue\nedges:\n - 오직 수단으로만 취급하나?-Yes-위험!\n - 오직 수단으로만 취급하나?-No-직접 피해를 입히나?\n - 직접 피해를 입히나?-Yes-위험!\n - 직접 피해를 입히나?-No-간접 피해를 입히나?\n - 간접 피해를 입히나?-Yes-위험!\n - 간접 피해를 입히나?-No-다른 이의 억압 경험을 비유로 사용하나?\n - 다른 이의 억압 경험을 비유로 사용하나?-Yes-위험!\n - 다른 이의 억압 경험을 비유로 사용하나?-No-종합적으로 긍정적 영향이 월등히 큰가?\n - 종합적으로 긍정적 영향이 월등히 큰가?-Yes-위험!\n - 종합적으로 긍정적 영향이 월등히 큰가?-No-어쩌면 오케이\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"function yelky(rawYaml) {\n const obj = jsyaml.load(rawYaml) || {}\n\n // inject default id\n obj.id = obj.id || 'root'\n \n // inject defaults for children\n obj.children = (obj.children || []).map(e => {\n if(typeof(e) === 'string') e = {id: e}\n\n return {\n ...e,\n label: e.label || e.id\n }\n })\n \n // inject defaults for edges\n let nextId = 0\n obj.edges = (obj.edges || []).map(e => {\n if(typeof(e) === 'string') {\n const [_, rawSource, text, rawTarget] = e.match(/^(.+?)-(.+?)?-(.+?)$/)\n e = {\n sources: [rawSource],\n targets: [rawTarget],\n labels: [text ? {text} : {}]\n }\n }\n \n return {\n ...e,\n id: e.id || `_edge_${nextId++}`\n }\n })\n\n return elky(obj)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"child = ({ label, width, height, x, y, fill = '#000' }) => {\n return svg`\n \n \n ${label}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"elky = async graph => {\n const elk = new ELK();\n const textHeight = 20\n\n for (let child of graph.children) {\n if (child.width) continue\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 textHeight *\n 0.5;\n child.height = textHeight * 1.1 + inletCompensation;\n child.width = textSize(child.label) + 10;\n }\n \n for (let edge of graph.edges) {\n for (let label of edge.labels) {\n if (label.width) continue\n label.height = textHeight * 1.1;\n label.width = textSize(label.text) + 10;\n }\n }\n return showLayout(await elk.layout(graph));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"showLayout = layout => html`\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"edge = ({sections, labels}) => {\n const section = sections[0];\n const label = labels[0];\n\n return svg`\n \n \n ${label.text || ''}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"function textSize(text) {\n return ctx.measureText(text).width|0\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"ctx = {\n const ctx = DOM.context2d(1000, 30)\n ctx.font = `${fontSize}px ${fontFamily}`;\n return ctx\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"fontFamily = 'sans-serif'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"fontSize = 14","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"jsyaml = require('js-yaml@4.1.0/dist/js-yaml.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"ELK = require('elkjs/lib/elk.bundled.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"