29:null 2a:["$","title",null,{"children":"Sofi SVG | marpie1 | Observable"}] 2f:T429,function edgeLabel({tail, head, showDebug=true}) { let {sin, cos, atan2, PI} = Math let { headnode, tailnode, edgename, edgewidth, slope, p, t, h, m, c } = edgeConstructions({tail, head}) let x = t.x+cos(t.angle)*25 + cos(p)*4 let y = t.y+sin(t.angle)*25 + sin(p)*4 let summary, angle, labelstyles let described = edgeDescription.hasOwnProperty(edgename) let summarystyles = described ? "color: #black; font-weight: bold;" : "color: #999;" if (h.x - t.x > 0 /* arrow runs left to right */) { summary = `${tail} → ${head}` angle = slope labelstyles = `text-align: left;` } else { /* arrow runs right to left */ summary = `${head} ← ${tail}` angle = slope+PI labelstyles = `text-align: right;` } return html`

${summary}

` }30:T43c,function edgeConstructions({tail, head}) { let edgename = `${tail}->${head}` let bold = !!edgeDescription[edgename] || !!edgeStatus[edgename] let {sin, cos, atan2, PI} = Math let headnode = nodes.find(({n}) => +n == +head) let tailnode = nodes.find(({n}) => +n == +tail) let slope = atan2((headnode.y-tailnode.y),(headnode.x-tailnode.x)) let p /* perpendicular */ = slope + PI/2 let h = {angle: slope-nudge} let edgewidth = bold ? 4 : 1 let dtip = radius+3 let dtail = dtip + 8 + edgewidth h.x = headnode.x-cos(h.angle)*(dtip) // tip of arrow h.y = headnode.y-sin(h.angle)*(dtip) h.ax = headnode.x-cos(h.angle)*(dtail) // tail of arrow h.ay = headnode.y-sin(h.angle)*(dtail) let t = {angle: slope+nudge} t.x = tailnode.x+cos(t.angle)*(radius + 3) t.y = tailnode.y+sin(t.angle)*(radius + 3) let m /*midpoint*/ = {x: t.x+(h.ax - t.x)/2, y: t.y+(h.ay - t.y)/2} let c /*quadratic bezier control*/ = {x: cos(p)*bend+m.x, y: sin(p)*bend+m.y} return { headnode, tailnode, edgename, edgewidth, slope, p, t, h, m, c } }31:T90e,labelIO = { const div = html`

Save / Load Labels

`; div.querySelector("#exportBtn").onclick = () => { const json = JSON.stringify(nodeLabels, null, 2); const blob = new Blob([json], {type: "application/json"}); const a = Object.assign(document.createElement("a"), { href: URL.createObjectURL(blob), download: "sofi-labels.json" }); a.click(); div.querySelector("#msg").textContent = "Exported!"; setTimeout(() => div.querySelector("#msg").textContent = "", 2000); }; div.querySelector("#importBtn").onclick = () => div.querySelector("#fileInput").click(); div.querySelector("#fileInput").onchange = e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = ev => { try { const data = JSON.parse(ev.target.result); const form = document.querySelector("form"); Object.entries(data).forEach(([key, val]) => { const input = document.querySelector(`input[name="${key}"]`); if (input) { input.value = val; input.dispatchEvent(new Event("input", {bubbles: true})); } }); div.querySelector("#msg").textContent = "Labels loaded!"; setTimeout(() => div.querySelector("#msg").textContent = "", 2000); } catch(err) { div.querySelector("#msg").textContent = "Error: invalid JSON"; } }; reader.readAsText(file); }; return div; }32:[] 2d:{"id":"61f8d1bb350537e3","slug":null,"title":"Sofi SVG","thumbnail":"a067de2d159a79a40dfab108ce84b3bc56746f080d9ad3955c8aab758c9e36ca","access_level":"public","create_time":"$D2021-11-07T18:37:32.771Z","update_time":"$D2026-02-24T00:59:14.503Z","view_time":null,"first_public_time":"$D2026-02-24T00:03:42.699Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"215726a2bb46ced2","login":"marpie1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e0f59031f73269823bf208dba1a4e49a8cabc56a58ebc41e7c79b6c9c082ae70","tier":"starter_2024"},"version":1021,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fecf05fe0b23ce5f","login":"marpie1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e0f59031f73269823bf208dba1a4e49a8cabc56a58ebc41e7c79b6c9c082ae70","tier":null}],"members":[{"type":"individual","id":"fecf05fe0b23ce5f","login":"marpie1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e0f59031f73269823bf208dba1a4e49a8cabc56a58ebc41e7c79b6c9c082ae70","tier":null,"role":"editor"},{"type":"team","id":"215726a2bb46ced2","login":"marpie1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e0f59031f73269823bf208dba1a4e49a8cabc56a58ebc41e7c79b6c9c082ae70","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"f498645fd1d4247c","reply_to_id":null,"content":"HAHAHAHA, I see what you did there. Shouldn't node S-1 be on the top and S-10 be on the bottom?","create_time":"$D2026-02-26T03:43:15.747Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Sofi SVG","cells":[{"id":0,"value":"# Sofi SVG\nSee wiki","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"main = diagram(detail)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"detail = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":815,"value":"md`# Example Detail View`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"detailView = diagram(\"DEVELOPMENT\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"md`# Status\nEach participant constructs their own assessment of the different elements and relationships in the diagram. It is likely the labels need to be settled before people can meaningfully assess status. But complex conversations sometimes also call for re-wording of labels as assessments are attempted and better understood.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"nodeStatus = ({\n \"S-1\": \"unsure\",\n \"S-2\": \"unsure\",\n \"S-3\": \"go\",\n \"S-4\": \"caution\",\n \"S-5\": \"\",\n \"S-6\": \"\",\n \"S-7\": \"\",\n \"S-8\": \"\",\n \"S-9\": \"\",\n \"S-10\": \"\",\n \"S-11\": \"\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"edgeStatus = ({\n \"1->2\": \"agree\",\n \"2->1\": \"agree\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"md`# Labels\nnodeLabels() and edgeDescriptions() change words and phrases drawn in the diagram. A group of people developing a shared understanding through discussing this diagram will need to agree on the words and metaphors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"viewof nodeLabels = Inputs.form({\n \"S-1\": Inputs.text({label: \"S-1\", value: \"CUSTOMER\"}),\n \"S-2\": Inputs.text({label: \"S-2\", value: \"STAFFING\"}),\n \"S-3\": Inputs.text({label: \"S-3\", value: \"STRUCTURE\"}),\n \"S-4\": Inputs.text({label: \"S-4\", value: \"SALES\"}),\n \"S-5\": Inputs.text({label: \"S-5\", value: \"DEVELOPMENT\"}),\n \"S-6\": Inputs.text({label: \"S-6\", value: \"OPERATIONS\"}),\n \"S-7\": Inputs.text({label: \"S-7\", value: \"RESOURCES\\n(FINANCE)\"}),\n \"S-8\": Inputs.text({label: \"S-8\", value: \"STRATEGY\"}),\n \"S-9\": Inputs.text({label: \"S-9\", value: \"MARKETING\"}),\n \"S-10\": Inputs.text({label: \"S-10\", value: \"LEADERSHIP\"}),\n \"S-11\": Inputs.text({label: \"S-11\", value: \"CULTURE\"})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"edgeDescription = ({\n \"1->2\": \"Residents and visitors can easily get the help they need when they need it.\",\n \"2->1\": \"Our staff are customer focused.\",\n \"3->1\": \"Our Community infrastructure has systems in place to gather feedback from residents and visitors.\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"md`# Color\nnodeColor and edgeColor do two things. First, the words on the left side of the colons (:) ennumerate the meaningful names used to assess the status of nodes and of edges. Second, the words on the right side of the colons are HTML color names used to color the elements in the diagram. The emotional quality of the assessments want to match the emotional quality of the chosen colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"nodeColor = ({\n \"unsure\": \"lightblue\",\n \"stop\": \"pink\",\n \"caution\": \"lightyellow\",\n \"go\": \"palegreen\",\n \"default\": \"white\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"edgeColor = ({\n \"agree\": \"palegreen\",\n \"disagree\": \"pink\",\n \"unknown\": \"lightblue\",\n \"default\": \"lightgrey\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"color = name => {\n return data.find(d => d.name == name).color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"---\nThe elements below, which make up the main diagram, are organized in small parts. Minimal explanations are offered—you'll have to study to the source code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":833,"value":"`data` got into this shape as we were making the detail view work. The goal: let an export of the diagram choose which detail to view by setting `detail`. There, in the exported detail view, participants can assess individual elements of the diagram.\n\nI feel sure that `data`, `nodes`, `edges`, and the various configurations want to be restructured. However, at the time of this writing, I'm too close to this code to see what's wanted. I choose to defer that work now. Perhaps my future self will see with fresh eyes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":632,"value":"data = {\n let r = radius + space/3\n return [\n ...nodes.map(({n, x, y}) => {\n let type = \"node\"\n let name = `S-${n}`\n let title = nodeLabels[name]\n let status = nodeStatus[name]||\"default\"\n let colors = nodeColor\n let color = colors[status]\n let viewbox = `${x-r} ${y-r} ${2*r} ${2*r}`\n return {name, title, type, status, color, colors, viewbox, n, x, y}\n }),\n ...edges.map(({tail, head}) => {\n let type = \"edge\"\n let name = `${tail}->${head}`\n let title = name\n let status = edgeStatus[name]||\"default\"\n let colors = edgeColor\n let color = colors[status]\n let bounds = nodes.filter(it => [tail, head].includes(it.n))\n let [xmin, xmax] = d3.extent(bounds.map(it => it.x))\n let [ymin, ymax] = d3.extent(bounds.map(it => it.y))\n let viewbox = `${xmin-r} ${ymin-r} ${xmax-xmin+2*r} ${ymax-ymin+2*r}`\n return {name, title, type, status, color, colors, viewbox, tail, head}\n })\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"function diagram(title=\"\") {\n return html``\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"function viewbox(title=\"\") {\n let found = data.find(it => it.title == title)\n return found ? found.viewbox : `0 0 ${maxwidth} ${height}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"function edge({tail, head}) {\n let {PI} = Math\n let {\n headnode, tailnode,\n edgename, edgewidth,\n slope, p,\n t, h,\n m, c\n } = edgeConstructions({tail, head})\n return svg`\n${arrow(h.x, h.y, h.angle*180/PI, edgewidth)}\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"function node({n, x, y}) {\n let id = `S-${n}`\n let description = nodeLabels[id]\n return svg``\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"function nodeLabel({n, x, y}) {\n let id = `S-${n}`\n let description = nodeLabels[id]\n return html`

${id}

${description}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"style = () => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"nodes = {\n const nudge = 3\n const outsideY = i => 2*radius*(i+1) + (i+0.5)*space + nudge\n const insideY = i => (2*i+1)*radius + i*space + nudge\n const inside = (n, i) => ({n, x:maxwidth/2, y:insideY(i)})\n const left = (n, i) => ({n, x:radius+3, y:outsideY(i)})\n const right = (n, i) => ({n, x:maxwidth-radius-3, y:outsideY(i)})\n return [\n ...[10, 11, 5, 2, 1].map(inside),\n ...[8, 6, 3].map(left),\n ...[9, 7, 4].map(right)\n ].sort((a,b)=> a.n - b.n)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"edges = [\n [ 1, 4 ],\n [ 1, 3 ],\n [ 1, 2 ],\n [ 2, 1 ],\n [ 2, 3 ],\n [ 2, 4 ],\n [ 2, 5 ],\n [ 2, 6 ],\n [ 2, 7 ],\n [ 3, 1 ],\n [ 3, 2 ],\n [ 3, 4 ],\n [ 3, 5 ],\n [ 3, 6 ],\n [ 3, 11],\n [ 4, 1 ],\n [ 4, 2 ],\n [ 4, 3 ],\n [ 4, 5 ],\n [ 4, 7 ],\n [ 4, 11],\n [ 5, 2 ],\n [ 5, 3 ],\n [ 5, 4 ],\n [ 5, 6 ],\n [ 5, 7 ],\n [ 5, 8 ],\n [ 5, 9 ],\n [ 5, 11],\n [ 6, 2 ],\n [ 6, 3 ],\n [ 6, 5 ],\n [ 6, 8 ],\n [ 6, 7 ],\n [ 6, 10],\n [ 6, 11],\n [ 7, 2 ],\n [ 7, 4 ],\n [ 7, 5 ],\n [ 7, 6 ],\n [ 7, 9 ],\n [ 7, 11],\n [ 7, 10],\n [ 8, 5 ],\n [ 8, 6 ],\n [ 8, 9 ],\n [ 8, 10],\n [ 8, 11],\n [ 9, 5 ],\n [ 9, 7 ],\n [ 9, 8 ],\n [ 9, 10],\n [ 9, 11],\n [10, 6],\n [10, 7],\n [10, 8],\n [10, 9],\n [10, 11],\n [11, 3],\n [11, 4],\n [11, 5],\n [11, 6],\n [11, 7],\n [11, 8],\n [11, 9],\n [11, 10]\n].map(([tail, head]) => ({tail, head}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"arrow = function(x, y, degrees, edgewidth) {\n let rad = Math.atan2(3,8)\n let tx = Math.cos(rad)*(Math.sqrt(8*8 + 3*3) + edgewidth)\n let ty = Math.sin(rad)*(Math.sqrt(8*8 + 3*3) + edgewidth)\n return svg``\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"maxwidth = 3*space+4.5*radius","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"height = 10*radius+4*space+6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"viewof space = Inputs.range([30, 120], {value:90, step: 10, label: \"space\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"viewof radius = Inputs.range([15, 90], {value: 45, step: 5, label:\"radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"viewof bend = Inputs.range([0, radius/2], {value: 4, label: \"bend\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":365,"value":"nudge = Math.PI/40\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"html`

test drawing arrows

especially to see a larger arrow on wider edges\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"labelDebugging = {\n return html`\n

testing placement of edge labels

\n${diagram(\"9->8\")}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1020,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"