31: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(); }32: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 }33:[] 2f:{"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"},{"id":424,"value":"import {formWithSumbit} from \"@forresto/form-input-with-submit\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"import {slider} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"viewof linkmultiplier = slider({min:1, max:3, step:0.25,\n description:\n \"how much to multiply the link distance\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof new_node = formWithSumbit(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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 => linkmultiplier * 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 => linkmultiplier * 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"},{"id":32,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"import { text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}