2f:null 30:["$","title",null,{"children":"Experimenting d3-force | Figay | Observable"}] 35:T65a,

Experimenting d3-force

This is a fork of the notebook, copied in order to perform my own experimentation. The motivation is to master d3-force in order to use it with cytoscape through external layout cytoscapte-d3-force. This is in particular the case for radial force, which can be quite useful for projecting a semantic graph on radar-chart.

The goal is to be able to experiment the different parameters and then to adapt accurately those of cytoscape-d3-force when used.

Below, I'll walk through using the following types of forces:

Positional x and y forces
Collide forces
Many-body forces
Link forces
Radial forces
Center forces
Custom forces

At the end, there is a beeswarm chart using the different forces.

Note: as progressing through, it is possible playing (using the scrubber) one or two simulations at a time. Calculating multiple force simulations all at once may cause the page to slow down.

To get started, let's just generate some random nodes and edges to use for our force-directed graphs. For each node, we'll randomly assign a position (normally distributed around center) and a radius. For the edges, we'll just randomly connect each node to another node and then just filter out any instances of self-connection.

36:Tc12,md` Some of the examples below will use node radius and/or edge connections in the simulation, but some will not. Feel free to toggle the above options to show what the initial graph looks like with or without these components. ## Structure of \`\`d3-force\`\` simulations Before we dive into the specific forces that we'll use, let's briefly discuss the general structure used to create a force-directed graph. \`\`\`javascript // 1. create a copy of the node data nodes = node_data.map(d => Object.create(d)) // 2. create new force simulation specifying the forces to use // and, in our case, how many "ticks" or frames we'll want to simulate sim = d3.forceSimulation(nodes) .force("force_name", ...) // ... chain together as many forces as we want .stop() .tick(n_frames_to_simulate) // 3. bind data and draw nodes node = svg.selectAll(".node") .data(nodes).enter() // ... specify node position, radius, etc. as we normally would // 4. indicate how we should update the graph for each tick sim.on("tick", () => { // ... specify how we should move nodes/edges given new positional data }) \`\`\` **Step one** is to create a copy of our initial node data (position, radius, etc.) so that we can pass this copy rather than our original data to \`\`d3.forceSimulation()\`\`. This is because as we simulate forces, the \`\`d3.forceSimulation()\`\` function will update whatever array of data we pass it to reflect how forces are influencing our nodes so if we have any intention of re-using our initial node data after we start simulating, we'll want to copy it first. However, if you are only doing one simulation and do not need preserve the initial data, you don't necessarily need to worry about copying your data. **Step two** is to actually make our simulation by first passing our (copied) array of data to \`\`d3.forceSimulation()\`\`. We can then add/chain whatever forces we would like to use with \`\`force(...)\`\` (more on this below). In our case, once we have defined the behavior of the simulation, we will then explictly stop the simulation before it has a chance to start so that we can specify how many frames or ticks we would like to run of our simulation. We do this below so that we can control where we are in the simulation with scrubbers, but without doing this, the simulation will simply start and continue to run on it's own. **Step three** is to simply bind our data and draw our nodes as we would for any static graph. Because we are binding our nodes to the same data that is passed to \`\`d3.forceSimulation()\`\`, as our simulation runs, we can simply rely on the next and final step to update our nodes with new positioning. **Step four** is to end by indicating how we should update our nodes at each step as the simulation applies forces. The simulation will be updating the underlying positional data array (\`\`nodes\`\`) that is already bound to our drawn elements so we just have specify moving each node to its new position. Now we can start taking a look at specific forces and make some force-directed graphs! --- `37:T5bf,link_sect = md`## The link force Thus far, we have applied forces to graphs without any edges, but we'll often want to plot graphs with edges to indicate connections between our nodes. Using \`\`forceLink()\`\`, we can then provide an attraction force between connected nodes such that our graph arranges itself according to our edges. Unlike the previously discussed forces that take singular arguments to define the force, \`\`forceLink()\`\` takes a list of data to define the edges we want to include and use for force. This data should look like: \`\`\`javascript edge_data = [ {source: 0, target: 5}, // connect the 1st node in our node_data list to the 6th node {source: 2, target: 4}, // connect the 3rd node in our node_date list to the 5th node ... ] \`\`\` We can then pass this list of edges to \`\`forceLink()\`\` and voilà, we have a connected force-directed graph! Quick note: like with our node data, we will want to make a copy of our original edge data before passing it to \`\`forceLink()\`\` because the force simulation will modify the data as the simulation runs. \`\`\`javascript edges = edge_data.map(d => Object.create(d)) sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(edges)${link_dist != 30 ? ".distance(" + link_dist + ")" : ""}) ${!link_use_other_forces ? '// ' : ""}.force("charge", d3.forceManyBody().strength(-8)) ${!link_use_other_forces ? '// ' : ""}.force("collide", d3.forceCollide().radius(9)) \`\`\``38:T416,chart_link = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), edges = edge_data.map(d => Object.create(d)), kf = keyframe_link; // create simulation using: // linking force with user-defined distance and collide + charge forces to seperate nodes const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(edges).distance(link_dist)) .force("collide", link_use_other_forces ? d3.forceCollide().radius(9) : null) .force("charge", link_use_other_forces ? d3.forceManyBody().strength(-8) : null) .stop() .tick(kf); console.log(edges); // draw nodes (with uniform radius and no edges) const [node, edge] = draw_nodes(svg, nodes, edge_data.map(d => Object.create(d)), false, link_show_edge); // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }39:T4d4,cmanhart_radial2 = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map((d) => Object.create(d)), kf = keyframe_radial2; // draw guide circles svg .selectAll(".guide-circle") .data([0, 1]) .enter() .append("circle") .attr("cx", x(0.5)) .attr("cy", y(0.5)) .attr("r", (d) => r(d)) .style("fill", "none") .style("stroke", "#bbb") .style("stroke-dasharray", 4); // create simulation using: // radial force based on radius of node (large nodes on outside) + collide forces const sim = d3 .forceSimulation(nodes) .force( "collide", d3.forceCollide().radius((d) => d.r + 1) ) .force( "radial", d3 .forceRadial( (d) => r(d.r / d3.max(node_data, (d) => d.r)), x(0.5), y(0.5) ) .strength(0.25) ) .stop() .tick(kf); // draw nodes (with uniform radius and no edges) const [node, edge] = draw_nodes(svg, nodes, null, true, false); // update each node upon simulation tick sim.on("tick", () => { node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }); return svg.node(); }3a:T46d,chart_center = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = keyframe_center; // draw circle to show location of sim's center svg.append("circle") .attr("cx", x(cx)) .attr("cy", y(cy)) .attr("r", node_data.length) .style("fill", "none") .style("stroke", "#bbb"); // create simulation using: // (1) x + y forces towards center // (2) collide force // (3) forceCenter to move the simulation's center const sim = d3.forceSimulation(nodes) .force("x", d3.forceX(x(0.5)).strength(0.05)) .force("y", d3.forceY(y(0.5)).strength(0.05)) .force("collide", d3.forceCollide(9)) .force("center", d3.forceCenter().x(x(cx)).y(y(cy))) .stop() .tick(kf); // draw nodes (with uniform radius and no edges) const [node, edge] = draw_nodes(svg, nodes, null, false, false); // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }3b:T63f,chart_custom = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = keyframe_custom; // draw bounding circle svg.append("circle") .attr("cx", x(0.5)) .attr("cy", y(0.5)) .attr("r", bc_radius) .style("fill", "none") .style("stroke", "#bbb"); // create simulation using: // (1) collide force // (2) many-body charge force, based on the node's size // (3) a custom force bounding the nodes inside the bounding circle const sim = d3.forceSimulation(nodes) .force("collide", d3.forceCollide().radius(d => d.r + 1)) .force("charge", d3.forceManyBody().strength(d => -d.r / 2)) .force("bounding-circle", () => { nodes.forEach(node => { // if node is outside of the bounding circle, // move node just inside circle along same polar axis if (distance([node.x, node.y], [x(0.5), y(0.5)]) > bc_radius) { const theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))); node.x = x(0.5) + bc_radius * Math.cos(theta) * (node.x < x(0.5) ? -1 : 1); node.y = y(0.5) + bc_radius * Math.sin(theta) * (node.x < x(0.5) ? -1 : 1); } }) }) .stop() .tick(kf); // draw nodes (with uniform radius and no edges) const [node, edge] = draw_nodes(svg, nodes, null, true, false); // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }3c:T49c,chart_beeswarm = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = keyframe_beeswarm; // draw horizontal axis of beeswarm plot svg .append("line") .attr("x1", x(0)) .attr("x2", x(1)) .attr("y1", y(0.5)) .attr("y2", y(0.5)) .style("stroke", "#bbb") .style("stroke-dasharray", 4); // create simulation using: // (1) x force to keep each node in it's original x position // (2) y force pulling all nodes towards axis // (3) collide force to keep nodes separated const sim = d3 .forceSimulation(nodes) .force("x", d3.forceX(d => d.x)) .force("y", d3.forceY(y(0.5)).strength(0.1)) .force( "collide", d3.forceCollide().radius(d => (beeswarm_w_r ? d.r : 8) + 1) ) .stop() .tick(kf); // draw nodes (with radius based on user input and no edges) const [node, edge] = draw_nodes(svg, nodes, null, beeswarm_w_r, false); // update each node upon simulation tick sim.on("tick", () => { node.attr("cx", d => d.x).attr("cy", d => d.y); }); return svg.node(); }3d:T5f5,md` --- ## Closing Notes - Throughout this tutorial, I've shown some sample code for generating force-directed graphs that aligned with what was shown, but I would like to note that some the actual graphs had some minor modifications added to get the look just right. Feel free to open the actual code for those cells to check out how. - If you want to know more, especially on specifics of the functions and their parameters within \`\`d3-force\`\`, you should check out [the main documentation](https://github.com/d3/d3-force). D3 also put together [a collection of Observable notebooks](https://observablehq.com/collection/@d3/d3-force) that give some good examples. - A huge shout-out to [Amelia Wattenberger](https://wattenberger.com/) and [her guide on using \`\`d3-force\`\`](https://wattenberger.com/blog/d3-force), which finally inspired me to learn how to use force and was a fantastic guide along the way. --- ## Addendum: Live simulations in Observable Throughout this tutorial, I've been showing examples of force simulations using scrubbers that allow you to look at each individual frame of the simulation. I think this is helpful to see the evolution of how forces are applied, but making a force simulation, you'll instead want to have it run on its own. To do this, all you have to do is remove the \`\`\`.stop()\`\`\` and \`\`\`.tick(...)\`\`\` function calls when creating your \`\`\`sim\`\`\`. Doing this will produce a simulation like the one below. If you want to see it run again, hit the button.`3e:T61c,chart_custom_live = { // init plot + get relevant data and keyframe const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), nodes = node_data.map(d => Object.create(d)), kf = b; // draw bounding circle svg.append("circle") .attr("cx", x(0.5)) .attr("cy", y(0.5)) .attr("r", bc_radius) .style("fill", "none") .style("stroke", "#bbb"); // create simulation using: // (1) collide force // (2) many-body charge force, based on the node's size // (3) a custom force bounding the nodes inside the bounding circle const sim = d3.forceSimulation(nodes) .force("collide", d3.forceCollide().radius(d => d.r + 1)) .force("charge", d3.forceManyBody().strength(d => -d.r / 2)) .force("bounding-circle", () => { nodes.forEach(node => { // if node is outside of the bounding circle, // move node just inside circle along same polar axis if (distance([node.x, node.y], [x(0.5), y(0.5)]) > bc_radius) { const theta = Math.atan((node.y - y(0.5)) / (node.x - x(0.5))); node.x = x(0.5) + bc_radius * Math.cos(theta) * (node.x < x(0.5) ? -1 : 1); node.y = y(0.5) + bc_radius * Math.sin(theta) * (node.x < x(0.5) ? -1 : 1); } }) }); // draw nodes (with uniform radius and no edges) const [node, edge] = draw_nodes(svg, nodes, null, true, false); // update each node upon simulation tick sim.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); return svg.node(); }3f:[] 33:{"id":"f3dd45443ff22566","slug":"a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho","title":"Experimenting d3-force","thumbnail":"a8125be2c274533f2c81178fda88d46eee29c4450f293bd696e7de9b8957f7d2","access_level":"public","create_time":"$D2022-01-07T22:43:59.900Z","update_time":"$D2022-01-11T09:56:19.339Z","view_time":null,"first_public_time":"$D2022-01-11T07:46:33.278Z","fork":{"id":"1929b1f2296bc805","slug":"a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho","title":"A tutorial to using d3-force from someone who just learned how to use it","owner":{"id":"ec7d5a5929e2447a","login":"ben-tanen","name":"Ben Tanen"}},"stars":1,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":1376,"publish_version":1376,"role":null,"authored":false,"authors":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null}],"members":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Experimenting d3-force","cells":[{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"node_data = [...Array(100)]\n .map(() => ({x: x(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)), \n y: y(Math.min(Math.max(d3.randomNormal(0.5, 0.15)(), 0), 1)),\n r: Math.max(3, d3.randomNormal(8, 5)())\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"edge_data = [...Array(node_data.length)]\n .map((d, i) => ({source: i,\n target: d3.randomInt(node_data.length)()\n }))\n .filter(d => d.source != d.target);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"For reference, let's plot this initial data, just to see what our data generates.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"chart_noforce = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height));\n \n // draw nodes (with radius and edges based on user input)\n draw_nodes(svg, node_data, edge_data,\n init_node_param.indexOf(\"Show node radius\") >= 0,\n init_node_param.indexOf(\"Show edges\") >= 0);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"viewof init_node_param = checkbox([\"Show node radius\", \"Show edges\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"xy_sect = md`## The positional x and y forces\n\nThe first type of force we will use is the positional x and y forces. Simply put, these are forces that will direct the nodes to specific x/y positions. For example, we might use x/y forces that direct the nodes towards the center of the plot, as we see below.\n\nTo use these forces, we can simply create a new force using \\`\\`d3.forceX()\\`\\` or \\`\\`d3.forceY()\\`\\` and pass it as the second argument to \\`\\`force()\\`\\`.\n\n\\`\\`\\`javascript\n// force each node towards the center\nsim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(w / 2)) \n .force(\"y\", d3.forceY(h / 2))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof keyframe_xy = sim_scrubber(50);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"chart_xy = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)),\n nodes = node_data.map(d => Object.create(d)),\n kf = keyframe_xy;\n \n // create simulation using x + y forces towards center\n // with strength defined by xys input below\n const sim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(x(0.5)).strength(xys))\n .force(\"y\", d3.forceY(y(0.5)).strength(xys))\n .stop()\n .tick(kf);\n \n // draw nodes (with uniform radius and no edges)\n const [node, edge] = draw_nodes(svg, nodes, null, false, false);\n \n // update each node upon simulation tick\n sim.on(\"tick\", () => {\n node\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y);\n });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"md`Beyond which x or y position the force should point towards, we can also specify the strength at which these forces should be applied by chaining the \\`\\`strength()\\`\\` function to the end of our force. In the case of a x or y force, strength indicates how quickly the node should move towards the specified position. Try playing around with the slider below to see the effect.\n\n\\`\\`\\`javascript\n// force each node towards the center\n// with strength = ${xys} (${(xys == 0.1 ? \"the default\" : (xys > 0.1 ? \"faster\" : \"slower\") + \" than the default\")})\nsim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(w / 2).strength(${xys}) \n .force(\"y\", d3.forceY(h / 2).strength(${xys})\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"viewof xys = slider({\n min: 0, \n max: 0.5, \n step: 0.01,\n value: 0.1,\n description: \"Strength of x and y force\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"collide_sect = md`## The collide force\n\nTelling our nodes where to go is great and all, but when simply using positional x and y forces, our nodes do not at all interact with one another and ultimately all overlap at our specified position. If we instead want our nodes to interact and collide off one another, we can use \\`\\`forceCollide()\\`\\`.\n\nThe main parameter of \\`\\`forceCollide()\\`\\` is the radius around our nodes where the collisions should occur. If our nodes have a radius of 8, we'll probably want to make the collision radius the same (or slightly large to provide some padding).\n\n\\`\\`\\`javascript\n// force each node towards center\n// with collisions occuring at each node's radius (plus some padding)\nsim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(w / 2))\n .force(\"y\", d3.forceY(h / 2))\n .force(\"collide\", d3.forceCollide(9)) // 9 = 8 [radius] + 1\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"viewof keyframe_collide1 = sim_scrubber(150);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"chart_collide1 = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)),\n nodes = node_data.map(d => Object.create(d)),\n kf = keyframe_collide1;\n \n // create simulation using:\n // (1) x + y forces towards center\n // (2) collide force with radius of nodes + 1 (for padding)\n const sim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(x(0.5)).strength(0.05))\n .force(\"y\", d3.forceY(y(0.5)).strength(0.05))\n .force(\"collide\", d3.forceCollide(9))\n .stop()\n .tick(kf);\n \n // draw nodes (with uniform radius and no edges)\n const [node, edge] = draw_nodes(svg, nodes, null, false, false);\n \n // update each node upon simulation tick\n sim.on(\"tick\", () => {\n node\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y);\n });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"md`In this simulation, there are three competiting forces applied to each node and as the simulation runs along, these forces will balance out against each other until our nodes reach a stable point of equilibrium. Depending on how many competiting forces we have, it may take more or less time to each this equilibrium.\n\nWhat about if our nodes are not all the same size? It's actually quite simple to apply different collision radii (or any other force paramter) based on our node data.\n\n\\`\\`\\`javascript\n// force each node towards center\n// with collisions occuring at each node's radius (plus some padding)\nsim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(w / 2))\n .force(\"y\", d3.forceY(h / 2))\n .force(\"collide\", d3.forceCollide().radius(d => d.r + 1)) // use the node's actual radius\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"viewof keyframe_collide2 = sim_scrubber(150);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"chart_collide2 = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)),\n nodes = node_data.map(d => Object.create(d)),\n kf = keyframe_collide2;\n \n // create simulation using:\n // (1) x + y forces towards center\n // (2) collide force with radius of nodes (by node) + 1 (for padding)\n const sim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(x(0.5)).strength(0.05))\n .force(\"y\", d3.forceY(y(0.5)).strength(0.05))\n .force(\"collide\", d3.forceCollide().radius(d => d.r + 1))\n .stop()\n .tick(kf);\n \n // draw nodes (with data-defined radius and no edges)\n const [node, edge] = draw_nodes(svg, nodes, null, true, false);\n \n // update each node upon simulation tick\n sim.on(\"tick\", () => {\n node\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y);\n });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"mb_sect = md`## The many-body force\n\nBeyond interacting via collisions, we can also have our nodes interact with one another using a many-body force. This means the force in question is applied on each combination of nodes (many-to-many). Depending on the strength used, we can use \\`\\`forceManyBody()\\`\\` to simulate node attraction (similar to similarly charged particles) or node repulsion (similar to oppositely charged particles).\n\n\\`\\`\\`javascript\n// force nodes ${mbs < 0 ? \"away from\" : \"towards\"} one another\nsim = d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceManyBody().strength(${mbs}))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof mbs = radio({\n options: [\n {label: \"Strong attraction (strength = 5)\", value: 5},\n {label: \"Weak attraction (strength = 2)\", value: 2},\n {label: \"Weak repulsion (strength = -2)\", value: -2},\n {label: \"Strong repulsion (strength = -5)\", value: -5},\n ],\n value: 5,\n description: \"Choose the strength of the many-body force\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"viewof keyframe_mb1 = sim_scrubber(100);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"chart_mb1 = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)),\n nodes = node_data.map(d => Object.create(d)),\n kf = keyframe_mb1;\n \n // create simulation using a many-body force with the strength based on above input\n const sim = d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceManyBody().strength(mbs))\n .stop()\n .tick(kf);\n \n // draw nodes (with uniform radius and no edges)\n const [node, edge] = draw_nodes(svg, nodes, null, false, false);\n \n // update each node upon simulation tick\n sim.on(\"tick\", () => {\n node\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y);\n });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md`If we use a positive strength (attraction), you'll notice that as the nodes attract to one another, they will overlap like our initial version of using the x and y forces. As we did before, if we don't want that, we can simply apply a collide force in addition to our many-body force.\n\n\\`\\`\\`javascript\n// force nodes towards one another but with collision on\nsim = d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceManyBody().strength(5))\n .force(\"collide\", d3.forceCollide(9))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"viewof keyframe_mb2 = sim_scrubber(100);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"chart_mb2 = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)),\n nodes = node_data.map(d => Object.create(d)),\n kf = keyframe_mb2;\n \n // create simulation using a many-body force with gravitational pull between nodes\n // while also applying collide force\n const sim = d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceManyBody().strength(5))\n .force(\"collide\", d3.forceCollide(9))\n .stop()\n .tick(kf);\n \n // draw nodes (with uniform radius and no edges)\n const [node, edge] = draw_nodes(svg, nodes, null, false, false);\n \n // update each node upon simulation tick\n sim.on(\"tick\", () => {\n node\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y);\n });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"md`If we just apply a link force, our connected nodes will be attracted towards each other, but there will be no forces repelling non-connected nodes. To remedy this, we can add either many-body or collide forces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"viewof link_use_other_forces = checkbox({\n options: [{value: \"arf\", label: \"Add repelling forces\"}],\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"viewof keyframe_link = sim_scrubber(150);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"md`In addition to strength, link distance is an important parameter that will dictate how closely clustered our graph will end up. Play around with the link distance parameter below to see its effect on the simulation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"viewof link_dist = slider({\n min: 10, \n max: 100, \n step: 5,\n value: 30,\n description: \"link distance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"md`Another quick note: while we will typically want to draw the edges on our graph to show how nodes are connected, it is certainly not necessary. If the situation calls for it, you can totally apply a \"hidden\" link force.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"viewof link_show_edge = checkbox({\n options: [{value: \"y\", label: \"Show edges\"}],\n value: [\"y\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"radial_sect = md`## The radial force\n\nAnother positional force within \\`\\`d3-force\\`\\` (in additional to the x and y forces) is the radial force, which pushes nodes towards a set radius around a central point. To use it, all we need to do is pass our desired radius \\`\\`r\\`\\`. We can also define the central point to our radial force (as an \\`\\`x\\`\\` and \\`\\`y\\`\\` dimension), though it is optional. If not specified, the center point defaults to [0, 0]. \n\nWhen applying this radial force, nodes are free to be at any point along this radius, which allows for some circular movement (if the other forces dictate it).\n\n\\`\\`\\`javascript\nsim = d3.forceSimulation(nodes)\n .force(\"radial\", d3.forceRadial(${radius}, w / 2, h / 2))\n .force(\"collide\", d3.forceCollide().radius(9))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"

