27:null 28:["$","title",null,{"children":"Temporal force-directed graph | whuang37's Workspace | Observable"}] 2d: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! } }); }2e:[{"id":"5c0e56b44362ec8e2621299d2ddce5ac68e4e1b11e08ac4547075b0e6374d9083a589eec442479ef7876be75215b8499cf9463743191cfe01e4ca3cb826135e5","href":"https://static.observableusercontent.com/files/5c0e56b44362ec8e2621299d2ddce5ac68e4e1b11e08ac4547075b0e6374d9083a589eec442479ef7876be75215b8499cf9463743191cfe01e4ca3cb826135e5","name":"sfhh@4.json","type":"application/json","lastModified":1698180057925.626,"size":2971473}] 2b:{"id":"c6323366ed7c98cf","slug":null,"title":"Temporal force-directed graph","thumbnail":"37d1c4b1fcd5082212f327e4aec95f08387cbdf6cf4999387b93dd447fa622bf","access_level":"public","create_time":"$D2023-10-24T20:40:57.925Z","update_time":"$D2023-10-24T20:43:23.581Z","view_time":null,"first_public_time":"$D2023-10-24T20:40:57.925Z","has_unpublished_edits":null,"fork":{"id":"6705012ea4863d3f","slug":"temporal-force-directed-graph","title":"Temporal force-directed graph","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f197eb3d5418ff63","login":"whuang37-ws","name":"whuang37's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/025165ba4923be33fa9bb07b8100f3d494923513d43be2c294e2d73b3a9b49ef","tier":"starter_2024"},"version":293,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb021e1e6b66cfe8","login":"whuang37","name":"whuang37","avatar_url":"https://avatars-next.observableusercontent.com/edb836485d71b188a33c983b41e226848fb8ce120d719ddcab8f339b5d5c74d7","tier":null}],"members":[{"type":"individual","id":"cb021e1e6b66cfe8","login":"whuang37","name":"whuang37","avatar_url":"https://avatars-next.observableusercontent.com/edb836485d71b188a33c983b41e226848fb8ce120d719ddcab8f339b5d5c74d7","tier":null,"role":"editor"},{"type":"team","id":"f197eb3d5418ff63","login":"whuang37-ws","name":"whuang37's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/025165ba4923be33fa9bb07b8100f3d494923513d43be2c294e2d73b3a9b49ef","tier":"starter_2024","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 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"contains = ({start, end}, time) => start <= time && time < end","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":172,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"# Motivations for Graph Selection\n\nI selected this graph since it offers a unique example of a way to display and show temporal data. While often temporal data is static where one axis is always taken up by the time, by placing time on an animation we can better illustrate the changes over time and show a more in depth view of what different networks look like in respect to their current time period. To add, the force direction also gives more emphasis to the overall graph where the very size itself can represent the network size, giving another layer to the overall analysis process.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"