stacked_bars.md

const events = await db.sql`select
    created_at,
    last_updated_at,
  from events
`;

const stackPeriod = () => {
  const p = new Array();
  return (e) => {
    const start = e.created_at;
    const end = e.last_updated_at;
    let height = 0;
    while (
      p.some(
        (p) =>
          p.height === height &&
          ((p.start <= start && start <= p.end) ||
            (p.start <= end && end <= p.end) ||
            (start <= p.start && p.start <= end) ||
            (start <= p.end && p.end <= end)),
      )
    )
      height++;

    p.push({ start, end, height });
    return height;
  };
};

${resize((width) => Plot.plot({ width, height: 240, x: {interval: d3.utcDay, grid: true, axis: "top", round: true}, y: {axis: null}, marks: [ Plot.barX(events, { y: stackPeriod(), x1: "created_at", x2: "last_updated_at", inset: 0.5, tip: true, }), ] }))}