2f:T79b,function dodge(data, {radius = 1, x = d => d} = {}) { // Adapted using ChatGPT reason // Allow radius to be a function (or a constant). const getRadius = typeof radius === "function" ? radius : () => radius; // Precompute each circle’s x and r. const circles = data.map((d, i, data) => ({ x: +x(d, i, data), r: +getRadius(d, i, data), data: d })).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; // Returns true if a circle at (x,y) with radius r intersects any circle in the queue. function intersects(x, y, r) { let a = head; while (a) { const sumR = a.r + r; if ((a.x - x) ** 2 + (a.y - y) ** 2 < sumR * sumR - epsilon) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can no longer intersect the new circle. // (For a given circle a in the queue, if its x is less than b.x minus the sum of the two radii, // it is too far to the left to intersect.) while (head && head.x < b.x - (head.r + b.r)) { head = head.next; } // Set initial y position. b.y = 0; // If b placed at y=0 overlaps an existing circle, find the smallest y that avoids intersection. if (intersects(b.x, b.y, b.r)) { let a = head; b.y = Infinity; do { const dx = a.x - b.x; const sumR = a.r + b.r; // Only compute the tangent if the circles can possibly overlap horizontally. if (Math.abs(dx) <= sumR) { const y = a.y + Math.sqrt(sumR * sumR - dx * dx); if (y < b.y && !intersects(b.x, y, b.r)) { b.y = y; } } a = a.next; } while (a); } // Add b to the queue. b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } return circles; }30:[] 2d:{"title":"Beeswarm with adjustable radius","cells":[{"id":1,"value":"

Beeswarm with adjustable radius

D3 › Gallery

\n\n# Beeswarm with adjustable radius\n\nA beeswarm plot functions similarly to a [histogram](/@d3/histogram/2), except it allows individual data points to be seen. Dots are offset vertically, without affecting horizontal position. (See also the [mirrored variant](/@d3/beeswarm-mirrored/2).) This chart shows the weights of cars from 1974. Data: *Motor Trend*","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"chart = {\n const width = 928;\n const height = 160;\n const marginTop = 20;\n const marginRight = 20;\n const marginBottom = 20;\n const marginLeft = 20;\n const radius = 3;\n const padding = 1.5;\n\n const x = d3.scaleLinear()\n .domain(d3.extent(cars, d => d[\"weight (lb)\"]))\n .range([marginLeft, width - marginRight]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n \n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - marginBottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));\n \n svg.append(\"g\")\n .selectAll()\n .data(dodge(cars, {radius: d => d[\"weight (lb)\"]/1000, x: d => x(d[\"weight (lb)\"])}))\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => height - marginBottom - radius - padding - d.y)\n .attr(\"r\", d => d.r)\n .append(\"title\")\n .text(d => d.data.name);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"The [dodge transform](/plot/transforms/dodge) is natively available in the [Observable Plot](/plot/) API, allowing you to create a similar chart with a few lines of code:","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"Plot.plot({\n height: 165,\n x: {line: true},\n marks: [\n Plot.dotX(cars, Plot.dodgeY({\n x: \"weight (lb)\",\n sort: \"weight (lb)\",\n title: \"name\",\n fill: \"currentColor\"\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}