2c:null 2d:["$","title",null,{"children":"draft template to create nodes and flows. | Bernelle Verster | Observable"}] 32:T1048,graph = { //deep copy let links = data.relationships.map(o => ({ ...o })); let nodes = data.nodes.map(o => ({ ...o })); let maxLinkOcc = {}; computeLinkNumber(links, maxLinkOcc); const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id(d => d.id) .distance(linkDistance) ) .force("charge", d3.forceManyBody()) .force("collide", d3.forceCollide().radius(nodeRadius + linkDistance / 2)) .force("center", d3.forceCenter(width / 2, height / 2)) .on("tick", ticked); const svg = d3.select(DOM.svg(width, height)); svg.call( d3 .zoom() .scaleExtent([1 / 4, 4]) .on("zoom", zoomed) ); let g = svg.append("g"); function zoomed() { g.attr("transform", d3.event.transform); } function dragged(d) { d3.select(this) .attr("cx", (d.x = d3.event.x)) .attr("cy", (d.y = d3.event.y)); } const link = g .append("g") .selectAll("g") .data(links) .enter() .append("g"); const paths = link .append("path") .attr("class", "links") .attr("stroke", "#aaa") .attr("stroke-width", "20px") // thickness of path .attr("id", d => d.id) .attr("style", "fill: none;"); const texts = link .append("text") .append("textPath") .attr("href", d => "#" + d.id) .attr("startOffset", "50%") .append("tspan") .attr("stroke", "black") .attr("font-weight", "bold") .attr("style", "text-anchor: middle; font: 10px sans-serif") .text(d => d.label + " ►") .attr("dy", 3); const node = g .append("g") .selectAll("g") .data(nodes) .enter() .append("g") .attr("cursor", "move") .call( d3 .drag() .on("start", dragstarted) .on("drag", draggedN) .on("end", dragended) ); node .append("circle") .attr("r", nodeRadius) .attr("stroke-width", 3) .attr("stroke", (d, i) => d3.rgb(d3.interpolateRainbow(i / data.nodes.length)).darker(1) ) .attr("fill", (d, i) => d3.interpolateRainbow(i / data.nodes.length)); appendFittedText(node, d => d.label, nodeRadius - 5); node .selectAll(".fitted-text") .attr("fill", "white") .selectAll("tspan") .attr("font-weight", "bold"); function ticked() { updateNodes(); updateLinks(); } function updateNodes() { node.attr("transform", d => `translate(${d.x},${d.y})`); } function updateLinks(nodeId) { let updatedLinks = links.filter(d => nodeId ? d.source.id === nodeId || d.target.id === nodeId : true ); let linkPath = g.selectAll(".links").data(updatedLinks, d => d.id); linkPath.attr("d", function(d, i) { let linkTspan = d3 .select(this.parentNode) .select("textPath") .select("tspan"); if (d.source.id === d.target.id) { let dr = nodeRadius / 2 + 5 + d.linknum * 7; return ( "M" + (d.source.x - 1) + "," + d.source.y + " A " + dr + "," + dr + " 0 1,1 " + (d.target.x + 1) + "," + d.target.y ); } else { let a1 = maxLinkOcc[d.source.id + "->" + d.target.id]; let a2 = maxLinkOcc[d.target.id + "->" + d.source.id]; let uniqueLink = a1 + a2 === 1 || (a1 === 1 && !a2); let source = d.source; let target = d.target; if (source.x > target.x) { linkTspan.text(d => "◄ " + d.label); target = d.source; source = d.target; return getLinkPath(source, target, d.linknum, 1, uniqueLink); } else { linkTspan.text(d => d.label + " ►"); return getLinkPath(source, target, d.linknum, -1, uniqueLink); } } }); } function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function draggedN(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); } return svg.node(); }33:[] 30:{"id":"cdeceb78c230c743","slug":"draft-template-to-create-nodes-and-flows","title":"draft template to create nodes and flows.","thumbnail":"5e7943850ca32c25eb6c48052d8804beaa2e9410d8c157b2e176f1b0b6e566d2","access_level":"public","create_time":"$D2020-08-03T09:15:26.582Z","update_time":"$D2020-08-03T16:58:17.376Z","view_time":null,"first_public_time":"$D2020-08-03T16:46:40.320Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":"starter_2024"},"version":1801,"publish_version":1801,"role":null,"authored":false,"authors":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"draft template to create nodes and flows.","cells":[{"id":0,"value":"md`# draft template to create nodes and flows. \nTo save the image, open the cell menu in the left margin to download any SVG cell as either SVG or PNG.\n\nThis page is to do the simple nodes of this image http://multisite.iris.cat/agrocycle/files/2015/02/Agrocycle.png. Specifically \n

Make the nodes pretty, colour, font...
Make the flow connections inputable (also see link function in https://observablehq.com/@bryangingechen/union-find-data-structure)
Make the connections scalable, draggable, adjustable

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"md`These nodes could be hardcoded or use an input table again?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"data = ({\n nodes: [\n { id: \"1\", label: \"Food\" },\n { id: \"0\", label: \"A city with several industries (pie chart)\" },\n { id: \"2\", label: \"Waste\" },\n { id: \"3\", label: \"Water\" },\n { id: \"4\", label: \"Fuel\" },\n { id: \"5\", label: \"Emissions\" }\n ],\n relationships: [\n {\n id: \"3\",\n label: \"Imported from elsewhere in SA\",\n source: \"1\",\n target: \"0\"\n },\n { id: \"4\", label: \"Imported from outside of SA\", source: \"1\", target: \"0\" },\n { id: \"5\", label: \"Exported\", source: \"0\", target: \"1\" },\n { id: \"6\", label: \"Recycled\", source: \"0\", target: \"0\" },\n { id: \"7\", label: \"Dumped in the sea\", source: \"0\", target: \"2\" },\n { id: \"8\", label: \"Transport\", source: \"0\", target: \"4\" },\n { id: \"9\", label: \"Transport\", source: \"0\", target: \"5\" },\n { id: \"10\", label: \"Imported\", source: \"3\", target: \"0\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"md`All nodes ares draggable. The default node radius is 30 and the default distance between the nodes is 150. The thickness of the connectors is currently hard-coded.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"viewof nodeRadius = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"viewof linkDistance = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"md`# Appendix\nFor the code stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"function computeLinkNumber(links, maxLinkOcc) {\n //sort links by source, then target\n links.sort(linkSort);\n //any links with duplicate source and target get an incremented 'linknum'\n for (var i = 0; i < links.length; i++) {\n if (\n i != 0 &&\n links[i].source == links[i - 1].source &&\n links[i].target == links[i - 1].target\n ) {\n links[i].linknum = links[i - 1].linknum + 1;\n maxLinkOcc[links[i].source + \"->\" + links[i].target] += 1;\n } else {\n links[i].linknum = 1;\n maxLinkOcc[links[i].source + \"->\" + links[i].target] = 1;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"function getLinkPath(source, target, linknum, inv, uniqueLink) {\n let dx = target.x - source.x,\n dy = target.y - source.y,\n dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));\n\n var c1 = closestPointOnCircleEdge(source, target, nodeRadius);\n var c2 = closestPointOnCircleEdge(target, source, nodeRadius);\n\n let startX = c1.x,\n startY = c1.y,\n endX = c2.x,\n endY = c2.y,\n centerX = (startX + endX) / 2,\n centerY = (startY + endY) / 2,\n angle = Math.atan2(endY - startY, endX - startX);\n\n if (uniqueLink) {\n return `M${startX} ${startY} L${endX} ${endY}`;\n }\n\n let p = Math.max(Math.min(30, 10000 / dist), 75);\n\n let mx = Math.sin(angle) * (inv * linknum * p) + centerX;\n let my = -Math.cos(angle) * (inv * linknum * p) + centerY;\n\n return `M${startX} ${startY} C${startX} ${startY}, ${mx} ${my} , ${endX} ${endY}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"function linkSort(a, b) {\n if (a.source > b.source) {\n return 1;\n } else if (a.source < b.source) {\n return -1;\n } else {\n if (a.target > b.target) {\n return 1;\n }\n if (a.target < b.target) {\n return -1;\n } else {\n return 0;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function findNodeById(nodes, id) {\n return nodes.find(function(d) {\n return d.id === id;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dot = require(\"@observablehq/graphviz@0.0.2/dist/graphviz.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"import {appendFittedText} from '@zechasault/append-fitted-text-to-circle'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"import {closestPointOnCircleEdge} from '@zechasault/closest-point-on-circle-edge'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"