2f:T132d,chart2 = { // let data2 = data.slice(0,300) // "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)), data2 = initialData.map(d => Object.create(d)); ///////Render inital points///////////////////////// let node = svg.selectAll(".node") .data(data2) // .data(simulation.nodes()) let g = node.enter() .append("g") .attr("class", "node") .attr("transform", d => `translate(${d.x},${d.y})`); g.append("path") .attr('class','child-path') .attr('d', function (d) { var arc = 2 * Math.PI / d.children.length,//Point spacing along circle data = d.children .map(function (t, i) { return [i * arc, d.r * t.length]; }) return line(data); }) .attr("stroke","black") .attr("stroke-width", strokeWidth); ////////Simulation 1/////////////////////// const simulation1 = d3.forceSimulation(data2) // .force("x", d3.forceX((d,i) => data[i].x)) // .force("y", d3.forceY((d,i) => data[i].y)) // .force("x", d3.forceX((d,i) => Math.random() * width)) // .force("y", d3.forceY((d,i) => Math.random() * height)) .force("collide", d3.forceCollide().radius(d => d.r * 1.3).strength(0.1)) .stop(); function ticked(){ tick++ // console.log(tick) // if (tick == 1) { // console.log(simulation1.nodes().map(d => d.y)) // } d3.selectAll(".node") .attr("transform", d => `translate(${d.x},${d.y})`); d3.selectAll(".child-path") .attr('d', function (d) { var arc = 2 * Math.PI / d.children.length,//Point spacing along circle data = d.children .map(function (t, i) { return [i * arc, d.r * t.length]; }) return line(data); }); // data2.forEach(d => { // console.log(`Node at (${d.x}, ${d.y}) has force (${d.vx}, ${d.vy}) applied.`); // }); simulation1.alphaDecay(0.05); } let tick = 0 function ticked2(){ // console.log(tick) // console.log([d3.min(data2, d => d.y),d3.max(data2, d => d.y)]) // if (tick == 1) { // console.log([simulation1.nodes()[0], data2[0], simulation2.nodes()[0]]) // } d3.selectAll(".node") .attr("transform", d => `translate(${d.x},${d.y})`); d3.selectAll(".child-path") .attr('d', function (d) { var arc = 2 * Math.PI / d.children.length,//Point spacing along circle data = d.children .map(function (t, i) { return [i * arc, d.r * t.length]; }) return line(data); }); // simulation2.nodes().map(d => { // console.log(d.y); // }); // simulation2.alphaDecay(0.05); } ////////Simulation 2/////////////////////// const simulation2 = d3.forceSimulation(data2) // .force('A', d3.forceY().y(function(d){ // // console.log([d, d.y]); // console.log(data2[1]); // return d.y - 5 // })) // .force("test", d3.forceY(d => Math.random()*200)) // .force("y", function(){ // data2.map((d,i) => data2[i].y = data2[i].y - 1) // }) // .force("x", d3.forceX((d,i) => data2[i].x+50)) // .force("y", d3.forceY((d,i) => data[i].y+50)) .alphaMin(0.01) .force("surface", surface(data2)) .force("collideCell", colideCell(data2)) //how do adjust colideCell to push existing cells out the way more, like d3.forceCollide(). .force("tension", tension(data2)) .force("internal", internal(data2)) .force("expand", expand(data2)) // .force("y2", customY(data2)) // .force("upward", upwards(data2)) // .force('A', d3.forceY().strength(1).y(d => d.y - 5)) .stop(); function sim2tick(){ simulation2.on('tick', ticked2); // console.log(simulation2.nodes().map(d => d.y)); simulation2.alpha(1).restart(); // simulation2.on('end', function(){return console.log(data2.map(d=>d.y))}) } ///////Execute simulation///////////////// setTimeout(function(){ simulation1.on('tick', ticked); simulation1.alpha(1).restart(); simulation1.on('end', function(){ // simulation1 // .force("x", null) // .force("y", null) // .force("collide", null) // .alpha(0) // .alphaTarget(0) // .stop(); setTimeout(sim2tick, 1000); }); }, 2000) return svg.node(); }30:T19bb,// chart = { // // let data2 = data.slice(0,300) // // "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)), // // data2 = data.map(d => Object.create(d)), // data2 = initialData.map(d => Object.create(d)), // kf = keyframe; // const simulation = d3.forceSimulation(data2) // // .alphaMin(0.01) // // .alphaDecay(0.01) // // .force("fall", d3.forceManyBody().strength(-0.5)) // // .force("center", d3.forceCenter(width / 2, height / 2)) // .force("x", d3.forceX((d,i) => data[i].x)) // .force("y", d3.forceY((d,i) => data[i].y)) // .force("collide", d3.forceCollide().radius(d => d.r * 1.3).strength(0.1)) // // .force("surface", surface) // // .force("collideCell", colideCell) //how do adjust colideCell to push existing cells out the way more, like d3.forceCollide(). // // .force("tension", tension) // // .force("internal", internal) // // .force("expand", expand) // .stop() // .tick(kf); // // .alpha(0.01) // // .force("charge", d3.forceManyBody().strength(-0.05)) // // .alphaDecay(0.001) // // .velocityDecay(0.8); // // .alphaTarget(0.5) // // .force("shrink", shrink) // // .force("link", d3.forceLink(dynamicData.links).id(d => d.id)) // // .force("center", d3.forceCenter(width / 2, height / 2)) // // .force("charge", d3.forceManyBody().strength(1)) // // .force("collide", d3.forceCollide().radius(function(d) { // // return d.r * 1.2; // Set the radius for each node // // })) // // .force("charge", d3.forceManyBody().strength(0)) // // .force('y', d3.forceY().y(d => d.y)) // // .alphaDecay(0.0002) // // .nodes(data2) // // .on("tick", ticked); // if (kf >= 10) { // simulation.force("x", d3.forceX(0).strength(1)) // .force("y", d3.forceY(0).strength(1)); // // simulation.nodes().map(function(d){ // // d.x = -100; // Set fixed x-coordinate // // d.y = -100; // Set fixed y-coordinate // // // simulation.alpha(1).restart(); // // }); // } // // Select the already existing nodes ("g") and edges ("line") if they exist // // Set their data to the new, updated dynamicData // let node = svg.selectAll(".node") // .data(data2) // // .data(simulation.nodes()) // let g = node.enter() // .append("g") // .attr("class", "node") // .attr("transform", d => `translate(${d.x},${d.y})`); // // g.append("circle") // // .attr("r", d => d.r) // // .style("fill", "#d9d9d9"); // g.append("path") // .attr('class','child-path') // .attr('d', function (d) { // var arc = 2 * Math.PI / d.children.length,//Point spacing along circle // data = d.children // .map(function (t, i) { // return [i * arc, d.r * t.length]; // }) // return line(data); // }) // .attr("stroke","black") // .attr("stroke-width", strokeWidth); // // Create a text element for displaying alpha // const alphaText = svg.append("text") // .attr("id", "alphaText") // .attr("x", 10) // .attr("y", 20) // .style("font-size", "14px") // .style("fill", "black") // .text(`Alpha: ${simulation.alpha().toFixed(3)}`); // // simulation.on('tick', ticked); // // setInterval(() => { // // // simulation.tick(); // // // ticked(); // // // setTimeout(() => { // // // let i = data2.length; // // if (data2.length < 700) { // // for (let i=0; i<5; i++){ // // let j = Math.round(Math.random() * (data.length-1)) // // data2.push(data[j]); // // }; // // }; // // // console.log(data2.slice(-5)) // // node = node.data(data2); // // simulation.nodes(data2); // // // // Enter any new nodes // // let nodeEnter = node.enter() // // .append("g") // // .attr('class', 'node'); // // nodeEnter.append("path") // // .attr('class','child-path') // // .attr('d', function (d) { // // var arc = 2 * Math.PI / d.children.length,//Point spacing along circle // // data = d.children // // .map(function (t, i) { // // return [i * arc, d.r * t]; // // }) // // return line(data); // // }) // // .attr("stroke","black") // // .attr("stroke-width", strokeWidth); // // // nodeEnter.append('circle') // // // .style("fill", "#d9d9d9") // // // .transition().ease(d3.easeElasticOut) // // // .attr("r", d => d.r) // // node = nodeEnter.merge(node); // // // nodeEnter.exit().remove(); // // // console.log(simulation.alpha()) // // simulation.alpha(0.3).restart(); // // }, 50) // // console.log(simulation.alpha()) // // update each node upon simulation tick // // simulation.on("tick", () => { // // d3.select("#alphaText").text(`Alpha: ${simulation.alpha().toFixed(3)}`); // // svg.selectAll(".node") // // // .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); // // svg.selectAll(".child-path") // // .attr('d', function (d) { // // var arc = 2 * Math.PI / d.children.length,//Point spacing along circle // // data = d.children.map(function (t, i) { // // return [i * arc, d.r * t.length]; // // }); // // return line(data); // // }); // // }) // // merge the new edges with the existing edges // // edges = edges.merge(enterEdges); // // function ticked() { // // // console.log(simulation.alpha()) // // // tick++ // // // console.log(tick) // // // 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); // // // dynamicData.forEach(d => { // // // // You can adjust the rate of movement by changing the factor (e.g., 0.05) // // // d.targetY = d.targetY ? d.targetY - 0.5 : d.y; // // // }); // // // simulation.force('y', d3.forceY().y(d => d.targetY)); // // }); // // }; // return svg.node(); // }31:Ta09,colideCell = function(nodeData){ nodeData.map(function(d){ var p1 = d.r + buffer; //buffer for the current polygon //Co-ordinates of current polygon points d.polygon = d.children.map(function(t){ return [(d.x + ((d.r * t.length) + buffer) * t.sin) , (d.y + ((d.r * t.length) + buffer) * t.cos)]; // return [(d.x + d.r * t.length * t.sin), (d.y + d.r * t.length * t.cos)]; }); }); var quadtree = d3.quadtree(nodeData, d=>d.x, d=>d.y); var collisions = 0; //Loop through the cells, and shrink the polygon where it overlaps with neighbours nodeData.map(function(d,i){ quadtree.visit(function(node, x0, y0, x1, y1){ var p = node.data; //Return quadtree nodes that contain any data. //Q: This confused me a little bit. //I thought the "!" would return nodes that DIDN'T contain any data. if (!p) return; //remove the current node if (p.id == d.id) return; //Calculate distance between current node and all others var dx = p.x - d.x, dy = p.y - d.y, dist2 = dx*dx + dy*dy; //Only keep nodes within a reasonable distance of current node if (dist2 > 4 * (d.r + p.r) * (d.r + p.r)) return; var stress = 0; //Polygon co-ordinates for current cell polygon d.children.forEach(function(t){ //Co-ordinates for a single feeler var txy = [(d.x + ((d.r * t.length) + buffer) * t.sin), (d.y + ((d.r * t.length) + buffer) * t.cos)]; var collisions = 0; //If the feeler overlaps neighbouring polygon if (d3.polygonContains(p.polygon, txy)) { collisions ++; stress++; //Bring feeler in a little bit // t.length /= 1.05; // t.length /= 1.01; t.length /= 1.08; //Q: Could you please provide an overview of what this bit does? //I'm guessing this makes the overlapping polygons jiggle a bit more when //they overlap? var tens = d.surface / p.surface, f = 0.1 * (stress > 2 ? 1 : 0.5); d.vx += f * Math.atan((d.x - p.x) * tens); d.vy += f * Math.atan((d.y - p.y) * tens); p.vx -= f * Math.atan((d.x - p.x) * tens); p.vy -= f * Math.atan((d.y - p.y) * tens); // console.log([d.vx,d.vy,p.vx,p.vy]) } }) }) }) }; 32:T594,// 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:[{"id":"40c60ec6d410b68479e8f417f94d0169a702634b76b1a5ecae08ac531af9e8ccdab83a78b3f5f015b80aaf8d08a1f80cecb12a09b516446e99e75be1e12d1840","href":"https://static.observableusercontent.com/files/40c60ec6d410b68479e8f417f94d0169a702634b76b1a5ecae08ac531af9e8ccdab83a78b3f5f015b80aaf8d08a1f80cecb12a09b516446e99e75be1e12d1840","name":"untitled (6).json","type":"application/json","lastModified":1703832667211.147,"size":5300}] 2d:{"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"},{"id":424,"value":"import {formWithSumbit} from \"@forresto/form-input-with-submit\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof new_node = formWithSumbit(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"mutable ticks = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"height","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"strokeWidth = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"buffer = 1 + strokeWidth ","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"data2","pinned":true,"hidden":false,"mode":"ojs"},{"id":752,"value":"// data2 = data.slice(0,200)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"data2.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":927,"value":"sim_scrubber = (n_frames) => Scrubber(Array.from({length: n_frames}, (_, i) => i), {\n format: i => \"frame of simulation: \" + (i + 1),\n delay: 50,\n autoplay: false,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1043,"value":"keyframe\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1110,"value":"centroid = [215.8945648640038, 196.72263607892805]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1115,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":1117,"value":"// initialData = data.map(d => ({...d, x: NaN, y: NaN}))\ninitialData = data.map(d => ({...d, x: d3.randomNormal(centroid[0], 0)(), y: d3.randomNormal(centroid[1], 0)()}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"viewof keyframe = sim_scrubber(100);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1406,"value":"initialData","pinned":true,"hidden":false,"mode":"ojs"},{"id":1636,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":1466,"value":"height","pinned":true,"hidden":false,"mode":"ojs"},{"id":1335,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"d3.forceCollide","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"internal = function(nodeData,alpha){\n var f = 1 / 10;\n nodeData.map(function (d) {\n d.vx += f * d3.sum(d.children, function (t) {\n return t.length * t.sin;\n });\n d.vy += f * d3.sum(d.children, function (t) {\n return -t.length * t.cos;\n });\n })\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1567,"value":"upwards = \n function(nodeData) {\n nodeData.map(function(d) {\n const y0 = d.y\n d.y = d. y+ 10; // Shift each node upwards by 10 pixels\n console.log([y0, d.y]);\n });\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1517,"value":"customY = function(nodeData){\n nodeData.forEach(d => d.y = d.y +5)\n}\n \n","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"tension = function(nodeData){\n nodeData.map(function (d) {\n var l = d.children.length;\n d.children.forEach(function (t, i) {\n var m = d.children[(l - 1) % l].length + d.children[(l + 1) % l].length;\n var f = 1 / 8; // spiky-ness\n // var f = 1 / 10; // spiky-ness\n t.length = (1 - f) * t.length + f * m / 2;\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"expand = function(nodeData){\n nodeData.map(function (d) {\n var u = 1 / Math.sqrt(d.surface);\n d.children.forEach(function (t) {\n t.length *= u;\n t.length = Math.min(t.length, 1.1);\n })\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"shrink = function(nodeData){\n const heights = nodeData.map(d => d.y);\n const upperQ = d3.quantile(heights.sort(d3.ascending), 0.65);\n const lowerQ = d3.quantile(heights.sort(d3.ascending), 0.25);\n \n nodeData.map(function(d){\n if (d.y > upperQ | d.y < lowerQ) {d.color = 'green'} else {d.color = 'blue'}; \n d.children.forEach(function (t) {\n if (d.y > upperQ | d.y < lowerQ) {t.length *= 0.85};\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"surface = function(nodeData){\n nodeData.map(function(d){\n d.surface = Math.sqrt(\n d.children.map(function(t){\n return t.length * t.length;\n })\n .reduce(function(a,b){\n return a + b; \n }, 0) / d.children.length);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"line = d3.radialLine().curve(d3.curveCatmullRomClosed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"import {data} from \"8a0f66ecb094746a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"// dynamicData = {\n// for (let i=3; i < data.length; i++) {\n// data2.push(data[i]);\n// node = node.data(data2)\n// simulation.nodes(data2)\n// yield Promises.tick(500, dataset)\n// }\n// return this\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"dynamicData.nodes","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"data","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(data2)\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(data2)\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(-0.05))\n// // .force(\"charge\", d3.forceManyBody().strength(0))\n// .force('y', d3.forceY().y(d => d.y))\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@6\")\n","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"}