36:["$","title",null,{"children":"Plant pairing dynamics | David Rose | Observable"}] 3e:T784,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) // 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", "green") .attr("stroke-width", 3) .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(); }3f:T54b,dynamicData = { let numeric_node_size2 = function(size) { switch(size) { case "small": return 28; case "medium": return 42; case "large": return 68; } } // 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, distance: 72 + (Math.random() * 25), value: 1}) } else { console.log("first node"); this.nodes.push({id: len, r: size, color: color}) } return this }40:[] 3a:{"id":"14b232537fb370dd","slug":"adding-nodes-to-a-force-directed-graph/2","title":"Plant pairing dynamics","thumbnail":"a7bf41353fb595483a79a6393a62448be8a9772c18577939ad522f9092f48f31","access_level":"public","create_time":"$D2021-01-15T16:52:18.193Z","update_time":"$D2021-01-15T19:52:58.287Z","view_time":null,"first_public_time":"$D2021-01-15T16:52:56.656Z","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":0,"starred":false,"owner":{"type":"team","id":"a467da9c44125b4b","login":"supersight","name":"David Rose","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":508,"publish_version":508,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b37ad7d88c8eb5e","login":"supersight","name":"David Rose","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8b37ad7d88c8eb5e","login":"supersight","name":"David Rose","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plant pairing dynamics","cells":[{"id":1,"value":"md`# Plant pairing dynamics\n\nAdd circles of various sizes dynamically and they spring into place`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof new_node = formWithSumbit(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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).distance(d => d.distance))\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).distance(d => d.distance))\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\"charge\", d3.forceManyBody().strength(-90)) //repelling force from each node\n .restart()\n .alphaDecay(0.0002);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"import { text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 35:null