28:null 29:["$","title",null,{"children":"Rounded d3-voronoi-map animated-tick | Gordon Tu | Observable"}] 2e:T629,chart = { let color = muzli[Palette]; let seed = seededRandom(randomSeeds); let simulation = d3 .voronoiMapSimulation(data_0) .initialPosition(d3.voronoiMapInitialPositionPie()) // .size([width / 2, height / 2]) .weight((d) => d.weight) .prng(seed) .clip(ellipse) .stop(); function ticked() { let state = simulation.state(), polygons = state.polygons; console.log(polygons[0].site); const cell = svg .selectAll(".cell") .data(polygons) .join("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("class", "cell"); cell .selectAll("path") .data((d) => [d]) .join("path") // .attr("d", (d) => `M${d.join("L")}Z`) .attr("d", (d, i) => { d.area = d3.polygonArea(d); // console.log(d.area); return drawRoundedPolygon(d, area_scale(d.area)); //rounded-corners.js }) .attr("fill", (d, i) => { return color[randInt(5)]; }) .attr("stroke", "white") .attr("stroke-width", 10); } const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 100]); svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .append("circle") .attr("cx", 300) .attr("cy", 300) .attr("r", 310) .attr("stroke", "lightgrey"); while (true) { ticked(); // Update the SVG content yield Promises.tick(1000, svg.node()); // Wait for 1 second simulation.tick(); // Manually advance the simulation by one tick } }2f:T1ef1,drawRoundedPolygon = { //Based on: https://bl.ocks.org/mbostock/76456029b13c68accf6e //But converted to SVG paths using https://github.com/d3/d3-path //I don't understand anything that is going on in these functions o_O function drawRoundedPolygon(points, r) { var i, n = points.length, p0, p1, p2, p3, n1 = 0, t012, t123, x21, y21, x4, y4, x5, y5, moved, circle = polygonInCircle(points); // Build a linked list from the array of vertices so we can splice. for (i = 0, p1 = points[n - 2], p2 = points[n - 1]; i < n; ++i) { (p0 = p1), (p1 = p2), (p2 = points[i]); p1.previous = p0; p1.next = p2; } // The rounding radius can’t be bigger than the polygon’s incircle. // The fudge factor of 1px lets the rounded polygon get squished a bit. // TODO Abort the search for the incircle if one is found larger than r. r = Math.min(r, circle.radius - 1); if (r <= 0) return; // TODO do we need to make all these extra passes? for (i = 0, p3 = p2.next; n1 <= n; ++n1) { (p0 = p1), (p1 = p2), (p2 = p3), (p3 = p3.next); t012 = cornerTangent(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], r); t123 = 1 - cornerTangent(p3[0], p3[1], p2[0], p2[1], p1[0], p1[1], r); // If the following corner’s tangent is before this corner’s tangent, // replace p1 and p2 with the intersection of the lines 01 and 23. if (t012 >= t123) { p2 = p0.next = p3.previous = lineLineIntersection( p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], p3[0], p3[1] ); p2.previous = p0; p2.next = p3; p3 = p2; p2 = p3.previous; p1 = p2.previous; p0 = p1.previous; n1 = 0; if (--n < 3) break; } //if } //for i // If we removed too many points, just draw the previously computed incircle. function draw(context) { if (n < 3) { context.moveTo(circle[0] + circle.radius, circle[1]); context.arc(circle[0], circle[1], circle.radius, 0, 2 * Math.PI); return; } //if // Draw the rounded polygon, compting the corner tangents. for (i = 0; i <= n; ++i) { (p0 = p1), (p1 = p2), (p2 = p3), (p3 = p3.next); t012 = cornerTangent(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], r); t123 = 1 - cornerTangent(p3[0], p3[1], p2[0], p2[1], p1[0], p1[1], r); (x21 = p2[0] - p1[0]), (y21 = p2[1] - p1[1]); (x4 = p1[0] + t012 * x21), (y4 = p1[1] + t012 * y21); (x5 = p1[0] + t123 * x21), (y5 = p1[1] + t123 * y21); if (moved) context.arcTo(p1[0], p1[1], x4, y4, r); else (moved = true), context.moveTo(x4, y4); context.lineTo(x5, y5); } //for i return context; } //function draw let p = d3.path(); return draw(p).toString(); } //function drawRoundedPolygon // Given a circle of radius r that is tangent to the line segments 01 and 12, // returns the parameter t of the tangent along the line segment 12. function cornerTangent(x0, y0, x1, y1, x2, y2, r) { var theta = innerAngle(x0, y0, x1, y1, x2, y2), x21 = x2 - x1, y21 = y2 - y1, l21 = Math.sqrt(x21 * x21 + y21 * y21), l14 = r / Math.tan(theta / 2); return l14 / l21; } //function cornerTangent // A horrible brute-force algorithm for determining the largest circle that can // fit inside a convex polygon. For each distinct set of three sides of the // polygon, compute the tangent circle. Then reduce the circle’s radius against // the remaining sides of the polygon. function polygonInCircle(points) { var circle = { radius: 0 }; for (var i = 0, n = points.length; i < n; ++i) { var pi0 = points[i], pi1 = points[(i + 1) % n]; for (var j = i + 1; j < n; ++j) { var pj0 = points[j], pj1 = points[(j + 1) % n], pij = j === i + 1 ? pj0 : lineLineIntersection( pi0[0], pi0[1], pi1[0], pi1[1], pj0[0], pj0[1], pj1[0], pj1[1] ); search: for (var k = j + 1; k < n; ++k) { var pk0 = points[k], pk1 = points[(k + 1) % n], pik = lineLineIntersection( pi0[0], pi0[1], pi1[0], pi1[1], pk0[0], pk0[1], pk1[0], pk1[1] ), pjk = k === j + 1 ? pk0 : lineLineIntersection( pj0[0], pj0[1], pj1[0], pj1[1], pk0[0], pk0[1], pk1[0], pk1[1] ), candidate = triangleInCircle( pij[0], pij[1], pik[0], pik[1], pjk[0], pjk[1] ), radius = candidate.radius; for (var l = 0; l < n; ++l) { var pl0 = points[l], pl1 = points[(l + 1) % n], r = pointLineDistance( candidate[0], candidate[1], pl0[0], pl0[1], pl1[0], pl1[1] ); if (r < circle.radius) continue search; if (r < radius) radius = r; } circle = candidate; circle.radius = radius; } } } return circle; } //function polygonInCircle // Returns the angle between segments 01 and 12. function innerAngle(x0, y0, x1, y1, x2, y2) { var x01 = x0 - x1, y01 = y0 - y1, x12 = x1 - x2, y12 = y1 - y2, x02 = x0 - x2, y02 = y0 - y2, l01_2 = x01 * x01 + y01 * y01, l12_2 = x12 * x12 + y12 * y12, l02_2 = x02 * x02 + y02 * y02; return Math.acos((l12_2 + l01_2 - l02_2) / (2 * Math.sqrt(l12_2 * l01_2))); } //function innerAngle // Returns the intersection of the infinite lines 01 and 23. function lineLineIntersection(x0, y0, x1, y1, x2, y2, x3, y3) { var x02 = x0 - x2, y02 = y0 - y2, x10 = x1 - x0, y10 = y1 - y0, x32 = x3 - x2, y32 = y3 - y2, t = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10); return [x0 + t * x10, y0 + t * y10]; } //function lineLineIntersection // Returns the signed distance from point 0 to the infinite line 12. function pointLineDistance(x0, y0, x1, y1, x2, y2) { var x21 = x2 - x1, y21 = y2 - y1; return ( (y21 * x0 - x21 * y0 + x2 * y1 - y2 * x1) / Math.sqrt(y21 * y21 + x21 * x21) ); } //function pointLineDistance // Returns the largest circle inside the triangle 012. function triangleInCircle(x0, y0, x1, y1, x2, y2) { var x01 = x0 - x1, y01 = y0 - y1, x02 = x0 - x2, y02 = y0 - y2, x12 = x1 - x2, y12 = y1 - y2, l01 = Math.sqrt(x01 * x01 + y01 * y01), l02 = Math.sqrt(x02 * x02 + y02 * y02), l12 = Math.sqrt(x12 * x12 + y12 * y12), k0 = l01 / (l01 + l02), k1 = l12 / (l12 + l01), center = lineLineIntersection( x0, y0, x1 - k0 * x12, y1 - k0 * y12, x1, y1, x2 + k1 * x02, y2 + k1 * y02 ); center.radius = Math.sqrt( ((l02 + l12 - l01) * (l12 + l01 - l02) * (l01 + l02 - l12)) / (l01 + l02 + l12) ) / 2; return center; } //function triangleInCircle return drawRoundedPolygon; } 30:[] 2c:{"id":"7dd33928d1690689","slug":null,"title":"Rounded d3-voronoi-map animated-tick","thumbnail":"ddfb0106a3cc90128128df4b27d7b5440e9f6d2ce5717a184b831cfcb3f809f1","access_level":"public","create_time":"$D2023-08-23T20:35:09.400Z","update_time":"$D2023-08-30T20:18:33.705Z","view_time":null,"first_public_time":"$D2023-08-23T20:35:09.400Z","has_unpublished_edits":null,"fork":{"id":"fed80f197af4446f","slug":null,"title":"Rounded d3 voronoi","owner":{"id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024"},"version":396,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null}],"members":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rounded d3-voronoi-map animated-tick","cells":[{"id":0,"value":"# Rounded d3-voronoi-map animated-tick\n\nhttps://observablehq.com/@mbostock/voroblobinoids\nhttps://observablehq.com/@mbostock/rounded-convex-polygon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"viewof Palette = Inputs.range([0, 15], {\n label: \"Color Palette\",\n value: 15,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"Color = displayPalettes(muzli[Palette], true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"seededRandom(randomSeeds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"viewof randomSeeds = Inputs.range([0, 100], {\n label: \"Random Seed\",\n value: 87,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"area_scale = d3.scaleSqrt().domain([0, 100000]).range([4, 30])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"d3 = require(\"d3@6\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"# Voronoi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"data_0 = [\n { name: \"A\", weight: 20 },\n { name: \"B\", weight: 30 },\n { name: \"C\", weight: 40 },\n { name: \"D\", weight: 8 },\n { name: \"E\", weight: 11 },\n { name: \"E\", weight: 33 },\n { name: \"F\", weight: 48 },\n { name: \"G\", weight: 20 },\n { name: \"H\", weight: 23 },\n { name: \"I\", weight: 10 },\n { name: \"J\", weight: 640 }\n // ... more data objects\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"// sa = d3\n// .forceSimulation(data_0)\n// .force(\"y\", d3.forceY(height / 2).strength(0.05))\n// .on(\"tick\", () => {\n// console.log(data_0[0].x);\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"ellipse = d3\n .range(100)\n .map((i) => [\n (600 * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"import { muzli } from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"import { randInt,seededRandom } from \"@makio135/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import { displayPalettes } from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2d:"$2c:body"