2b:null 2c:["$","title",null,{"children":"Temporal force-directed graph | akanksha | Observable"}] 31:Td5f,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 -80 150 160") .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})`); // Update the node fill color based on whether they have links or not node.select("circle") .attr("fill", d => (nodesWithLinks.has(d.id) ? nodeColors[d.id] : "white")); 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:T55a,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, opacity: temp >= node.end - margin ? 0.5 : 1, // Set opacity to 0.5 for nodes that have reached their end temperature })); // 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; }).map((d) => ({ ...d, color: temp >= d.start && temp <= d.end ? "#6CB4EE" : "#7f7f7f", // Set link color based on whether it's active or not })); return { nodes: updatedNodes, links: filteredLinks }; }33:[{"id":"1573f0bb9676183b5a0fd609071ed1b3a143d32c8d1bdad65abab28fe121639a0730cf3da380ea731991de0768964b50b07d1737b8f57b418068b9993eb936a8","href":"https://static.observableusercontent.com/files/1573f0bb9676183b5a0fd609071ed1b3a143d32c8d1bdad65abab28fe121639a0730cf3da380ea731991de0768964b50b07d1737b8f57b418068b9993eb936a8","name":"inputdegrees@2.json","type":"application/json","lastModified":1712204865696.286,"size":2755}] 2f:{"id":"090f8a3faae42649","slug":null,"title":"Temporal force-directed graph","thumbnail":"c696821fb67ff9d2ec02c69cf1c84a7371aec84800dc3cf8e142f1f5eb52e1ad","access_level":"public","create_time":"$D2024-04-04T04:27:45.696Z","update_time":"$D2024-04-08T12:08:27.257Z","view_time":null,"first_public_time":"$D2024-04-04T04:27:45.696Z","has_unpublished_edits":null,"fork":{"id":"d6b6c30c928faade","slug":null,"title":"Temporal force-directed graph","owner":{"id":"62728f3cec297de2","login":"dmru2","name":"akanksha"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62728f3cec297de2","login":"dmru2","name":"akanksha","avatar_url":"https://avatars-next.observableusercontent.com/7a209c2f2f0979e0078ce7cb061de2d05ba9c7d947d1af7a0e491e2a08e3d144","tier":"starter_2024"},"version":1680,"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":4,"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\n // Update the nodes' colors based on whether they have links or not\n const updatedNodes = nodes.map((node) => ({\n ...node,\n color: links.some(\n (link) =>\n (link.source === node.id && link.opacity === 1) ||\n (link.target === node.id && link.opacity === 1)\n ),\n }));\n\n // Update the chart with the updated node colors and link properties\n svgChart.update({ nodes: updatedNodes, links });\n \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"