2b:null 2c:["$","title",null,{"children":"Temporal force-directed graph | akanksha | Observable"}] 31:Te72,chart = () => { const width = 928; const height = 680; const simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-40)) // Adjust the strength value as needed .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("viewBox", "-95 -75 150 150") .attr("style", "max-width: 100%; height: auto;"); let link = svg.append("g") .attr("stroke", "#6CB4EE") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .selectAll("line"); let node = svg.append("g") .attr("stroke", "#000000") .attr("stroke-width", 0.01) .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()); const nodeColors = { "BGLU42": "#1f77b4", "FRO2": "#aec7e8", "IRT1": "#ff7f0e", "NAS4": "#ffbb78", "S8H": "#2ca02c", "MYB77": "#98df8a", "GL3": "#d62728", "AUX1": "#ff9896", "BHLH2": "#9467bd", "TT8": "#c5b0d5", "CBSX2": "#8c564b", "NAC043": "#c49c94", "K24M7.12": "#e377c2", "KNAT7": "#f7b6d2", "NAC012": "#7f7f7f", "WRKY12": "#c7c7c7", "NAC066": "#bcbd22", "CESA8": "#dbdb8d" }; return Object.assign(svg.node(), { update({ nodes, links }) { 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 })); // Create a set to store node IDs that have links const nodesWithLinks = new Set(links.flatMap(d => [d.source, d.target])); // Update the nodes node = node .data(nodes) .join(enter => { const g = enter.append("g"); g.append("circle") .attr("r", 7) .attr("fill", d => (nodesWithLinks.has(d.id) ? nodeColors[d.id] : "white")) // Set node fill to white if it doesn't have links .call(drag(simulation)) .call(node => node.append("title").text(d => d.id)); g.append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "3px") .style("font-weight", "bold") .style("fill", "black") .text(d => d.id); return g; }) .attr("transform", d => `translate(${d.x},${d.y})`); svg.append("defs").selectAll("marker") .data(["arrow"]) // Give the marker a unique name .enter().append("marker") .attr("id", d => d) .attr("viewBox", "0 -5 10 10") .attr("refX", 37) // Adjust this value to control the arrow's position .attr("refY", 0) .attr("markerWidth", 5) // Adjust the marker width to make the arrow smaller .attr("markerHeight", 5) // Adjust the marker height to make the arrow smaller .attr("orient", "auto") .append("path") .attr("fill", "#6CB4EE") .style("opacity", "0.9") .attr("d", "M0,-5L10,0L0,5"); link = link .data(links, d => [d.source, d.target]) .join("line") .attr("marker-end", "url(#arrow)"); simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(0.1).restart().tick(); ticked(); // render now! } }); }; 32:T45d,function filterData(data, temp) { // Convert temp to an integer temp = parseInt(temp); // Define a margin to make nodes disappear just before their end temperature const margin = 1; // Adjust this margin as needed // Update the nodes to include a flag indicating whether they should be colored const updatedNodes = data.nodes.map(node => ({ ...node, color: temp >= node.start && temp < node.end - margin })); // Get the ids of filtered nodes const filteredNodeIds = updatedNodes.filter(node => node.color).map(node => node.id); // Filter links based on the existence of source and target nodes in the filtered list const filteredLinks = data.links.filter(d => { // Check if source and target nodes exist in filteredNodes const sourceExists = filteredNodeIds.includes(d.source); const targetExists = filteredNodeIds.includes(d.target); // Check if both source and target nodes exist return sourceExists && targetExists; }); return { nodes: updatedNodes, links: filteredLinks }; } 33:[{"id":"3bf58c7a6c8f356ac1201f64eed6fa3848a5322b5b471706b5f59ed49bd10c4340530feaeb645adcbbb1f77962c038e8da1df0b6b589bc23db97023a956961c2","href":"https://static.observableusercontent.com/files/3bf58c7a6c8f356ac1201f64eed6fa3848a5322b5b471706b5f59ed49bd10c4340530feaeb645adcbbb1f77962c038e8da1df0b6b589bc23db97023a956961c2","name":"Network_stats.py","type":"application/octet-stream","lastModified":1710154763628.024,"size":1671},{"id":"69ee65896295c07323f806efabf495419bcc15b28d0a68d767bdb5fac889d014ec023104f23ac93a71164e995aede0830e3f8d66a48a662d8fcf1479f36d5f72","href":"https://static.observableusercontent.com/files/69ee65896295c07323f806efabf495419bcc15b28d0a68d767bdb5fac889d014ec023104f23ac93a71164e995aede0830e3f8d66a48a662d8fcf1479f36d5f72","name":"0-15.json","type":"application/json","lastModified":1709801413544.264,"size":1255},{"id":"1573f0bb9676183b5a0fd609071ed1b3a143d32c8d1bdad65abab28fe121639a0730cf3da380ea731991de0768964b50b07d1737b8f57b418068b9993eb936a8","href":"https://static.observableusercontent.com/files/1573f0bb9676183b5a0fd609071ed1b3a143d32c8d1bdad65abab28fe121639a0730cf3da380ea731991de0768964b50b07d1737b8f57b418068b9993eb936a8","name":"inputdegrees@2.json","type":"application/json","lastModified":1709462884155.734,"size":2755}] 2f:{"id":"d6b6c30c928faade","slug":null,"title":"Temporal force-directed graph","thumbnail":"20773daac54478be9aa49b759e820367146a24d7fa0511971b9358128917b002","access_level":"public","create_time":"$D2024-03-03T10:48:04.155Z","update_time":"$D2024-04-04T04:27:36.529Z","view_time":null,"first_public_time":"$D2024-03-03T10:59:07.481Z","has_unpublished_edits":null,"fork":{"id":"0dcf23e97b47170b","slug":null,"title":"Temporal force-directed graph","owner":{"id":"62728f3cec297de2","login":"dmru2","name":"akanksha"}},"stars":1,"starred":false,"owner":{"type":"team","id":"62728f3cec297de2","login":"dmru2","name":"akanksha","avatar_url":"https://avatars-next.observableusercontent.com/7a209c2f2f0979e0078ce7cb061de2d05ba9c7d947d1af7a0e491e2a08e3d144","tier":"starter_2024"},"version":1580,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8638839db421c1c2","login":"akanksha-sharma","name":"akanksha sharma","avatar_url":"https://avatars-next.observableusercontent.com/4658a505dc618cc7495745d976f8e172df3940442a6335cc93c8bf581d2d63cc","tier":null}],"members":[{"type":"individual","id":"8638839db421c1c2","login":"akanksha-sharma","name":"akanksha sharma","avatar_url":"https://avatars-next.observableusercontent.com/4658a505dc618cc7495745d976f8e172df3940442a6335cc93c8bf581d2d63cc","tier":null,"role":"editor"},{"type":"team","id":"62728f3cec297de2","login":"dmru2","name":"akanksha","avatar_url":"https://avatars-next.observableusercontent.com/7a209c2f2f0979e0078ce7cb061de2d05ba9c7d947d1af7a0e491e2a08e3d144","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"viewof i = Scrubber(temps, \n{\n min: 0,\n max: 25,\n value: 0,\n step: 0.5,\n delay: 10,\n loop: true,\n format: value => value.toFixed(1) + \"°C\"\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"svgChart = chart();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = \n{\n const {nodes, links} = await FileAttachment(\"inputdegrees@2.json\").json();\n for (const d of [...nodes, ...links]) \n {\n d.start = parseInt(d.start);\n d.end = parseInt(d.end);\n };\n return {nodes, links};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"temps = d3.scaleRadial()\n .domain([d3.min(data.nodes, d => d.start), d3.max(data.nodes, d => d.end)])\n .ticks(1000)\n .filter(temp => data.nodes.some(d => contains(d, temp)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"update = (temp) => \n{\n const { nodes, links } = filterData(data, temp);\n svgChart.update({ nodes, links })\n}; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"function contains(node, value) {\n return value >= node.start && value <= node.end;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0).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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"update(i);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"