2b:null 2c:["$","title",null,{"children":"Disjoint force-directed graph | wolfiex | Observable"}] 31:Tfcd,chart = { // Specify the dimensions of the chart. const width = 928; const height = 680; // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.filter((d) => d.target).map((d) => ({ ...d })); const nodes = data.nodes.map((d) => ({ ...d })); // Create a simulation with several forces. const simulation = d3 .forceSimulation(nodes) .force( "link", d3.forceLink(links).id((d) => d.id) ) .force("charge", d3.forceManyBody().strength(-100)) .force( "x", d3 .forceX((d) => { // if (d.type === "dirpath") { // return d.origin === "cmip6plus" ? 100 : -100; // } else { // return 0; // } if (d.id === "cmip6plus") return 100; if (d.id === "mip-cmor-tables") return -100; return 0; }) .strength((d) => { if (d.id === "cmip6plus") return 0.1; if (d.id === "mip-cmor-tables") return 0.1; return 0.2; }) // .strength(1) ) .force("y", d3.forceY()); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a line for each link const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", (d) => Math.sqrt(d.value)); // Add a group for each node const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("g") .data(nodes) .join("g") .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); // Add a circle to each node group node .append("circle") .attr("r", (d) => 1 + d.weight ** 0.4) .attr("fill", (d) => color(d.origin)); // Add a text label to each node group // node // .append("text") // .text((d) => d.id) // .attr("font-size", "10px") // .attr("dx", 12) // .attr("dy", 4); node.append("title").text((d) => d.id); // Add text labels for links const linkLabels = svg .append("g") .attr("class", "link-labels") .selectAll("text") .data(links) .join("text") .text((d) => d.value) // Assuming you want to display the 'value' property .attr("font-size", "8px") .style("fill", "#666!important"); // Set the position attributes of links and nodes each time the simulation ticks. simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node.attr("transform", (d) => `translate(${d.x},${d.y})`); // linkLabels // .attr("x", (d) => (d.source.x + d.target.x) / 2) // .attr("y", (d) => (d.source.y + d.target.y) / 2); }); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it's no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. invalidation.then(() => simulation.stop()); return svg.node(); }32:[{"id":"e3680d5f766e85edde560c9c31a6dba2ddfcf2f66e1dced4afa18d8040f1f205e0bde1b8b234d866373f2bfc5806fafc47e244c5c9f48b60aaa1917c1b80fcb7","href":"https://static.observableusercontent.com/files/e3680d5f766e85edde560c9c31a6dba2ddfcf2f66e1dced4afa18d8040f1f205e0bde1b8b234d866373f2bfc5806fafc47e244c5c9f48b60aaa1917c1b80fcb7","name":"graph.json","type":"application/octet-stream","lastModified":1721426256674.033,"size":73595},{"id":"23490a2ab5678daf614e94e925ea07440c21f72a8d11235bff6a00e44e72bebe23f76d4fead9ffcbc9fcafa6d966b8fbe4a4d0ba35cb35c256a8e839108191f4","href":"https://static.observableusercontent.com/files/23490a2ab5678daf614e94e925ea07440c21f72a8d11235bff6a00e44e72bebe23f76d4fead9ffcbc9fcafa6d966b8fbe4a4d0ba35cb35c256a8e839108191f4","name":"graph@3.json","type":"application/json","lastModified":1721429267745.322,"size":5645},{"id":"54ab4a24157d4efcb7556278b658de2a15b6d9312c5894812f394f2e1f80b35ee5a494993345f7b44556475cc0e7c745a5a30a43725fb76de214369056af251a","href":"https://static.observableusercontent.com/files/54ab4a24157d4efcb7556278b658de2a15b6d9312c5894812f394f2e1f80b35ee5a494993345f7b44556475cc0e7c745a5a30a43725fb76de214369056af251a","name":"graph@4.json","type":"application/json","lastModified":1721429403323.816,"size":6254},{"id":"4ad22ccbafb089e0c62ba58679a8b10c8ba5069837188328eb19ce4747e2f8a7bc083f8b253908248b224fcc834874dfa2f0e1d0ab9a723c692fb2fb05047be2","href":"https://static.observableusercontent.com/files/4ad22ccbafb089e0c62ba58679a8b10c8ba5069837188328eb19ce4747e2f8a7bc083f8b253908248b224fcc834874dfa2f0e1d0ab9a723c692fb2fb05047be2","name":"graph@5.json","type":"application/json","lastModified":1721429558269.543,"size":7123},{"id":"2b24e05e9f3f1d1437306309dec43659ae74c3a233fe82774753618eef384e6826afe352f88fdedcd766213f16c2e1078e0307eb45767c24aa528a6b85a75c9c","href":"https://static.observableusercontent.com/files/2b24e05e9f3f1d1437306309dec43659ae74c3a233fe82774753618eef384e6826afe352f88fdedcd766213f16c2e1078e0307eb45767c24aa528a6b85a75c9c","name":"graph@6.json","type":"application/json","lastModified":1721430680647.402,"size":8258}] 2f:{"id":"649215b55333ee42","slug":null,"title":"Disjoint force-directed graph","thumbnail":"023f18d060357f5e10974016b14df0148e428681fc08d5bc392e7d5d458992d5","access_level":"public","create_time":"$D2024-07-19T21:57:36.674Z","update_time":"$D2024-07-19T23:11:25.292Z","view_time":null,"first_public_time":"$D2024-07-19T21:57:36.674Z","has_unpublished_edits":null,"fork":{"id":"ba609e7e6741119b","slug":"disjoint-force-directed-graph/2","title":"Disjoint force-directed graph","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5ac3a182adb31463","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":"starter_2024"},"version":255,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null}],"members":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null,"role":"editor"},{"type":"team","id":"5ac3a182adb31463","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Disjoint force-directed graph","cells":[{"id":1,"value":"

Disjoint force-directed graph

D3 › Gallery

\n\n# Disjoint force-directed graph\n\nWhen using [D3’s force layout](https://d3js.org/d3-force) with a disjoint graph, you typically want the [positioning forces](https://d3js.org/d3-force/position) (d3.forceX and d3.forceY) instead of the [centering force](https://d3js.org/d3-force/center) (d3.forceCenter). The positioning forces, unlike the centering force, prevent detached subgraphs from escaping the viewport.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"graph@6.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"\n\n\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"