2f:T53b,function dodge(data, {radius = d => d, x = d => d} = {}) { const radius2 = (d, i, data) => (radius(d, i, data) ** 2); const circles = data.map((d, i, data) => ({x: +x(d, i, data), r: +radius(d, i, data), r2: +radius2(d, i, data), data: d})).sort((a, b) => a.x - b.x); 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, r2) { let a = head; while (a) { if ((Math.sqrt(r2) + Math.sqrt(a.r2)) ** 2 - 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.x < b.x - b.r2) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0, b.r2)) { let a = head; b.y = Infinity; do { let y = a.y + Math.sqrt((Math.sqrt(a.r2) + Math.sqrt(b.r2)) ** 2 - (a.x - b.x) ** 2); if (y < b.y && !intersects(b.x, y, b.r2)) 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), 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"}