2f:T499,function dodge(data, {radius = 1, y = d => d} = {}) { const radius2 = radius ** 2; const circles = data.map((d, i, data) => ({y: +y(d, i, data), data: d})).sort((a, b) => a.y - b.y); const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { if (radius2 - epsilon > (a.x - x) ** 2 + (a.y - y) ** 2) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can’t intersect the new circle b. while (head && head.y < b.y - radius2) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0)) { let a = head; b.y = Infinity; do { let y = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2); if (y < b.y && !intersects(b.x, y)) 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","cells":[{"id":1,"value":"

Beeswarm

D3 › Gallery

\n\n# Beeswarm\n\nA beeswarm plot functions similarly to a [histogram](/@d3/histogram/2?intent=fork), 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?intent=fork).) 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 = 800;\n const height = 800;\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 y = d3.scaleLinear()\n .domain(d3.extent(cars, d => d[\"weight (lb)\"]))\n .range([marginTop, height - marginBottom]);\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.axisRight(y));\n \n svg.append(\"g\")\n .selectAll()\n .data(dodge(cars, {radius: radius * 2 + padding, y: d => y(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\", radius)\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: 565,\n y: {line: true},\n marks: [\n Plot.dotY(cars, Plot.dodgeX({\n y: \"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"}