2c:null 2d:["$","title",null,{"children":"Beeswarm methods compared | Curran Kelleher | Observable"}] 32: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(); }33: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; }34: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; }35:[{"id":"53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","href":"https://static.observableusercontent.com/files/53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","name":"cars-2.csv","type":"application/octet-stream","lastModified":1629487394820.218,"size":20140}] 30:{"id":"99da3d8c15817199","slug":"beeswarm-methods-compared","title":"Beeswarm methods compared","thumbnail":"c44b856993120217730be54e44b0fcea9a4b862890269b02b74da1578366b887","access_level":"public","create_time":"$D2021-08-20T19:23:14.820Z","update_time":"$D2021-08-20T20:05:18.485Z","view_time":null,"first_public_time":"$D2021-08-20T19:31:37.526Z","has_unpublished_edits":null,"fork":{"id":"64001745ea835efe","slug":"beeswarm-methods-compared","title":"Beeswarm methods compared","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f2141c9a970bd553","login":"curran","name":"Curran Kelleher","avatar_url":"https://avatars-next.observableusercontent.com/27282ae25b74721def112d68db7d4c2dfd43d48f6b2f232e34cbbdb2bedc9dc9","tier":"starter_2024"},"version":476,"publish_version":476,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a6e2fdbba1803f2","login":"curran","name":"Curran Kelleher","avatar_url":"https://avatars-next.observableusercontent.com/27282ae25b74721def112d68db7d4c2dfd43d48f6b2f232e34cbbdb2bedc9dc9","tier":null}],"members":[{"type":"individual","id":"6a6e2fdbba1803f2","login":"curran","name":"Curran Kelleher","avatar_url":"https://avatars-next.observableusercontent.com/27282ae25b74721def112d68db7d4c2dfd43d48f6b2f232e34cbbdb2bedc9dc9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Beeswarm methods compared","cells":[{"id":1,"value":"md`# Beeswarm methods compared`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"showLines = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"selected = options[type];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"function force(data, { radius = 1, x = (d) => d, ticks = 500 } = {}) {\n const circles = data.map((d, i, data) => ({ x0: x(d, i, data), data: d }));\n\n const simulation = d3\n .forceSimulation(circles)\n .force(\"x\", d3.forceX((d) => d.x0).strength(10))\n .force(\"y\", d3.forceY(0).strength(0.05))\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"radius = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"padding = 1.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"