2b:null 2c:["$","title",null,{"children":"Temporal force-directed graph | Coty Beasley | Observable"}] 31:Td88,chart = () => { const width = 928; const height = 680; const simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-50)) // 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", "-100 -60 150 150") .attr("style", "max-width: 100%; height: auto;"); let link = svg.append("g") .attr("stroke", "#808080") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .selectAll("line"); let node = svg.append("g") .attr("stroke", "#0000ffff") .attr("stroke-width", 0) .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 })); node = node .data(nodes) .join(enter => { const g = enter.append("g"); g.append("circle") .attr("r", 7) .attr("fill", d => nodeColors[d.id]) // Set node fill based on color scale .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); // Set the text content 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", "#808080") .style("opacity", "0.6") .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:[{"id":"a6e3ee3aff9f4c15db17b0a87d34716f949dab19b2ddff9f81f345b29ddd82d248ff4bb92e5823daccb8cb5c868b63af63f9faddbd146d8696648207c84fff85","href":"https://static.observableusercontent.com/files/a6e3ee3aff9f4c15db17b0a87d34716f949dab19b2ddff9f81f345b29ddd82d248ff4bb92e5823daccb8cb5c868b63af63f9faddbd146d8696648207c84fff85","name":"0-15@2.json","type":"application/json","lastModified":1715711839194.431,"size":1264}] 2f:{"id":"9d8e64e07404b1c6","slug":null,"title":"Temporal force-directed graph","thumbnail":"1448be35a3555a10407450b8435f61a37b676c5250cdffa99677df38b967864f","access_level":"public","create_time":"$D2024-05-14T18:37:19.194Z","update_time":"$D2024-05-14T19:12:49.987Z","view_time":null,"first_public_time":"$D2024-05-14T18:37:19.194Z","has_unpublished_edits":null,"fork":{"id":"0dcf23e97b47170b","slug":null,"title":"Temporal force-directed graph","owner":{"id":"62728f3cec297de2","login":"dmru2","name":"akanksha"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2a30f1b09369e429","login":"beacrea","name":"Coty Beasley","avatar_url":"https://avatars-next.observableusercontent.com/70bbcc1e3dd27512616cf8fb61d06472008b9a0533d3a23e5f12faa99d0ba601","tier":"starter_2024"},"version":1206,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f8d517f9b648a3ea","login":"beacrea","name":"Coty Beasley","avatar_url":"https://avatars-next.observableusercontent.com/70bbcc1e3dd27512616cf8fb61d06472008b9a0533d3a23e5f12faa99d0ba601","tier":null}],"members":[{"type":"team","id":"2a30f1b09369e429","login":"beacrea","name":"Coty Beasley","avatar_url":"https://avatars-next.observableusercontent.com/70bbcc1e3dd27512616cf8fb61d06472008b9a0533d3a23e5f12faa99d0ba601","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f8d517f9b648a3ea","login":"beacrea","name":"Coty Beasley","avatar_url":"https://avatars-next.observableusercontent.com/70bbcc1e3dd27512616cf8fb61d06472008b9a0533d3a23e5f12faa99d0ba601","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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: 100,\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(\"0-15@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(100)\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{\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":"function filterData(data, temp) \n{\n const filteredNodes = data.nodes.filter(d => temp >= parseInt(d.start) && temp < parseInt(d.end));\n const filteredLinks = data.links.filter(d => temp >= parseInt(d.start) && temp < parseInt(d.end));\n return { nodes: filteredNodes, links: filteredLinks };\n}","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.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","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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"