31:T40f,{ const wrapper = d3.create("div"); Object.keys(options).forEach(option => { const o = options[option]; const circles = o.fn(data, {radius: o.radius, x: d => x(d.value)}); const mean = d3.mean(circles, d => Math.abs(d.x0 - d.x)); const median = d3.median(circles, d => Math.abs(d.x0 - d.x)); const svg = beeswarm(data, { circles, cy: o.cy, showLines }); const chart = wrapper.append("div") .style("margin-bottom", "20px") chart.append("div") .style("font-family", "sans-serif") .style("font-weight", "bold") .text(option); chart.append("div") .style("font-family", "sans-serif") .style("font-size", "14px") .style("margin-bottom", `-${height / 2.5}px`) .html(`Mean shift: ${mean.toFixed(1)}px | Median shift: ${median.toFixed(1)}px`); chart.append("svg") .attr("viewBox", [0, 0, width, height]) .html(svg.innerHTML); }); return wrapper.node(); }32:T556,function dodgeMirrored (data, {radius = 1, x = d => d} = {}) { const radius2 = radius ** 2; const circles = data.map((d, i, data) => ({x0: x(d, i, data), x: x(d, i, data), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-4; 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.x < b.x - 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 y1 = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x) ** 2); if (Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if (Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; 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; }33:T4ac,function dodge(data, {radius = 1, x = d => d} = {}) { const radius2 = radius ** 2; const circles = data.map((d, i, data) => ({x0: x(d, i, data), x: +x(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) { 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.x < b.x - 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; }34:[{"id":"53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","href":"https://static.observableusercontent.com/files/53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","name":"cars-2.csv","type":"application/octet-stream","lastModified":1631280917152.174,"size":20140}] 2f:{"title":"Beeswarm methods compared","cells":[{"id":1,"value":"md`# Beeswarm methods compared`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"md`This notebook is a fork of Harry Stevens' beeswarm comparisons with a [compact beeswarm](https://observablehq.com/@jtrim-ons/beeswarm-layout-generator/2) added.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"viewof type = Inputs.radio(Object.keys(options), { label: \"Compare in place:\", value: \"Dodge\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"chart = beeswarm(data, { circles, cy: selected.cy, showLines })","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"showLines = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"beeswarm = (data, {circles, cy, showLines}) => {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(circles)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", cy)\n .attr(\"r\", 3)\n .append(\"title\")\n .text(d => d.data.name);\n \n if (showLines){\n svg.append(\"g\")\n .attr(\"stroke\", \"red\")\n .attr(\"stroke-width\", 1.5)\n .selectAll(\"line\")\n .data(circles)\n .join(\"line\")\n .attr(\"x1\", d => d.x)\n .attr(\"x2\", d => d.x0)\n .attr(\"y1\", cy)\n .attr(\"y2\", cy);\n }\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"circles = selected.fn(data, {radius: selected.radius, x: d => x(d.value)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"selected = options[type];","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"options = ({\n Dodge: {\n fn: dodge,\n radius: radius * 2 + padding,\n cy: (d) => height - margin.bottom - radius - padding - d.y\n },\n Force: {\n fn: force,\n radius: radius + padding / 2,\n cy: (d) => height / 1.15 - margin.bottom - radius - padding - d.y\n },\n \"Mirrored dodge\": {\n fn: dodgeMirrored,\n radius: radius * 2 + padding,\n cy: (d) => height / 1.25 - margin.bottom - radius - padding - d.y\n },\n \"Compact beeswarm\": {\n fn: compactSwarm,\n radius: radius + padding / 2,\n cy: (d) => height / 1.25 - margin.bottom - radius - padding - d.y\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"function compactSwarm(data, { radius = 1, x = (d) => d } = {}) {\n return (\n new AccurateBeeswarm.AccurateBeeswarm(data, radius, x)\n //.withTiesBrokenRandomly()\n .calculateYPositions()\n .map((d) => ({ data: d.datum, x0: x(d.datum), x: d.x, y: d.y }))\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"function force(data, {radius = 1, x = d => d, ticks = 200} = {}) {\n const circles = data.map((d, i, data) => ({x0: x(d, i, data), data: d}));\n \n const simulation = d3.forceSimulation(circles)\n .force(\"x\", d3.forceX(d => d.x0))\n .force(\"y\", d3.forceY(0))\n .force(\"collide\", d3.forceCollide(radius));\n \n for (let i = 0; i < ticks; i++) simulation.tick();\n \n return circles;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = (await FileAttachment(\"cars-2.csv\").csv({typed: true})).map(({Name: name, Weight_in_lbs: value}) => ({name, value: +value}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.value))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"radius = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"padding = 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"AccurateBeeswarm = import(\"accurate-beeswarm-plot\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}