31:T732,chart = { const width = 928; const height = 680; const simulation = d3.forceSimulation() .force("charge", d3.forceManyBody()) .force("link", d3.forceLink().id(d => d.id)) .force("x", d3.forceX()) .force("y", d3.forceY()) .on("tick", ticked); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); let link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line"); let node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle"); function ticked() { node.attr("cx", d => d.x) .attr("cy", d => d.y); 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); } invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { update({nodes, links}) { // Make a shallow copy to protect against mutation, while // recycling old nodes to preserve position and velocity. const old = new Map(node.data().map(d => [d.id, d])); nodes = nodes.map(d => ({...old.get(d.id), ... d})); links = links.map(d => ({...d})); node = node .data(nodes, d => d.id) .join(enter => enter.append("circle") .attr("r", 5) .call(drag(simulation)) .call(node => node.append("title").text(d => d.id))); link = link .data(links, d => [d.source, d.target]) .join("line"); simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart().tick(); ticked(); // render now! } }); }32:[{"id":"5c0e56b44362ec8e2621299d2ddce5ac68e4e1b11e08ac4547075b0e6374d9083a589eec442479ef7876be75215b8499cf9463743191cfe01e4ca3cb826135e5","href":"https://static.observableusercontent.com/files/5c0e56b44362ec8e2621299d2ddce5ac68e4e1b11e08ac4547075b0e6374d9083a589eec442479ef7876be75215b8499cf9463743191cfe01e4ca3cb826135e5","name":"sfhh@4.json","type":"application/json","lastModified":1594256088560.345,"size":2971473}] 2f:{"title":"Temporal force-directed graph","cells":[{"id":1,"value":"

Temporal force-directed graph

D3 › Gallery

\n\n# Temporal force-directed graph\n\nThis notebook visualizes a temporal network which [changes over time](/@d3/modifying-a-force-directed-graph). Each node and link has a *start* and *end* specifying its existence. The data here represents face-to-face interactions at a two-day conference. Data: [SocioPatterns](/@d3/sfhh-conference-data)","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"viewof time = Scrubber(times, {\n delay: 100, \n loop: true,\n format: date => date.toLocaleString(\"en\", {\n month: \"long\", \n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n timeZone: \"UTC\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"update = {\n const nodes = data.nodes.filter(d => contains(d, time));\n const links = data.links.filter(d => contains(d, time));\n chart.update({nodes, links});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = {\n const {nodes, links} = await FileAttachment(\"sfhh@4.json\").json();\n for (const d of [...nodes, ...links]) {\n d.start = d3.isoParse(d.start);\n d.end = d3.isoParse(d.end);\n };\n return {nodes, links};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"times = d3.scaleTime()\n .domain([d3.min(data.nodes, d => d.start), d3.max(data.nodes, d => d.end)])\n .ticks(1000)\n .filter(time => data.nodes.some(d => contains(d, time)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"contains = ({start, end}, time) => start <= time && time < end","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!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":172,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}