Timed Moving Bubbles

2b:null 2c:["$","title",null,{"children":"MKR Voter Visualization 👾 | jpark | Observable"}] 31:T1395,chart = { let currentBlock = firstBlock; let voteCursor = 0; let lockCursor = 0; let freeCursor = 0; let started = false; const svg = d3.create("svg").attr("viewBox", [0, 0, width + 40, height + 40]); const g = 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) => -200) .attr("cy", (d) => height / 2) .attr("fill", (d) => d.color) .attr("r", (d) => 0) .style("stroke", "#3a403d") .style("stroke-width", "1px"); // Group name labels const labels = svg .selectAll(".grp") .data(groups) .join("text") .attr("class", "grp") .attr("text-anchor", "middle") .attr("x", (d) => d.x) .attr("y", (d) => d.y - 70) .text((d) => d.id.toLowerCase() === "0xf44113760c4f70afeeb412c63bc713b13e6e202e" ? "MCD Launch" : d.fullname ) .style("cursor", "pointer") .style("font-weight", "bold") .style("font-size", "17px") .style("font-family", "Open Sans") .append("svg:title") .text((d) => d.id); // MKR counts svg .selectAll(".grpcnt") .data(groups) .join("text") .attr("class", "grpcnt") .attr("text-anchor", "middle") .attr("x", (d) => d.x) .attr("y", (d) => d.y - 50) .text((d) => `${d.cnt} MKR`) .style("font-size", "16px") .style("font-family", "Open Sans"); // Forces const simulation = d3 .forceSimulation(nodes) .force("cluster", forceCluster()) .force("collide", forceCollide()) .alpha(0.09) .alphaDecay(0); simulation.on("tick", () => { if (started) { circle .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => (d.groug === "hidden" ? 0 : d.r)) .attr("fill", (d) => colorScaleLog(d.mkrAmt)); } }); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px"); circle .on("mouseover", function (d) { d3.select(this).style("stroke-width", "3px"); tooltip.text(d.sender); return tooltip.style("visibility", "visible"); }) .on("mousemove", function (d) { return tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function (d) { d3.select(this).style("stroke-width", "1px"); tooltip.text(""); return tooltip.style("visibility", "hidden"); }); // mine blocks async function timer() { started = true; while (votesFiltered[voteCursor].blockNumber < currentBlock) { const node = nodes[ senderToNodeIndex[votesFiltered[voteCursor].sender.toLowerCase()] ]; if (node.group) { groups.find((group) => group.id === node.group).cnt -= Math.floor( node.mkrAmt ); } node.group = votesFiltered[voteCursor].candidates[0] ? votesFiltered[voteCursor].candidates[0] : "hidden"; if (votesFiltered[voteCursor].candidates[0]) { groups.find( (group) => group.id === votesFiltered[voteCursor].candidates[0] ).cnt += Math.floor(node.mkrAmt); } voteCursor += 1; } // update node mkr deposits while ( !!locks[lockCursor] && locks[lockCursor].blockNumber < currentBlock ) { const node = nodes[senderToNodeIndex[locks[lockCursor].sender.toLowerCase()]]; if (node) { node.mkrAmt += Math.floor(locks[lockCursor].amount.toNumber()); groups.find((group) => group.id === node.group).cnt += Math.floor( locks[lockCursor].amount.toNumber() ); } lockCursor += 1; } while ( !!frees[freeCursor] && frees[freeCursor].blockNumber < currentBlock ) { const node = nodes[senderToNodeIndex[frees[freeCursor].sender.toLowerCase()]]; if (node) { node.mkrAmt -= Math.floor(frees[freeCursor].amount.toNumber()); groups.find((group) => group.id === node.group).cnt -= Math.floor( frees[freeCursor].amount.toNumber() ); } freeCursor += 1; } // Increment time. currentBlock += 100; d3.select("#timecount .cnt").text(currentBlock); // Update counters. svg.selectAll(".grpcnt").text((d) => `${d.cnt.toLocaleString()} MKR`); // Do it again. if (currentBlock <= lastBlock + 100) { await Promises.tick(10); timer(); } else { simulation.stop(); } } if (bubbleChartOn) { d3.timeout(timer, 1000); } return svg.node(); }32:T53f,// Force for collision detection. function forceCollide() { const alpha = 0.25; // 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; }33:[] 2f:{"id":"e82bbb14151695ae","slug":"mkr-voter-visualization","title":"MKR Voter Visualization 👾","thumbnail":"e2bbd1fba4785cb202949888f204bfaa5e5276ad64494ecde1c68d0aac712787","access_level":"public","create_time":"$D2020-05-07T03:08:02.098Z","update_time":"$D2022-01-24T23:29:16.173Z","view_time":null,"first_public_time":"$D2020-05-08T06:20:25.177Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"75a1153b1f93cd48","login":"jparklev","name":"jpark","avatar_url":"https://avatars-next.observableusercontent.com/9af5c11e007fc5f66f9624cbfc1bad0fd8296d28d64126149eb0992f07ac46b3","tier":"starter_2024"},"version":1853,"publish_version":1853,"role":null,"authored":false,"authors":[{"type":"individual","id":"50a8beb6caf2400d","login":"jparklev","name":"jpark","avatar_url":"https://avatars-next.observableusercontent.com/9af5c11e007fc5f66f9624cbfc1bad0fd8296d28d64126149eb0992f07ac46b3","tier":null}],"members":[{"type":"individual","id":"50a8beb6caf2400d","login":"jparklev","name":"jpark","avatar_url":"https://avatars-next.observableusercontent.com/9af5c11e007fc5f66f9624cbfc1bad0fd8296d28d64126149eb0992f07ac46b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"MKR Voter Visualization 👾","cells":[{"id":0,"value":"md`# MKR Voter Visualization 👾`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"md`*Note: all data is fetched directly from the node on each load, so it might take a second to load in*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"md`Each circle represents an active vote. For the most part, you'd be right to think that circles are one-to-one with voter addresses (since voters tend to vote for one proposal at a time), but it's important to remember that an address can have up to 5 votes at once`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"md`**Construction Notice** ⚠️ Multi-votes are not yet being factored in, so while it's a decent picture since most addresses vote for only one spell at a time, it's not complete`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"md`Each voter is log scale colored based on the amount of MKR the voter has locked`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"svg_element = {\n const mkrAmts = [0, 100, 1000, 10000, 100000];\n return html`

${mkrAmts.map(\n amt =>\n `

\n\n${kFormat(amt)}\n

`\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"viewof bubbleChartOn = {\n let value = false;\n const button = html`

Block 0