34:["$","title",null,{"children":"Moving Bubble Chart Using D3.js (Internship Search Data w/ Persisting Bubble Colors) | Anthony Teo | Observable"}] 3c:Tc38,chart = { // Variables. var 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) circle.attr("fill", d => { if (groups[d.group].color == "match") { return d.color }return groups[d.group].color}); }); const textb = svg.append("text").text("").attr("x", 60).attr("y", 100).attr("fill", "black"); let startdate = new Date(2020, 6, 1) // 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; var currdate = new Date(startdate.getTime() + time_so_far * 86400000); textb.text(currdate.toDateString().split(' ').slice(1).join(' ')); // Update counters. svg.selectAll('.grpcnt').text(d => groups[d].cnt); if (currdate < new Date(2021, 0, 9)) { d3.timeout(timer, 250); } } // @end timer() // Start things off after a few seconds. d3.timeout(timer, 15000); return svg.node() }3d: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; }3e:[{"id":"bed52ca013b9c31f8fadc251dfd61653b595532e28f1455e86d31d5232f05891541f6d43e7fa8362dcdda91f2c094961968fa95136e95961946cc10318db149c","href":"https://static.observableusercontent.com/files/bed52ca013b9c31f8fadc251dfd61653b595532e28f1455e86d31d5232f05891541f6d43e7fa8362dcdda91f2c094961968fa95136e95961946cc10318db149c","name":"2021search.csv","type":"text/csv","lastModified":1617394438858.744,"size":11775}] 38:{"id":"9d6448ceb0340415","slug":"moving-bubble-chart-using-d3-js-internship-search-data-w-per","title":"Moving Bubble Chart Using D3.js (Internship Search Data w/ Persisting Bubble Colors)","thumbnail":"879117f6b20a819778547ce0d27a23493687351970cc2ad825f8a55e7cba51bc","access_level":"public","create_time":"$D2021-04-02T20:09:06.661Z","update_time":"$D2021-04-02T20:18:27.880Z","view_time":null,"first_public_time":"$D2021-04-02T20:17:40.208Z","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":"139d457f048737be","login":"eightants","name":"Anthony Teo","avatar_url":"https://avatars-next.observableusercontent.com/3e3cb4e9cddda80fdfd4932381874efa76b47728e1b1ae883a470a864e25b7c4","tier":"starter_2024","bio":"Full Stack Developer with a passion for design. \r\nCS at Texas A&M. ","followed_by_you":false,"follows_you":false},"version":396,"publish_version":396,"role":null,"authored":false,"authors":[{"type":"individual","id":"da820890dcb2182d","login":"eightants","name":"Anthony Teo","avatar_url":"https://avatars-next.observableusercontent.com/3e3cb4e9cddda80fdfd4932381874efa76b47728e1b1ae883a470a864e25b7c4","tier":null,"bio":"Full Stack Developer with a passion for design. \r\nCS at Texas A&M. ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"da820890dcb2182d","login":"eightants","name":"Anthony Teo","avatar_url":"https://avatars-next.observableusercontent.com/3e3cb4e9cddda80fdfd4932381874efa76b47728e1b1ae883a470a864e25b7c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"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 (Internship Search Data w/ Persisting Bubble Colors)`","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 \"inactive\": { x: width/6, y: 4*height/6, color: \"#c9c9c9\", cnt: 0, fullname: \"Not Sent\" },\n \"applied\": { x: 2*width/6, y: 3*height/6, color: \"#BEE5AA\", cnt: 0, fullname: \"Applied\" },\n \"online assessment\": { x: 3.5*width/6, y: 2.5*height/6, color: \"#93D1BA\", cnt: 0, fullname: \"Online Assessment\" },\n \"final round interview\": { x: 5*width/6, y: 3*height/6, color: \"#a579ce\", cnt: 0, fullname: \"Interviews\" },\n \"rejected\": { x: 2*width/6, y: 5*height/6, color: \"match\", cnt: 0, fullname: \"Rejected\" },\n \"offer\": { x: 3.5*width/6, y: 5.5*height/6, color: \"match\", cnt: 0, fullname: \"Offer\" },\n \"discontinued\": { x: 5*width/6, y: 5*height/6, color: \"match\", cnt: 0, fullname: \"Stopped Process\" },\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":162,"value":"stages = d3.csvParse(await FileAttachment(\"2021search.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":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][Math.max(people[d].length -2,1)].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":"$3c","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":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null