31:T6a9,svg = { const svg = d3.select(DOM.svg(width, height)); let localNodes = nodes.map(d => Object.create(d)); const g = svg .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); //////////////////////////////////////////////////////////// //////////////////////// Draw nodes //////////////////////// //////////////////////////////////////////////////////////// const node = g .append("g") .selectAll("circle") .data(localNodes) .join("circle") .attr("r", d => d.r) .style("fill", d => color(d.cluster)); //////////////////////////////////////////////////////////// ////////////////////// Run simulation ////////////////////// //////////////////////////////////////////////////////////// const simulation = d3 .forceSimulation() // .force("collide", d3.forceCollide().radius(d => d.r + 1) .strength(0.8)) //Original collide function //Instead use the custom collide function .force( "collide", forceClusterCollision() .radius(d => d.r + 1) .strength(0.8) .clusterPadding(clusterPadding) //new setting - important, the cluster id of the data has to be named "cluster" ) .force( "x", d3 .forceX() .x(d => d.focusX) .strength(xyStrength) ) .force( "y", d3 .forceY() .y(d => d.focusY) .strength(xyStrength) ); simulation.nodes(localNodes); //.on("tick", ticked); for (let i = 0; i < ticks; i++) { simulation.tick(); } ticked(); simulation.stop(); function ticked() { node.attr("cx", d => d.x).attr("cy", d => d.y); } //function ticked return svg.node(); } //svg32:Tbde,function forceClusterCollision() { let nodes let radii let strength = 1 let iterations = 1 let clusterPadding = 0 //addition function radius(d) { return d.r } function x(d) { return d.x + d.vx } function y(d) { return d.y + d.vy } function constant(x) { return function() { return x } } function jiggle() { return 1e-6 } //change - PLEASE no Math.random() in there ಥ﹏ಥ // function jiggle() { return (Math.random() - 0.5) * 1e-6 } function force() { let i let n = nodes.length let tree let node let xi let yi let ri let ri2 for (let k = 0; k < iterations; ++k) { tree = d3.quadtree(nodes, x, y).visitAfter(prepare) for (i = 0; i < n; ++i) { node = nodes[i] ri = radii[node.index] ri2 = ri * ri xi = node.x + node.vx yi = node.y + node.vy tree.visit(apply) }//for i }//for k function apply(quad, x0, y0, x1, y1) { let data = quad.data let rj = quad.r let r = ri + rj + clusterPadding //change if (data) { if (data.index > node.index) { let x = xi - data.x - data.vx let y = yi - data.y - data.vy let l = x * x + y * y r = ri + rj + (node.cluster !== quad.data.cluster ? clusterPadding : 0) //addition if (l < r * r) { if (x === 0) x = jiggle(), l += x * x if (y === 0) y = jiggle(), l += y * y l = (r - (l = Math.sqrt(l))) / l * strength node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj)) node.vy += (y *= l) * r data.vx -= x * (r = 1 - r) data.vy -= y * r }//if }//if return }//if return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r }//apply }//force function prepare(quad) { if (quad.data) return quad.r = radii[quad.data.index]; for (let i = quad.r = 0; i < 4; ++i) { if (quad[i] && quad[i].r > quad.r) { quad.r = quad[i].r }//if }//for i } function initialize() { if (!nodes) return; let i, n = nodes.length, node radii = new Array(n) for (i = 0; i < n; ++i) node = nodes[i], radii[node.index] = +radius(node, i, nodes) } force.initialize = function (_) { nodes = _ initialize() return force } force.iterations = function (_) { return arguments.length ? (iterations = +_, force) : iterations } //I wish strength could be a function of the node as well... force.strength = function (_) { return arguments.length ? (strength = +_, force) : strength } force.radius = function (_) { return arguments.length ? (radius = typeof _ === "function" ? _ : constant(+_), force) : radius } //addition - the actual pixels of padding force.clusterPadding = function (_) { return arguments.length ? (clusterPadding = +_, force) : clusterPadding } return force }//function forceCollision33:[] 2f:{"title":"Custom Cluster Force Layout","cells":[{"id":0,"value":"md`# Custom Cluster Force Layout\n\nFork of [Nadieh Bremer's Excellent tutorial](https://observablehq.com/@nbremer/custom-cluster-force-layout).\n\nThis version focuses on \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"m = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof ticks = slider({\n min: 0,\n max: 500,\n value: urlVariables[\"ticks\"],\n step: 1,\n description: \"Ticks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof clusterPadding = slider({\n min: 0,\n max: 50,\n value: urlVariables[\"clusterPadding\"],\n step: 1,\n description: \"Cluster Padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof xyStrength = slider({\n min: 0,\n max: 10,\n value: urlVariables[\"xyStrength\"],\n step: 0.05,\n description: \"X and Y Force Strength\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"{\n let hash = `#ticks=${ticks}&clusterPadding=${clusterPadding}&xyStrength=${xyStrength}`;\n return md`[${hash}](${document.baseURI}${hash}) `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`The _forceClusterCollision_ function that is basically the original _forceCollision_ function with a few changes and addition (all marked I think). Also, I only managed to figure out the required changes because of Mike's [original collide code](https://bl.ocks.org/mbostock/7882658) in the d3.v3 version.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"nodes = d3.range(200).map(() => {\n let i = Math.floor(Math.random() * m); //the cluster id\n let r = Math.sqrt(((i + 1) / m) * -Math.log(Math.random())) * 24;\n let focusX = 110 * Math.cos((i / m) * Math.PI * 2);\n let focusY = 110 * Math.sin((i / m) * Math.PI * 2);\n let dataPoint = {\n cluster: i,\n r: r,\n x: focusX * r,\n y: focusY * r,\n focusX: focusX,\n focusY: focusY\n };\n\n return dataPoint;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html`

Hello world

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters#hashful`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"hash = Generators.observe(notify => {\n const hashchange = () => notify(location.hash);\n hashchange();\n addEventListener(\"hashchange\", hashchange);\n return () => removeEventListener(\"hashchange\", hashchange);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"urlVariables = {\n let vars = hash.slice(1).split(\"&\");\n let vals = {};\n vars.forEach(d => {\n let pair = d.split(\"=\");\n vals[pair[0]] = +pair[1];\n });\n return vals;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"color = d3.scaleSequential(d3.interpolateSinebow).domain([0,m-1])\n//d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}