25:null 26:["$","title",null,{"children":"Mirrored beeswarm | D3 | Observable"}] 2b:T49c,chart = { // Declare the chart dimensions and margins. const width = 928; const height = 160; const marginRight = 20; const marginLeft = 20; const marginBottom = 20; // Dot size and padding. const radius = 3; const padding = 1.5; // Declare the horizontal (x) encoding. const x = d3.scaleLinear() .domain(d3.extent(cars, d => d["weight (lb)"])) .range([marginLeft, width - marginRight]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add the x axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // Add a dot for each data point, positioned with the dodge function. svg.append("g") .selectAll("circle") .data(dodge(cars, {radius: radius * 2 + padding, x: d => x(d["weight (lb)"])})) .join("circle") .attr("cx", d => d.x) .attr("cy", d => height / 2 - radius - padding - d.y) .attr("r", radius) .append("title") .text(d => d.data.name); return svg.node(); }2c:T511,dodge = (data, {radius, x}) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d), 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 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; }2d:[] 29:{"id":"4ccc75f1192fd906","slug":"beeswarm-mirrored/2","title":"Mirrored beeswarm","thumbnail":"70d729bf1a0714aa4b267a9445cf555b92b6793c999005e397eac06055f8f358","access_level":"public","create_time":"$D2023-06-16T14:41:36.848Z","update_time":"$D2024-09-23T09:43:41.308Z","view_time":null,"first_public_time":"$D2023-06-16T14:49:57.610Z","fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":326,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"title":"Mirrored beeswarm","cells":[{"id":1,"value":"

Mirrored beeswarm

D3 › Gallery

\n\n# Mirrored beeswarm\n\nA mirrored variation of the [beeswarm chart](/@d3/beeswarm/2).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"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 anchor: \"middle\"\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"