2b:null 2c:["$","title",null,{"children":"Adding Nodes to a Force-Directed Graph | Roger Veciana i Rovira | Observable"}] 31:T7a1,chart = { // "this" saves the output value of the block, and can be used // to persist the DOM from one execution to the next. const svg = d3.select(DOM.svg(width, height)); // Select the already existing nodes ("g") and edges ("line") if they exist // Set their data to the new, updated dynamicData let nodes = svg.selectAll("g").data(dynamicData.nodes) let edges = svg.selectAll("line").data(dynamicData.links) console.log(dynamicData.links) // For any new edges being added, append a line var enterEdges = edges.enter().append("line").lower() .attr("stroke", "#222") .attr("stroke-opacity", 0.2) .attr("stroke-width", 1) .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) // For any new nodes being added, append a g var enterNodes = nodes.enter().append("g") // .attr('transform', d => `translate(${d.x},${d.y})`) // .attr('skewX', 70) // .attr('skewY', 70) .append('circle') .attr("stroke", "#FFF") .attr("stroke-width", 0.2) .attr("class","node") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r || 5)//make this one of three sizes .attr("fill", d => d.color) .call(drag()); // merge the new nodes with the existing nodes nodes = nodes.merge(enterNodes); // merge the new edges with the existing edges edges = edges.merge(enterEdges); function ticked() { edges .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); nodes // .attr("transform", d => `translate(${d.x},${d.y}) skewX(30)`) //.attr("transform", d => `translate(${d.x},${d.y})`) .attr("cx", d => d.x) .attr("cy", d => d.y); }; simulation .on("tick", ticked) return svg.node(); }32:T510,dynamicData = { let numeric_node_size2 = function(size) { switch(size) { case "small": return 5; case "medium": return 10; case "large": return 15; } } // If the data does not yet exist, initialize if (!this) { return { nodes: [], links: [] } } let color = new_node.color || "black"; let size = numeric_node_size2(new_node.size); let len = this.nodes.length // create new nodes when nodeColor activated if (this.nodes.length > 0) { //randomly select another node to connect with //let randomNode = this.nodes[Math.floor(Math.random() * len)]; let randomNode = this.nodes[0]; console.log(this.nodes.length); console.log("=> " + randomNode.id); this.nodes.push({id: len, color: color, r: size, // Math.floor(Math.random() * 10) + 5, x: Math.random() * width, y: Math.random()* height}) // x: randomNode.x, y: randomNode.y}) this.links.push({source: randomNode.id, target: len, value: 1}) } else { console.log("first node"); this.nodes.push({id: len, r: size, color: color}) } return this }33:[] 2f:{"id":"d5af704bceafa125","slug":null,"title":"Adding Nodes to a Force-Directed Graph","thumbnail":"693da98664f64b9b0c627500b81ccbfd25fc14fe6a90e3ccb73d7545a1e772c5","access_level":"public","create_time":"$D2023-05-12T17:47:31.357Z","update_time":"$D2023-05-12T17:49:55.071Z","view_time":null,"first_public_time":"$D2023-05-12T17:47:31.357Z","has_unpublished_edits":null,"fork":{"id":"eeddda019bc8a693","slug":"adding-nodes-to-a-force-directed-graph","title":"Adding Nodes to a Force-Directed Graph","owner":{"id":"ac17e52139808174","login":"nmayle","name":"Neil Mayle"}},"stars":1,"starred":false,"owner":{"type":"team","id":"84c194f738aa2fd0","login":"rveciana","name":"Roger Veciana i Rovira","avatar_url":"https://avatars-next.observableusercontent.com/3d41fc7154bfd9017ccebf2744e03c955d78bc31819f90c700dd263c3f301e07","tier":"starter_2024"},"version":483,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c469cbe1fd30687","login":"rveciana","name":"Roger Veciana i Rovira","avatar_url":"https://avatars-next.observableusercontent.com/3d41fc7154bfd9017ccebf2744e03c955d78bc31819f90c700dd263c3f301e07","tier":null}],"members":[{"type":"individual","id":"4c469cbe1fd30687","login":"rveciana","name":"Roger Veciana i Rovira","avatar_url":"https://avatars-next.observableusercontent.com/3d41fc7154bfd9017ccebf2744e03c955d78bc31819f90c700dd263c3f301e07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Adding Nodes to a Force-Directed Graph","cells":[{"id":1,"value":"md`# Adding Nodes to a Force-Directed Graph\n\nThis is a basic example of how one can make a editable force directed graph, something I found more difficult than expected in the Observable environment. Big shoutout to [@bryangingechen](https://observablehq.com/@bryangingechen) for giving me some advice in [this thread](https://talk.observablehq.com/t/add-user-input-to-existing-graph-data/1889), and for his [Union-Find](https://observablehq.com/@bryangingechen/union-find-data-structure) notebook that had an example of my goal. For more info on how it works, read the comments within the blocks below.\n\n*This is still a work in progress, and might not be the best way!* If you have advice for how the notebook can be improved or simplified, let me know with a suggestion here or in the thread above!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"import {formWithSumbit} from \"@forresto/form-input-with-submit\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof new_node = formWithSumbit(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"simulation = {\n // If the simulation already exists, just alter the nodes, links, and restart\n if (this) {\n return this.nodes(dynamicData.nodes)\n .force(\"link\", d3.forceLink(dynamicData.links).id(d => d.id))\n .restart()\n }\n // If the simulation doesn't yet exist, create it.\n return d3.forceSimulation(dynamicData.nodes)\n .force(\"link\", d3.forceLink(dynamicData.links).id(d => d.id))\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\"charge\", d3.forceManyBody().strength(-60))\n .restart()\n .alphaDecay(0.0002);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = () => {\n \n function dragstarted(d) {\n console.log(\"started drag\");\n if (!d3.event.active) simulation.alphaTarget(0.0002).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"import { text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"