2e:null 2f:["$","title",null,{"children":"Moving bubble plot of hospital transfers using D3.js | Richard Morris | Observable"}] 34:Ta50,chart = { // Variables. let time_so_far = 0; // The SVG object. const svg = d3.create("svg") .attr("viewBox", [0, 0, width+40, height+40]); // ??? svg.append("g") .attr("transform", "translate(" + 20 + "," + 20 + ")"); // ??? d3.select("#chart").style("width", (width + 20 + 20) + "px"); // Circle for each node. const circle = svg.append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => d.color); // Ease in the circles. circle .transition() .delay((d, i) => i * 5) .duration(800) .attrTween("r", d => { const i = d3.interpolate(0, d.r); return t => d.r = i(t); }); // Group name labels svg.selectAll('.grp') .data(d3.keys(groups)) .join("text") .attr("class", "grp") .attr("text-anchor", "middle") .attr("x", d => groups[d].x) .attr("y", d => groups[d].y - 70) .text(d => groups[d].fullname); // Group counts svg.selectAll('.grpcnt') .data(d3.keys(groups)) .join("text") .attr("class", "grpcnt") .attr("text-anchor", "middle") .attr("x", d => groups[d].x) .attr("y", d => groups[d].y - 50) .text(d => groups[d].cnt); // Forces const simulation = d3.forceSimulation(nodes) .force("x", d => d3.forceX(d.x)) .force("y", d => d3.forceY(d.y)) .force("cluster", forceCluster()) .force("collide", forceCollide()) .alpha(.09) .alphaDecay(0); // Adjust position (and color) of circles. simulation.on("tick", () => { circle .attr("cx", d => d.x) .attr("cy", d => d.y); // .attr("fill", d => groups[d.group].color); }); // Make time pass. Adjust node stage as necessary. function timer() { nodes.forEach(function (o, i) { o.timeleft -= 1; if (o.timeleft == 0 && o.istage < o.stages.length - 1) { // Decrease count for previous group. groups[o.group].cnt -= 1; // Update current node to new group. o.istage += 1; o.group = o.stages[o.istage].grp; // grp FROM CSV? o.timeleft = o.stages[o.istage].duration; // HERE IS DURATION // Increment count for new group. groups[o.group].cnt += 1; } }); // Increment time. time_so_far += 1; d3.select("#timecount .cnt").text(time_so_far); // Update counters. svg.selectAll('.grpcnt').text(d => groups[d].cnt); // Do it again. d3.timeout(timer, 500); } // @end timer() // Start things off after a few seconds. d3.timeout(timer, 1000); return svg.node() }35:T4b2,// Force for collision detection. function forceCollide() { const alpha = 0.2; // fixed for greater rigidity! const padding1 = padding; // separation between same-color nodes const padding2 = cluster_padding; // separation between different-color nodes let nodes; let maxRadius; function force() { const quadtree = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { const r = d.r + maxRadius; const nx1 = d.x - r, ny1 = d.y - r; const nx2 = d.x + r, ny2 = d.y + r; quadtree.visit((q, x1, y1, x2, y2) => { if (!q.length) do { if (q.data !== d) { const r = d.r + q.data.r + (d.group === q.data.group ? padding1 : padding2); let x = d.x - q.data.x, y = d.y - q.data.y, l = Math.hypot(x, y); if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l, d.y -= y *= l; q.data.x += x, q.data.y += y; } } } while (q = q.next); return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); } } force.initialize = _ => maxRadius = d3.max(nodes = _, d => d.r) + Math.max(padding1, padding2); return force; }36:[{"id":"057b08f9c583d5373531999c67c7cb5355a7c6ab383baca19f8e5aa66750209d69a0a81c37502c0da6cd0cfbdbc152504e1b242db39cbb44a823dbccf226e3b3","href":"https://static.observableusercontent.com/files/057b08f9c583d5373531999c67c7cb5355a7c6ab383baca19f8e5aa66750209d69a0a81c37502c0da6cd0cfbdbc152504e1b242db39cbb44a823dbccf226e3b3","name":"trajectories@5.csv","type":"text/csv","lastModified":1593842768546.784,"size":15119}] 32:{"id":"6b04cb2a216b4c55","slug":"moving-bubble-plot-of-hospital-transfers-using-d3-js","title":"Moving bubble plot of hospital transfers using D3.js","thumbnail":"8ad59bb8711557f425f2e1ed39224ed9d0111d40676688f4594ee04177982942","access_level":"public","create_time":"$D2020-07-04T02:30:11.693Z","update_time":"$D2020-09-14T01:54:43.930Z","view_time":null,"first_public_time":"$D2020-07-04T05:55:00.568Z","has_unpublished_edits":null,"fork":true,"stars":24,"starred":false,"owner":{"type":"team","id":"b7588a95695c1a1d","login":"datarichard","name":"Richard Morris","avatar_url":"https://avatars-next.observableusercontent.com/b517f51b85d2a91d56e089e5a6ddc1fc14e13289aa5fcffce593666b05c94936","tier":"starter_2024"},"version":619,"publish_version":619,"role":null,"authored":false,"authors":[{"type":"individual","id":"13b7845c8bfd2e3f","login":"datarichard","name":"Richard Morris","avatar_url":"https://avatars-next.observableusercontent.com/b517f51b85d2a91d56e089e5a6ddc1fc14e13289aa5fcffce593666b05c94936","tier":null}],"members":[{"type":"individual","id":"13b7845c8bfd2e3f","login":"datarichard","name":"Richard Morris","avatar_url":"https://avatars-next.observableusercontent.com/b517f51b85d2a91d56e089e5a6ddc1fc14e13289aa5fcffce593666b05c94936","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"title":"Moving bubble plot of hospital transfers using D3.js","cells":[{"id":0,"value":"md`# Moving bubble plot of hospital transfers using D3.js\n*** \nThe data is ICD-10 coded STEMI patients (I21.0-3) who presented to ED and were admitted within NSLHD and CCLHD. Only patients who were transferred between facilities are shown.\n
\n\nEach day since May 1st 2016 is shown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"html`\n\n \n Timed Moving Bubbles\n \n\n \n

Day: 0

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`The data consists of _pid_, _grp_ and _duration_. _pid_ is the identity (ID) of the patient (i.e., anonymised journey key), represented by a moving circle in the visualization. _grp_ is the hospital that each patient can visit at any one time: _RNS_, _Hornsby_, _Gosford_, _Ryde_. Only transfers are represented here so all patients will visit at least two hospitals, moving between each hospital in a serial fashion. The length of time (days since May 1st 2016) until transfer is given in _duration_. \n\nNote that the row order of the data provides the order of transfers for each patient.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"FileAttachment(\"trajectories@5.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"FileAttachment(\"trajectories@5.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"width = 860","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"radius = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"padding = 1 // Space between nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"cluster_padding = 5; // Space between nodes in different stages","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"groups = {\n const groups = {\n \"Gosford\": { x: 450, y: 150, color: \"#93D1BA\", cnt: 0, fullname: \"Gosford\" },\n \"Wyong\": { x: 550, y: 100, color: \"#BEE5AA\", cnt: 0, fullname: \"Wyong\"},\n \"Hornsby\": { x: 200, y: 375, color: \"#79BACE\", cnt: 0, fullname: \"Hornsby\" },\n \"Ryde\": { x: 150, y: 500, color: \"lightblue\", cnt: 0, fullname: \"Ryde\" },\n \"Mona Vale\": { x: 500, y: 350, color: \"pink\", cnt: 0, fullname: \"Mona Vale\"},\n \"Manly\": { x: 450, y: 500, color: \"#FAF49A\", cnt: 0, fullname: \"Manly\"},\n \"RNS\": { x: 300, y: 550, color: \"grey\", cnt: 0, fullname: \"RNS\" },\n };\n return groups\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"groups['RNS'] // take a peek at a group (hospital)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"// Load data.\nstages = d3.csvParse(await FileAttachment(\"trajectories@5.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"stages[10] // take a peek at a stage (transfer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"// Consolidate stages by pid.\n// The data file is one row per stage change (transfer).\npeople = {\n const people = {};\n stages.forEach(d => {\n if (d3.keys(people).includes(d.pid + \"\")) {\n people[d.pid + \"\"].push(d);\n } else {\n people[d.pid + \"\"] = [d];\n }\n });\n return people\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"// Create node data.\nnodes = d3.keys(people).map(function(d) {\n // Initialize count for each group.\n groups[people[d][0].grp].cnt += 1;\n return {\n id: \"node\"+d,\n x: groups[people[d][0].grp].x + Math.random(),\n y: groups[people[d][0].grp].y + Math.random(),\n r: radius,\n color: groups[people[d][0].grp].color,\n group: people[d][0].grp,\n timeleft: people[d][0].duration,\n istage: 0,\n stages: people[d]\n }\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"// Force to increment nodes to groups.\nfunction forceCluster() {\n const strength = .15;\n let nodes;\n\n function force(alpha) {\n const l = alpha * strength;\n for (const d of nodes) {\n d.vx -= (d.x - groups[d.group].x) * l;\n d.vy -= (d.y - groups[d.group].y) * l;\n }\n }\n force.initialize = _ => nodes = _;\n\n return force;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"