2f:T67b,{ const context = DOM.context2d(width, height); context.fillStyle = "rgb(200, 200, 200)"; context.fillRect(0, 0, width, height); context.fillStyle = "rgb(240, 240, 240)"; context.fillRect(margin.left, margin.top, width - margin.left - margin.right, height - margin.top - margin.bottom); // voronoi cells context.strokeStyle = "black"; context.beginPath(); voronoi.render(context); context.stroke(); context.strokeStyle = "orange"; cells.forEach(d => { const [[x, y], cell] = d; context.beginPath(); context.moveTo(x, y); context.lineTo(...d3.polygonCentroid(cell)); context.stroke(); }) context.fillStyle = "rgba(200, 0, 0, 1)"; data.forEach((d, i) => { context.beginPath(); context.arc(d.point[0], d.point[1], d.size, 0, Math.PI * 2); context.fill(); }); context.font = font; context.textAlign = "center" context.textBaseline = "middle"; data.forEach((d, i) => { const pos = positions[i]; const x = pos.x //- (d.rect[2] - d.rect[0]) / 2; const y = pos.y //+ (d.rect[3] - d.rect[1]) / 2; context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect( pos.x - (d.rect[2] - d.rect[0]) / 2, pos.y - (d.rect[3] - d.rect[1]) / 2, d.rect[2] - d.rect[0], d.rect[3] - d.rect[1]); context.fillStyle = "rgba(0, 0, 0, 1)"; context.fillText(d.name, x, y); }); context.strokeStyle = "black"; data.forEach((d, i) => { context.beginPath(); context.moveTo(d.point[0], d.point[1]); context.lineTo(positions[i].x, positions[i].y); context.stroke(); }); return context.canvas; }30:T1047,function ggrepel(data, xlim, ylim, push, pull, max_iter = 2000, dir = "both", max_overlaps = 10) { // Each data point gets a bounding box. const BBox = []; const CBox = []; const sizes = data.map(d => d.rect[2] - d.rect[0]); const min = Math.min(...sizes); const max = Math.max(...sizes); // add something to discard text boxes for (var i = 0; i < data.length ; ++i) { const { point, rect, hvjust, size } = data[i]; BBox.push(new RepelBox(...rect, ...hvjust, (sizes[i] - min) / max)); CBox.push(new Circle(...point, size)); } let force = new Vec2(); let iter = 0; let any_overlaps = true; let i_overlaps = true; let ci0, cj0, ci1, cj1; // this should live on the RepelBox instance! const total_overlaps = []; const too_many_overlaps = []; for (let i = 0; i < BBox.length; ++i) { total_overlaps.push(0); too_many_overlaps.push(false); } // while any overlaps exist and we haven't reached max iterations while (any_overlaps && iter < max_iter) { // forces get weaker over time. //push *= 0.9999; //pull *= 0.9999; iter += 1; any_overlaps = false; // loop through all text labels for (var i = 0; i < data.length; ++i) { if (iter == 2 && total_overlaps[i] > max_overlaps) { too_many_overlaps[i] = true; continue; } // Reset overlaps for the next iteration total_overlaps[i] = 0; i_overlaps = false; force.x = 0; force.y = 0; ci0 = BBox[i].centroid(); ci1 = CBox[i].centroid(); for (var j = 0; j < data.length; ++j) { cj0 = BBox[j].centroid(); cj1 = CBox[j].centroid(); // label / label intersection if (i !== j && !too_many_overlaps[j] && overlaps(BBox[i], BBox[j])) { // repel the box from overlapping boxes. any_overlaps = true; i_overlaps = true; total_overlaps[i] += 1; force.add(repel(ci0, cj0, push, dir)); } // label / data point intersection if (data[j].size === 0) { // skip the data points if the size and padding is 0. continue; } if (overlapsC(CBox[j], BBox[i])) { // repel the box from other data points. any_overlaps = true; i_overlaps = true; total_overlaps[i] += 1; force.add(repel(ci0, cj1, push, dir)) } } // Pull the box toward its original position. if (!i_overlaps) { force.add(spring(BBox[i].origin, ci0, pull, dir)); } let overlap_multiplier = 1.0; if (total_overlaps[i] > 10) { overlap_multiplier += 0.5; } else { overlap_multiplier += 0.05 * total_overlaps[i]; } // Apply velocity and put boxes within bounds BBox[i].velocity.scale(overlap_multiplier * BBox[i].scaledWidth).add(force); BBox[i].applyVelocity(); BBox[i].constrain(xlim, ylim); // look for line clashes if (!any_overlaps || iter % 5 == 0) { for (var j = 0; j < data.length; ++j) { ci0 = BBox[i].centroid(); cj0 = BBox[j].centroid(); ci1 = CBox[i].centroid(); cj1 = CBox[j].centroid(); // Switch label positions if lines overlap if (i !== j && j < BBox.length && linesIntersect(ci0, ci1, cj0, cj1)) { any_overlaps = true; BBox[i].applyForce(spring(cj0, ci0, 1, dir)); BBox[j].applyForce(spring(ci0, cj0, 1, dir)); // Check if resolved ci0 = BBox[i].centroid(); cj0 = BBox[j].centroid(); if (linesIntersect(ci0, ci1, cj0, cj1)) { BBox[i].applyForce(spring(cj0, ci0, 1.25, dir)); BBox[j].applyForce(spring(ci0, cj0, 1.25, dir)); } } } } } } console.log(iter) const positions = []; for (var i = 0; i < data.length; ++i) { positions.push({ x: (BBox[i].x1 + BBox[i].x2) / 2, y: (BBox[i].y1 + BBox[i].y2) / 2 }); //positions.push(BBox[i].centroid()) } return positions; }31:T675,class RepelBox { constructor(x1, y1, x2, y2, hjust, vjust, scaledWidth) { this.x1 = x1 || 0; this.y1 = y1 || 0; this.x2 = x2 || 0; this.y2 = y2 || 0; this.hjust = hjust || 0; this.vjust = vjust || 0; this.origin = this.centroid(); this.velocity = new Vec2(); this.scaledWidth = scaledWidth; } static _add(b, p) { return new RepelBox(b.x1 + p.x, b.y1 + p.y, b.x2 + p.x, b.y2 + p.y, this.hjust, this.vjust); }; get width() { return Math.abs(this.x1 - this.x2); } get height() { return Math.abs(this.y1 - this.y2); } applyForce(force) { this.x1 += force.x; this.y1 += force.y; this.x2 += force.x; this.y2 += force.y; } applyVelocity() { this.applyForce(this.velocity); } constrain(x, y) { let width = this.width; let height = this.height; let c = this.centroid(); let x1 = c.x - width / 2; let x2 = c.x + width / 2; let y1 = c.y - height / 2; let y2 = c.y + height / 2; if (this.x1 < x[0]) { this.x1 = x[0]; this.x2 = this.x1 + width; } else if (this.x2 > x[1]) { this.x2 = x[1]; this.x1 = this.x2 - width; } if (this.y1 < y[0]) { this.y1 = y[0]; this.y2 = this.y1 + height; } else if (this.y2 > y[1]) { this.y2 = y[1]; this.y1 = this.y2 - height; } } centroid() { return new Vec2( this.x1 + this.width * this.hjust, this.y1 + this.height * this.vjust ); } overlaps(box) { return box.x1 <= this.x2 && box.y1 <= this.y2 && box.x2 >= this.x1 && box.y2 >= this.y1; } }32:[] 2d:{"title":"Automated label placement","cells":[{"id":0,"value":"md`# Automated label placement`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"size = ({width, height: width / 3 * 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"margin = ({top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"x = d3.scaleLinear()\n .domain(d3.extent(mtcars, car => car.wt))\n\t.range([margin.left, size.width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"y = d3.scaleLinear()\n\t.domain(d3.extent(mtcars, car => car.mpg))\n\t.range([size.height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"xGrid = g => g\n .attr(\"transform\", `translate(0,${size.height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSize(-size.height + margin.top + margin.bottom))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\"text\").remove())\n .call(g => g.selectAll(\"line\").attr(\"stroke\", \"white\"));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"yGrid = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSize(-size.width + margin.left + margin.right))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\"text\").remove())\n .call(g => g.selectAll(\"line\").attr(\"stroke\", \"white\"));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"{\n const svg = d3.select(DOM.svg(size.width, size.height));\n \n svg.append(\"rect\")\n .attr(\"fill\", \"#f0f0f0\")\n .attr(\"x\", margin.left)\n .attr(\"y\", margin.top)\n .attr(\"width\", size.width - margin.left - margin.right)\n .attr(\"height\", size.height - margin.top - margin.bottom);\n \n svg.append('g').call(xGrid);\n svg.append('g').call(yGrid);\n\n \n svg.append(\"g\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"circle\")\n .data(mtcars)\n .join(\"circle\")\n .attr(\"cx\", car => x(car.wt))\n .attr(\"cy\", car => y(car.mpg))\n .attr(\"r\", 4)\n .append(\"title\").text(d => d.name);\n \n svg.append('g')\n .selectAll(\"labels\")\n .data(mtcars)\n .join(\"text\")\n .style(\"font\", font)\n .attr(\"transform\", (d, i) => `translate(${positions[i].x} ${positions[i].y})`)\n .attr(\"dy\", 3.5)\n .attr(\"text-anchor\", \"middle\")\n .text(car => car.name)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"positions = {\n const xlim = [margin.left, width - margin.right];\n const ylim = [margin.top, height - margin.bottom];\n \n return ggrepel(data, xlim, ylim, 0.008, 0.003, 1000, \"both\", 10);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1403,"value":"data = {\n //mtcars.map(car => ({ name: car.name, x: 1 / car.mpg, y: car.hp}))\n const data = [];\n for (let i = 0; i < mtcars.length; ++i) {\n const car = mtcars[i];\n const [[x, y], cell] = cells[i];\n const [cx, cy] = d3.polygonCentroid(cell);\n const size = 10;\n const rad = Math.atan2(cy - y, cx - x);\n const jitterX = Math.cos(rad);\n const jitterY = Math.sin(rad);\n let { width, height } = measureSize(car.name);\n data.push({\n point: [x, y],\n //width,\n //height,\n size: size/2,\n rect: [\n x - width / 2 + jitterX * size,\n y - height / 2 + jitterY * size,\n x + width / 2 + jitterX * size,\n y + height / 2 + jitterY * size\n ],\n hvjust: [jitterX, jitterY], //hvjust[i],\n name: car.name\n })\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2206,"value":"centroids = mtcars.map(car => [x(car.wt), y(car.mpg)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2210,"value":"delaunay = d3.Delaunay.from(centroids)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2214,"value":"voronoi = delaunay.voronoi([\n margin.left,\n margin.top,\n width - margin.right,\n height - margin.bottom\n]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2221,"value":"cells = centroids.map((d, i) => [d, voronoi.cellPolygon(i)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2000,"value":"md`---\n#### Repel`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"function spring(a, b, strength = 1e-6, direction = \"both\") {\n let force;\n switch(direction) {\n case \"x\":\n force = new Vec2(a.x - b.x, 0).scale(strength);\n break;\n case \"y\":\n force = new Vec2(0, a.y - b.y).scale(strength);\n break;\n default:\n force = Vec2.sub(a, b).scale(strength);\n }\n return force;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"function squareD(a, b) {\n // constrain squared distance to avoid division by 0\n const dx = Math.abs(a.x - b.x);\n const dy = Math.abs(a.y - b.y);\n return Math.max(dx * dx + dy * dy, 1e-6);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"function repelX(a, b, strength = 1e-6) {\n // compute a unit vector in the direction of the force.\n const force = new Vec2(1, 0);\n if (a[0] < b[0])\n force[0] = -1;\n return force\n .scale(strength)\n .scale(1 / squareD(a, b))\n .scale(2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"function repelY(a, b, strength = 1e-6) {\n // compute a unit vector in the direction of the force.\n const force = new Vec2(0, 1);\n if (a[1] < b[1])\n force[1] = -1;\n return force\n .scale(strength)\n .scale(1 / squareD(a, b))\n .scale(2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"function repelXY(a, b, strength) {\n // constrain squared distance to avoid division by 0\n const dx = Math.abs(a.x - b.x);\n const dy = Math.abs(a.y - b.y);\n const d2 = Math.max(dx * dx + dy * dy, 0.0004);\n // compute a unit vector in the direction of the force.\n //console.log(strength, squareD(a, b))\n const force = Vec2.sub(a, b)\n //.normalize()\n .scale(strength)\n //.scale(strength * squareD(a, b))\n //.scale(1 / squareD(a, b));\n if (dx > dy) {\n //force.y *= 2;\n }\n else {\n //force.x *= 2;\n }\n return force;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"function repel(a, b, strength = 1e-6, direction = \"both\") {\n let force;\n switch (direction) {\n case \"x\":\n force = repelX(a, b, strength);\n break;\n case \"y\":\n force = repelY(a, b, strength);\n break;\n default:\n force = repelXY(a, b, strength);\n }\n return force;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"function overlaps(a, b) {\n return b.x1 <= a.x2 &&\n b.y1 <= a.y2 &&\n b.x2 >= a.x1 &&\n b.y2 >= a.y1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1544,"value":"function overlapsC(c, r) {\n // Center of the circle.\n // Center of the rectangle.\n const r_x = (r.x1 + r.x2) / 2;\n const halfwidth = Math.abs(r.x1 - r_x);\n // Distance between centers.\n const cx = Math.abs(c.x - r_x);\n const xDist = halfwidth + c.r;\n if (cx > xDist) {\n return false;\n }\n // Center of the circle.\n // Center of the rectangle.\n const r_y = (r.y1 + r.y2) / 2;\n const halfheight = Math.abs(r.y1 - r_y);\n // Distance between centers.\n const cy = Math.abs(c.y - r_y);\n const yDist = halfheight + c.r;\n if (cy > yDist) {\n return false;\n }\n if (cx <= halfwidth || cy <= halfheight) {\n return true;\n }\n \n const xCornerDistSq = Math.pow(cx - halfwidth, 2);\n const yCornerDistSq = Math.pow(cy - halfheight, 2);\n const maxCornerDistSq = c.r * c.r;\n return xCornerDistSq + yCornerDistSq <= maxCornerDistSq;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"md`---\n#### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1531,"value":"class Circle {\n constructor(x, y, r) {\n this.x = x || 0;\n this.y = y || 0;\n this.r = r || 0;\n }\n \n centroid() {\n return new Vec2(this.x, this.y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"class Vec2 {\n \n constructor(x = 0, y = 0) {\n this.x = +x || 0;\n this.y = +y || 0;\n }\n \n static add(a, b) {\n return new Vec2(a.x + b.x, a.y + b.y);\n }\n \n static sub(a, b) {\n return new Vec2(a.x - b.x, a.y - b.y);\n }\n\n static mul(a, f) {\n return new Vec2(a.x * f, a.y * f)\n }\n\n static div(a, f) {\n return new Vec2(a.x / f, a.y / f)\n }\n\n add(v) {\n this.x += v.x;\n this.y += v.y;\n return this;\n }\n \n sub(v) {\n this.x -= v.x;\n this.y -= v.y;\n return this;\n }\n \n scale(f) {\n this.x *= f;\n this.y *= f;\n return this;\n }\n \n dot(v) {\n return this.x * v.x + this.y * v.y;\n }\n \n squareD() {\n return this.dot(this);\n }\n \n length() {\n return Math.sqrt(this.squareD());\n }\n \n normalize() {\n if (this.length()) {\n this.scale(1 / this.length());\n } else {\n this.scale(0)\n }\n return this;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":" function linesIntersect(p1, q1, p2, q2) {\n const p1q1X = p1.x - q1.x;\n const p1q1Y = p1.y - q1.y;\n const p1p2X = p1.x - p2.x;\n const p1p2Y = p1.y - p2.y;\n const p2q2X = p2.x - q2.x;\n const p2q2Y = p2.y - q2.y;\n const d = p1q1X * p2q2Y - p1q1Y * p2q2X;\n // parallel or coincident\n if (d === 0)\n return false;\n const t = (p1p2X * p2q2Y - p1p2Y * p2q2X) / d;\n const u = -(p1q1X * p1p2Y - p1q1Y * p1p2X) / d;\n return t >= 0 && t <= 1 && u >= 0 && u <= 1;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"measureSize = {\n const svg = d3.select(\"body\").append(\"svg\")\n .attr(\"width\", 1000)\n .attr(\"height\", 1000);\n \n return function(text) {\n \n const measurement = svg.append(\"text\")\n .attr(\"id\", \"measurement\")\n .style(\"font\", font)\n .text(text)\n .node().getBBox();\n \n svg.select(\"measurement\").remove();\n return { width: measurement.width, height: measurement.height };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"font = \"8pt sans-serif\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"height = Math.floor(width / 3 * 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"md`---\n#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"mtcars = require(\"@observablehq/mtcars\").then(cars => cars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}