45:["$","title",null,{"children":"Moving Bubble Chart Using D3.js | Won | Observable"}] 4d:Tad6,chart = { // Variables. let time_so_far = 0; // The SVG object. // const svg = d3.select("#chart").append("svg") // .attr("width", width + 20 + 20) // .attr("height", height + 20 + 20) // .append("g") // .attr("transform", "translate(" + 20 + "," + 20 + ")"); 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 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; o.timeleft = o.stages[o.istage].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, 2000); return svg.node() }4e: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; }4f:[{"id":"6a533c858b154cac22f3ef89daae5a0fee936e7f7b4c0283136916247cafb2a2e0d6fae116f57963840d2ddec95077356f1d73f69b207eaa61f421d2605a9caf","href":"https://static.observableusercontent.com/files/6a533c858b154cac22f3ef89daae5a0fee936e7f7b4c0283136916247cafb2a2e0d6fae116f57963840d2ddec95077356f1d73f69b207eaa61f421d2605a9caf","name":"stages.csv","type":"text/csv","lastModified":1626115301594.209,"size":11770},{"id":"da7eb4dcbbf0e87009d6a374c01b282e4310d6d53eddd6915fc04b41980a36d4667a4035773773e9b9e966c28477d566b732b21f0a28bfdb9bf420b21c166e87","href":"https://static.observableusercontent.com/files/da7eb4dcbbf0e87009d6a374c01b282e4310d6d53eddd6915fc04b41980a36d4667a4035773773e9b9e966c28477d566b732b21f0a28bfdb9bf420b21c166e87","name":"stages.tsv","type":"text/tab-separated-values","lastModified":1626115301594.209,"size":13508}] 49:{"id":"72dab64fff908ac6","slug":"moving-bubble-chart-using-d3-js","title":"Moving Bubble Chart Using D3.js","thumbnail":"bc7b7958c877a0a3fd169095bf03e1f8f542b21fc64c1b7b158b6f291fa72cfa","access_level":"public","create_time":"$D2021-07-12T18:41:41.594Z","update_time":"$D2021-07-12T18:41:41.594Z","view_time":null,"first_public_time":"$D2021-07-12T18:42:09.477Z","has_unpublished_edits":null,"fork":{"id":"7d37382cbbdb6af7","slug":"moving-bubble-chart-using-d3-js","title":"Moving Bubble Chart Using D3.js","owner":{"id":"786169f6a53cf4e8","login":"kevin110604","name":"Chen Yijia"}},"stars":1,"starred":false,"owner":{"type":"team","id":"844b080761c95a94","login":"wjin0352","name":"Won","avatar_url":"https://avatars-next.observableusercontent.com/a57087bcc6386ba40583e2f1bbd25a19ed2c400e58ea5ec1d8fdb3f1a79bf342","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":385,"publish_version":385,"role":null,"authored":false,"authors":[{"type":"individual","id":"21668d9bfcc5652d","login":"wjin0352","name":"Won","avatar_url":"https://avatars-next.observableusercontent.com/a57087bcc6386ba40583e2f1bbd25a19ed2c400e58ea5ec1d8fdb3f1a79bf342","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"21668d9bfcc5652d","login":"wjin0352","name":"Won","avatar_url":"https://avatars-next.observableusercontent.com/a57087bcc6386ba40583e2f1bbd25a19ed2c400e58ea5ec1d8fdb3f1a79bf342","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Moving Bubble Chart Using D3.js","cells":[{"id":0,"value":"md`# Moving Bubble Chart Using D3.js`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"FileAttachment(\"stages.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"FileAttachment(\"stages.tsv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"FileAttachment(\"stages.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"width = 860","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"radius = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"padding = 1 // Space between nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"groups = {\n const groups = {\n \"met\": { x: width/5, y: height/3, color: \"#FAF49A\", cnt: 0, fullname: \"Met\" },\n \"romantic\": { x: 3*width/5, y: height/3, color: \"#BEE5AA\", cnt: 0, fullname: \"Romantic\" },\n \"lived\": { x: 3*width/5, y: 2*height/3, color: \"#93D1BA\", cnt: 0, fullname: \"Lived Together\" },\n \"married\": { x: width/5, y: 2*height/3, color: \"#79BACE\", cnt: 0, fullname: \"Married\" },\n };\n return groups\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"groups['lived']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"// Load data.\n// stages = {\n// const data = d3.tsvParse(await FileAttachment(\"stages.tsv\").text(), (pid, grp, duration) => {\n// return {\n// pid: pid,\n// grp: grp,\n// duration: duration\n// }\n// });\n// return data\n// }\nstages = d3.csvParse(await FileAttachment(\"stages.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"stages[100]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"// Consolidate stages by pid.\n// The data file is one row per stage change.\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"html`\n\n \n Timed Moving Bubbles\n \n\n \n

Time so far: 0

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null