2b:null 2c:["$","title",null,{"children":"Beeswarm methods compared | Harry Stevens | Observable"}] 31:T437,{ 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") .style("pointer-events", "none") 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":1629475870674.731,"size":20140}] 2f:{"id":"64001745ea835efe","slug":"beeswarm-methods-compared","title":"Beeswarm methods compared","thumbnail":"ef094756694703c84df32751a02f2777205440ff7a7175bc581eaf407eb378b5","access_level":"public","create_time":"$D2021-08-20T16:11:10.674Z","update_time":"$D2025-03-07T14:25:02.951Z","view_time":null,"first_public_time":"$D2021-08-20T18:08:45.246Z","fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":472,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Beeswarm methods compared","cells":[{"id":1,"value":"md`# Beeswarm methods compared`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"viewof showLines = Inputs.toggle({ label: \"Show shift lines:\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"viewof type = Inputs.radio(Object.keys(options), { label: \"Compare in place:\", value: \"Dodge\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chart = beeswarm(data, { circles, cy: selected.cy, showLines })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"circles = selected.fn(data, {radius: selected.radius, x: d => x(d.value)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"selected = options[type];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"radius = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"padding = 1.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"