...

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":800,"value":"viewof radius = slider({\n min: r(0), \n max: r(1), \n step: 5,\n value: r(1),\n description: \"radius of radial force\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"viewof keyframe_radial1 = sim_scrubber(100);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"clinkhlinkart_radial1 = {\n // init plot + get relevant data and keyframe\n const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)),\n nodes = node_data.map((d) => Object.create(d)),\n kf = keyframe_radial1;\n\n // draw radial guide circle\n svg\n .append(\"circle\")\n .attr(\"cx\", x(0.5))\n .attr(\"cy\", y(0.5))\n .attr(\"r\", radius)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"#bbb\")\n .style(\"stroke-dasharray\", 4);\n\n // create simulation using:\n // simple radial force (based on radius of user input slider) + collide force\n const sim = d3\n .forceSimulation(nodes)\n .force(\"collide\", d3.forceCollide(9))\n .force(\"radial\", d3.forceRadial(radius, x(0.5), y(0.5)))\n .stop()\n .tick(kf);\n\n // draw nodes (with uniform radius and no edges)\n const [node, edge] = draw_nodes(svg, nodes, null, false, false);\n\n // update each node upon simulation tick\n sim.on(\"tick\", () => {\n node.attr(\"cx\", (d) => d.x).attr(\"cy\", (d) => d.y);\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md`To spice it up, we could also set the radius based on the size of the node.\n\n\\`\\`\\`javascript\nsim = d3.forceSimulation(nodes)\n .force(\"radial\", d3.forceRadial(d => d.r, w / 2, h / 2))\n .force(\"collide\", d3.forceCollide().radius(d => d.r + 1))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"viewof keyframe_radial2 = sim_scrubber(100);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"center_sect = md`## The center force\n\nBased on its name, the center force seems like it would perform something similar to how we used the x and y force above. However, instead of actually forcing our nodes towards a particular point in space, \\`\\`forceCenter()\\`\\` moves the positioning of the force system. In this way, \\`\\`forceCenter\\`\\` is a helpful tool for adjusting the placement of our graph without having to adjust any of our other forces.\n\n\\`\\`\\`javascript\n// force each node towards the center of our graph, which is actually at [${x(cx).toFixed(2)}, ${y(cy).toFixed(2)}]\n// with collisions occuring at each node's radius (plus some padding)\nsim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(w / 2))\n .force(\"y\", d3.forceY(h / 2))\n .force(\"collide\", d3.forceCollide(9))\n .force(\"center\", d3.forceCenter(${x(cx).toFixed(2)}, ${y(cy).toFixed(2)})); // offset the center of our system \n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof cx = slider({\n min: 0, \n max: 1, \n step: 0.01,\n value: 0.5,\n description: \"x position of center\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"viewof cy = slider({\n min: 0, \n max: 1, \n step: 0.01,\n value: 0.5,\n description: \"y position of center\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"viewof keyframe_center = sim_scrubber(150);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"custom_sect = md`## Custom forces\n\nSo those are the forces that come pre-built in \\`\\`d3-force\\`\\`. But what if you want to do something else not achievable with these? Well, it's actually pretty simple to write a custom force function for whatever behavior you might want. All we need to do is specify how we should change each node's position and velocity based on the current situation.\n\nAn example custom force that you might want to use is a bounding force that limits where our nodes can travel (to keep them in frame, etc.). To do this, we can simply write a function that checks if a node is outside our bounded area and then update the node's position to be inside the area if needed.\n\n\\`\\`\\`javascript\nsim = d3.forceSimulation(nodes)\n // ... other standard forces\n .force(\"bouding-circle\", () => {\n nodes.forEach(node => {\n if (isOutside(node)) {\n node.x = ... // new x position\n node.y = ... // new y position\n }\n })\n })\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"viewof bc_radius = slider({\n min: r(0), \n max: r(1), \n step: 5,\n value: r(1),\n description: \"radius of bounding circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"viewof keyframe_custom = sim_scrubber(100);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"beeswarm_sect = md`## Using forces to make a beeswarm plot\n\nSo now that we've explored all of the different kinds of forces in \\`\\`d3-force\\`\\`, let's try and apply these forces to make a beeswarm plot. Beeswarm plots are a great way to plot a distribution of data along a continuous axis because by nature it'll show all of our data in accurate positions without overlapping every point. The complexity of this type of chart is figuring out where to place our points, but now that we know how to use \\`\\`d3-force\\`\\`, it's a piece of cake!\n\nWe will use three forces: (1) a y-force drawing our points to the middle, (2) a x force keeping our each of points in the same x position as the start, (3) a collide force keeping all of our points separated.\n\n\\`\\`\\`javascript\nsim = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX().x(d => d.x))\n .force(\"y\", d3.forceY(h / 2))\n .force(\"collide\", d3.forceCollide().radius(${beeswarm_w_r ? \"d => d.r + 1\" : 9}))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"viewof beeswarm_w_r = checkbox([\"Use node radius\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof keyframe_beeswarm = sim_scrubber(150);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"viewof b = button({ value: \"Re-run simulation\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"chart_param = ({\n width: width,\n height: 500,\n margin: {\n top: 10,\n right: 10,\n bottom: 10,\n left: 10,\n center: 150\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"x = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.margin.left, chart_param.width - chart_param.margin.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"{\n return x(0.5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"y = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.height - chart_param.margin.bottom, chart_param.margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"r = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.margin.center, \n Math.min(chart_param.width / 2 - Math.max(chart_param.margin.left, chart_param.margin.right),\n chart_param.height / 2 - Math.max(chart_param.margin.top, chart_param.margin.bottom))]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"distance = ([x1, y1], [x2, y2]) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"draw_nodes = (svg, node_data, edge_data, w_r, w_l) => {\n \n let edge = null;\n if (edge_data) {\n edge = svg.selectAll(\".edge\")\n .data(edge_data).enter()\n .append(\"line\")\n .classed(\"edge\", true)\n .attr(\"x1\", d => node_data[d.source].x)\n .attr(\"y1\", d => node_data[d.source].y)\n .attr(\"x2\", d => node_data[d.target].x)\n .attr(\"y2\", d => node_data[d.target].y)\n .style(\"stroke\", w_l ? \"#bbb\" : \"none\");\n }\n \n const node = svg.selectAll(\".node\")\n .data(node_data).enter()\n .append(\"circle\")\n .classed(\"node\", true)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", d => w_r ? d.r : 8);\n \n return [node, edge];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import { slider, button, select, text, radio, checkbox, number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 34:"$33:body"