Beeswarm

// Beeswarm — every observation plotted, nudged apart so none hides
// another. A box plot shows you the summary; this shows you the shape,
// including the two outliers a box plot would reduce to dots.

const rng = d3.randomLcg(23);
const normal = d3.randomNormal.source(rng);
const groups = [
  { name: 'Tier 1', mu: 120, sigma: 30, n: 34 },
  { name: 'Tier 2', mu: 260, sigma: 70, n: 42 },
  { name: 'Tier 3', mu: 520, sigma: 160, n: 28 },
];

const points = groups.flatMap(g => {
  const draw = normal(g.mu, g.sigma);
  return d3.range(g.n).map(() => ({ group: g.name, value: Math.max(20, draw()) }));
});

const margin = { top: 40, right: 30, bottom: 44, left: 90 };
const x = d3.scaleLinear()
    .domain([0, d3.max(points, d => d.value)]).nice()
    .range([margin.left, width - margin.right]);
const y = d3.scalePoint()
    .domain(groups.map(g => g.name))
    .range([margin.top + 30, height - margin.bottom - 20])
    .padding(0.6);
const color = d3.scaleOrdinal(groups.map(g => g.name), theme.palette);

// The dodge: pin each point to its x, pull it to its group's y, and let
// collision push the pile apart. Ticked synchronously so it is reproducible.
const sim = d3.forceSimulation(points)
    .force('x', d3.forceX(d => x(d.value)).strength(1))
    .force('y', d3.forceY(d => y(d.group)).strength(0.35))
    .force('collide', d3.forceCollide(4.2))
    .randomSource(rng);
sim.stop();
for (let i = 0; i < 220; i++) sim.tick();

const svg = d3.select(container).append('svg')
    .attr('viewBox', [0, 0, width, height])
    .attr('width', width)
    .attr('height', height)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

svg.append('g')
    .attr('transform', `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(8))
    .call(g => g.select('.domain').attr('stroke', theme.muted))
    .call(g => g.selectAll('text').attr('fill', theme.muted))
    .call(g => g.selectAll('line').attr('stroke', theme.muted));

svg.append('g')
    .attr('fill', theme.foreground)
    .attr('text-anchor', 'end')
  .selectAll('text')
  .data(groups)
  .join('text')
    .attr('x', margin.left - 14)
    .attr('y', d => y(d.name))
    .attr('dy', '0.35em')
    .text(d => d.name);

svg.append('g')
  .selectAll('circle')
  .data(points)
  .join('circle')
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('r', 3.6)
    .attr('fill', d => color(d.group))
    .attr('fill-opacity', 0.85);

svg.append('text')
    .attr('x', margin.left)
    .attr('y', 24)
    .attr('fill', theme.foreground)
    .attr('font-size', 13)
    .attr('font-weight', 600)
    .text('Response time by service tier (ms)');