plotto 0.0.0-stage → 0.3.0

package/src/interact.js

@@ -0,0 +1,364 @@
+// Browser output: draws the figure into an element, at the element width, with a toolbar.
+// interactive adds zoom, pan, hover and the legend toggle. A zoom or a resize draws again with the same code,
+// so the look does not change.
+import { copyPNG, downloadPNG, downloadSVG } from "./copy.js";
+import { drawPanels, figure } from "./figure.js";
+import { pick } from "./hover.js";
+import { svgElement } from "./svg.js";
+import { headerColors } from "./theme.js";
+import { installStyles, themeVars, toolbar } from "./toolbar.js";
+
+const DRAG_MIN = 5; // px: a smaller drag is a click
+const MIN_WIDTH = 320; // px
+const ZOOM_STEP = 0.75; // zoom in keeps 75% of the range
+const DOUBLE = 300; // ms: two legend clicks within this time are a double-click
+
+// Returns a controller: { state (the current figure), redraw(), destroy() }.
+export function draw(spec, el, { interactive = false, width } = {}) {
+  const doc = el.ownerDocument;
+  installStyles(doc);
+  const root = doc.createElement("div");
+  root.className = "pt-root";
+  const tip = Object.assign(doc.createElement("div"), { className: "pt-tip" });
+  const ctl = { state: null, mode: "zoom" };
+  let observer = null;
+
+  const render = (w) => {
+    const keep = ctl.state && { domains: ctl.state.domains === ctl.state.home ? undefined : ctl.state.domains, hidden: ctl.state.hidden };
+    const state = figure(spec, { document: doc, width: w, ...keep });
+    const old = ctl.state?.svg;
+    state.overlay = state.svg.appendChild(svgElement(doc, "g", { class: "pt-overlay", "pointer-events": "none" }));
+    if (!state.theme.reflow) {
+      state.svg.setAttribute("width", "100%");
+      state.svg.removeAttribute("height");
+      root.style.maxWidth = `${state.W}px`;
+    }
+    old ? old.replaceWith(state.svg) : root.prepend(state.svg);
+    ctl.state = state;
+    themeVars(root, state.theme);
+    bar.setSize(state.theme.reflow ? state.W : Math.min(state.W, el.clientWidth || state.W));
+  };
+
+  const groups = [
+    [
+      { name: "copy", title: "Copy as PNG", action: (b) => copyPNG(ctl.state.svg).then((how) => bar.flash("copy", how)) },
+      { name: "download", title: "Download", menu: [["PNG", () => downloadPNG(ctl.state.svg)], ["SVG", () => downloadSVG(ctl.state.svg)]] },
+    ],
+  ];
+  if (interactive) {
+    groups.unshift(
+      [
+        { name: "zoom", title: "Zoom: drag a box", action: () => setMode("zoom") },
+        { name: "pan", title: "Pan: drag the view", action: () => setMode("pan") },
+      ],
+      [
+        { name: "zoomIn", title: "Zoom in", action: () => step(ctl, ZOOM_STEP) },
+        { name: "zoomOut", title: "Zoom out", action: () => step(ctl, 1 / ZOOM_STEP) },
+        { name: "home", title: "Reset view (double-click)", action: () => home(ctl) },
+      ],
+    );
+  }
+  const bar = toolbar(doc, groups);
+  root.append(bar.el, tip);
+  const setMode = (mode) => {
+    ctl.mode = mode;
+    bar.button("zoom").classList.toggle("pt-on", mode === "zoom");
+    bar.button("pan").classList.toggle("pt-on", mode === "pan");
+    root.style.cursor = mode === "pan" ? "grab" : "";
+  };
+
+  try {
+    const first = width ?? (el.clientWidth ? Math.max(MIN_WIDTH, el.clientWidth) : undefined);
+    render(first);
+    el.replaceChildren(root);
+  } catch (e) {
+    const box = Object.assign(doc.createElement("div"), { className: "pt-error", textContent: `plotto: ${e.message}` });
+    el.prepend(box);
+    throw e;
+  }
+  if (interactive) {
+    setMode("zoom");
+    attach(ctl, root, tip);
+  }
+
+  // Reflow: lay out again when the element width changes (100 ms after the last change).
+  if (ctl.state.theme.reflow && width === undefined && typeof ResizeObserver !== "undefined") {
+    let timer;
+    observer = new ResizeObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const w = Math.max(MIN_WIDTH, Math.round(el.clientWidth));
+        if (w && w !== ctl.state.W) render(w);
+      }, 100);
+    });
+    observer.observe(el);
+  }
+  ctl.redraw = () => drawPanels(ctl.state);
+  ctl.resize = (w) => render(Math.max(MIN_WIDTH, w));
+  ctl.destroy = () => observer?.disconnect();
+  return ctl;
+}
+
+function attach(ctl, root, tip) {
+  let drag = null;
+  let frame = null;
+  const svg = () => ctl.state.svg;
+
+  // Figure px of a pointer event, and the screen px per figure px.
+  const at = (e) => {
+    const r = svg().getBoundingClientRect();
+    const k = ctl.state.W / r.width;
+    return [(e.clientX - r.left) * k, (e.clientY - r.top) * k, k];
+  };
+  const panelAt = (x, y) => ctl.state.layout.panels.findIndex((b) => x >= b.x + b.ml && x <= b.x + b.ml + b.innerW && y >= b.y && y <= b.y + b.innerH);
+
+  // A press in a panel starts a gesture. It becomes a drag (zoom box or pan) after DRAG_MIN px of movement;
+  // a release before that is a click: it pins the hover label, or unpins it.
+  let pinned = false;
+  root.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0 || !svg().contains(e.target)) return;
+    const [x, y] = at(e);
+    const i = panelAt(x, y);
+    if (i < 0) return;
+    e.preventDefault();
+    root.focus({ preventScroll: true }); // for Esc
+    drag = { i, x, y, domains: ctl.state.domains, moving: false, id: e.pointerId };
+  });
+
+  root.addEventListener("pointermove", (e) => {
+    const [x, y, k] = at(e);
+    if (drag && !drag.moving && Math.hypot(x - drag.x, y - drag.y) >= DRAG_MIN) {
+      drag.moving = true;
+      root.setPointerCapture(drag.id);
+      unpin();
+      hideHover();
+      if (ctl.mode === "pan") root.style.cursor = "grabbing";
+    }
+    if (!drag?.moving) {
+      if (!pinned && !frame) frame = requestAnimationFrame(() => ((frame = null), showHover(x, y, k)));
+      return;
+    }
+    if (ctl.mode === "pan") return pan(ctl, drag, x, y);
+    const b = ctl.state.layout.panels[drag.i];
+    const clampX = (v) => Math.max(b.x + b.ml, Math.min(b.x + b.ml + b.innerW, v));
+    const clampY = (v) => Math.max(b.y, Math.min(b.y + b.innerH, v));
+    const [x0, x1] = [drag.x, clampX(x)].sort((a, c) => a - c);
+    const [y0, y1] = [drag.y, clampY(y)].sort((a, c) => a - c);
+    // A flat drag zooms x only (a full-height band); a narrow drag zooms y only (a full-width band).
+    const flat = y1 - y0 < DRAG_MIN || ctl.state.kind.y === "category";
+    const narrow = x1 - x0 < DRAG_MIN || ctl.state.kind.x === "category";
+    if (flat && narrow) return ctl.state.overlay.replaceChildren();
+    const rect = { x: narrow ? b.x + b.ml : x0, y: flat ? b.y : y0, width: narrow ? b.innerW : x1 - x0, height: flat ? b.innerH : y1 - y0 };
+    const accent = ctl.state.theme.accent;
+    ctl.state.overlay.replaceChildren(svgElement(ctl.state.doc, "rect", { ...rect, fill: accent, "fill-opacity": 0.1, stroke: accent, "stroke-opacity": 0.7, "stroke-width": 1 }));
+    drag.box = { x0, x1, y0, y1 };
+  });
+
+  root.addEventListener("pointerup", (e) => {
+    if (drag?.moving && ctl.mode === "zoom" && drag.box) zoom(ctl, drag.i, drag.box);
+    else if (drag && !drag.moving) {
+      // A click pins the label of what is under the pointer; the next click releases it.
+      const [x, y, k] = at(e);
+      if (pinned) {
+        unpin();
+        showHover(x, y, k);
+      } else {
+        showHover(x, y, k);
+        if (tip.style.display === "block") pin();
+      }
+    }
+    if (ctl.mode === "pan") root.style.cursor = "grab";
+    if (!pinned) ctl.state.overlay.replaceChildren();
+    drag = null;
+  });
+
+  root.addEventListener("pointerleave", () => !drag && !pinned && hideHover());
+  root.addEventListener("keydown", (e) => e.key === "Escape" && (unpin(), hideHover()));
+  root.tabIndex = -1;
+
+  // Zoom buttons, Home and legend clicks draw the panels again: the label then goes.
+  ctl.clearHover = () => (unpin(), hideHover());
+
+  function pin() {
+    pinned = true;
+    tip.classList.add("pt-pinned");
+  }
+  function unpin() {
+    pinned = false;
+    tip.classList.remove("pt-pinned");
+  }
+
+  // Pointer capture retargets click events to the root, so find the element under the pointer.
+  const under = (e) => ctl.state.doc.elementFromPoint(e.clientX, e.clientY);
+  const keyAt = (e) => under(e)?.closest?.(".pt-key");
+
+  root.addEventListener("dblclick", (e) => {
+    const [x, y] = at(e);
+    if (panelAt(x, y) < 0) return;
+    unpin();
+    hideHover();
+    home(ctl);
+  });
+
+  // Legend: a click hides or shows a value at once. Two clicks on the same entry within DOUBLE ms
+  // (a quick double-click) show only that value instead; a slower second click just toggles it back.
+  let last = { value: undefined, time: 0, before: null };
+  root.addEventListener("click", (e) => {
+    const key = keyAt(e);
+    if (!key) return;
+    const value = ctl.state.legend.items[Number(key.dataset.index)].value;
+    ctl.clearHover();
+    const now = performance.now();
+    if (value === last.value && now - last.time < DOUBLE) {
+      ctl.state.hidden = last.before;
+      last = { value: undefined, time: 0, before: null };
+      return isolate(ctl, value);
+    }
+    last = { value, time: now, before: ctl.state.hidden };
+    const hidden = new Set(ctl.state.hidden);
+    hidden.has(value) ? hidden.delete(value) : hidden.add(value);
+    ctl.state.hidden = hidden;
+    drawPanels(ctl.state);
+  });
+
+  let previous = null;
+  function showHover(x, y, k) {
+    const state = ctl.state;
+    const i = panelAt(x, y);
+    const b = i < 0 ? null : state.layout.panels[i];
+    const hit = b ? pick(state, i, x - b.x, y - b.y, previous) : null;
+    previous = hit;
+    if (!hit) return hideHover();
+    const doc = state.doc;
+    const marks = [];
+    if (hit.crosshair !== undefined) {
+      const cx = b.x + hit.crosshair;
+      marks.push(svgElement(doc, "line", { x1: cx, x2: cx, y1: b.y, y2: b.y + b.innerH, stroke: state.theme.muted, "stroke-opacity": 0.55, "stroke-width": 1 }));
+    }
+    for (const m of hit.marks) {
+      if (m.rect) marks.push(svgElement(doc, "rect", { x: b.x + m.rect.x, y: b.y + m.rect.y, width: m.rect.width, height: m.rect.height, fill: "none", stroke: m.color, "stroke-width": 1.5 }));
+      else marks.push(svgElement(doc, "circle", { cx: b.x + m.x, cy: b.y + m.y, r: state.theme.point + 1.5, fill: m.color, stroke: state.theme.background, "stroke-width": 1.5 }));
+    }
+    state.overlay.replaceChildren(...marks);
+    const head = headerColors(hit.color);
+    tip.style.setProperty("--pt-c", head.bg);
+    tip.style.setProperty("--pt-on-c", head.fg);
+    tip.style.font = `${state.fonts.hover}px ${state.theme.font}`;
+    tip.replaceChildren(...tipContent(doc, hit));
+    tip.style.display = "block";
+    // The box follows the pointer (not the noisy data): right of the anchor, or left of it near the right edge.
+    const ax = (b.x + hit.anchor.x) / k;
+    const ay = y / k;
+    const width = root.clientWidth;
+    const height = root.clientHeight;
+    const left = ax + 16 + tip.offsetWidth > width ? ax - 16 - tip.offsetWidth : ax + 16;
+    const top = Math.min(Math.max(0, ay - 18), Math.max(0, height - tip.offsetHeight));
+    tip.style.left = `${Math.max(0, left)}px`;
+    tip.style.top = `${top}px`;
+  }
+
+  function hideHover() {
+    tip.style.display = "none";
+    if (!drag) ctl.state.overlay.replaceChildren();
+  }
+}
+
+function tipContent(doc, hit) {
+  const el = (tag, className, text) => Object.assign(doc.createElement(tag), { className, textContent: text ?? "" });
+  const nodes = [];
+  if (hit.header) nodes.push(el("div", "pt-head", hit.header));
+  const rows = el("div", "pt-rows");
+  for (const r of hit.rows) {
+    const swatch = el("span", "pt-sw");
+    if (r.swatch) swatch.style.background = r.swatch;
+    const cells = [swatch, el("span", "pt-k", r.label), el("span", "pt-v", r.value)];
+    if (r.strong) cells.forEach((c) => c.classList.add("pt-b"));
+    if (r.total) cells.forEach((c) => c.classList.add("pt-t"));
+    rows.append(...cells);
+  }
+  if (hit.note) rows.append(el("span", "pt-more", hit.note));
+  nodes.push(rows);
+  return nodes;
+}
+
+function home(ctl) {
+  ctl.clearHover?.();
+  ctl.state.domains = ctl.state.home;
+  drawPanels(ctl.state);
+}
+
+// Legend double-click: show only this value; when it is already the only one, show all.
+function isolate(ctl, value) {
+  const all = ctl.state.legend.items.map((it) => it.value);
+  const alone = ctl.state.hidden.size === all.length - 1 && !ctl.state.hidden.has(value);
+  ctl.state.hidden = alone ? new Set() : new Set(all.filter((v) => v !== value));
+  drawPanels(ctl.state);
+}
+
+// Zoom on panel i to the dragged box (figure px). A shared axis zooms in every panel that shares it.
+function zoom(ctl, i, { x0, x1, y0, y1 }) {
+  const state = ctl.state;
+  const b = state.layout.panels[i];
+  const plot = state.panels[i].plot;
+  const next = state.domains.map((d) => ({ ...d }));
+  const apply = (axis, lo, hi) => {
+    if (state.kind[axis] === "category" || hi - lo < DRAG_MIN) return;
+    const scale = plot.scale(axis);
+    const offset = axis === "x" ? b.x : b.y;
+    const d = [scale.invert(lo - offset), scale.invert(hi - offset)].map(Number).sort((a, c) => a - c);
+    shared(state, axis, i).forEach((j) => (next[j][axis] = d));
+  };
+  apply("x", x0, x1);
+  apply("y", y0, y1);
+  state.domains = next;
+  drawPanels(state);
+}
+
+// Zoom in or out around the center of each panel: factor < 1 zooms in.
+function step(ctl, factor) {
+  ctl.clearHover?.();
+  const state = ctl.state;
+  state.domains = state.domains.map((d) => {
+    const out = { ...d };
+    for (const axis of ["x", "y"]) {
+      const k = state.kind[axis];
+      if (k === "category") continue;
+      const f = k === "log" ? Math.log10 : (v) => v;
+      const g = k === "log" ? (v) => 10 ** v : (v) => v;
+      const [lo, hi] = d[axis].map((v) => f(+v));
+      const mid = (lo + hi) / 2;
+      out[axis] = [g(mid - ((hi - lo) / 2) * factor), g(mid + ((hi - lo) / 2) * factor)];
+    }
+    return out;
+  });
+  drawPanels(state);
+}
+
+function pan(ctl, drag, x, y) {
+  const state = ctl.state;
+  const b = state.layout.panels[drag.i];
+  const plot = state.panels[drag.i].plot;
+  const next = drag.domains.map((d) => ({ ...d }));
+  for (const [axis, from, to, offset] of [["x", drag.x, x, b.x], ["y", drag.y, y, b.y]]) {
+    if (state.kind[axis] === "category") continue;
+    const scale = plot.scale(axis);
+    const log = state.kind[axis] === "log";
+    const f = (v) => (log ? Math.log10(v) : v);
+    const delta = f(+scale.invert(from - offset)) - f(+scale.invert(to - offset));
+    const d = drag.domains[drag.i][axis].map((v) => (log ? 10 ** (f(v) + delta) : +v + delta));
+    shared(state, axis, drag.i).forEach((j) => (next[j][axis] = d));
+  }
+  state.domains = next;
+  if (!state.frame) state.frame = requestAnimationFrame(() => ((state.frame = null), drawPanels(state)));
+}
+
+// The panels that share the axis of panel i (all panels, unless the axis is free).
+function shared(state, axis, i) {
+  const free = state.ns.facet?.free?.[axis];
+  const p = state.grid.panels[i];
+  return state.grid.panels.flatMap((q, j) => {
+    if (!free) return [j];
+    if (state.grid.kind !== "grid") return j === i ? [j] : [];
+    return (axis === "x" ? q.col === p.col : q.row === p.row) ? [j] : [];
+  });
+}

package/src/layers.js

@@ -0,0 +1,159 @@
+// Layer table: each layer type returns the Observable Plot marks of its view in one panel.
+// The context `c` (made by figure.js) gives the view columns: c.v("x"), c.colors(fallback), c.groups().
+// To add a layer type: add one entry here, one entry in grammar.json and, for a statistic, a case in views.js.
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+const DASH = { solid: undefined, dashed: "6,4", dotted: "1.5,3", dashdot: "6,3,1.5,3" };
+const clip = "frame";
+
+const strokeStyle = (c, fallback) => ({
+  stroke: c.colors(fallback),
+  strokeWidth: c.options.size ?? c.theme.line,
+  strokeOpacity: c.options.alpha ?? 1,
+  strokeDasharray: DASH[c.options.dash],
+  strokeLinejoin: "round",
+  strokeLinecap: "round",
+});
+
+const fillStyle = (c, fallback, alpha = 1) => ({ fill: c.colors(fallback), fillOpacity: c.options.alpha ?? alpha });
+const first = (c) => c.theme.palette[0];
+
+const lineOf = (curve) => (c) => [Plot.line(c.index, { x: c.v("x"), y: c.v("y"), z: c.groups(), curve, ...strokeStyle(c, first(c)), clip })];
+
+export const LAYERS = {
+  line: (c) => [Plot.line(c.index, { x: c.v("x"), y: c.v("y"), z: c.groups(), sort: { channel: "x" }, ...strokeStyle(c, first(c)), clip })],
+
+  path: lineOf("linear"),
+
+  step: (c) => [Plot.line(c.index, { x: c.v("x"), y: c.v("y"), z: c.groups(), sort: { channel: "x" }, curve: "step-after", ...strokeStyle(c, first(c)), clip })],
+
+  point: (c) => {
+    const options = { x: jittered(c), y: c.v("y"), r: c.options.size ?? c.theme.point, ...fillStyle(c, first(c)), clip };
+    if (c.options.jitter && c.kind.x === "category") options.render = jitterRender(c.options.jitter);
+    return [Plot.dot(c.index, options)];
+  },
+
+  bar: (c) => {
+    const fill = { ...fillStyle(c, first(c), stackAlpha(c, 1)), clip };
+    if (c.kind.x !== "category") return [Plot.rect(c.index, { x1: c.v("xmin"), x2: c.v("xmax"), y1: c.v("ymin"), y2: c.v("ymax"), ...fill })];
+    const slots = c.v("slots")[0] ?? 1;
+    if (slots === 1) return [Plot.barY(c.index, { x: c.v("x"), y1: c.v("ymin"), y2: c.v("ymax"), ...fill })];
+    // Dodge: one bar mark per slot, narrowed with insets to its share of the band.
+    // Channel arrays align with the data array, so each slot takes its own subset of every array.
+    const slice = c.bandwidth.x / slots;
+    const at = (values, rows) => (Array.isArray(values) ? rows.map((i) => values[i]) : values);
+    return d3.range(slots).map((k) => {
+      const rows = c.index.filter((i) => c.v("slot")[i] === k);
+      const channels = { x: at(c.v("x"), rows), y1: at(c.v("ymin"), rows), y2: at(c.v("ymax"), rows), fill: at(fill.fill, rows) };
+      return Plot.barY(d3.range(rows.length), { ...fill, ...channels, insetLeft: k * slice + 0.5, insetRight: (slots - 1 - k) * slice + 0.5 });
+    });
+  },
+
+  hist: (c) => [Plot.rect(c.index, { x1: c.v("xmin"), x2: c.v("xmax"), y1: c.v("ymin"), y2: c.v("ymax"), insetLeft: 0.5, insetRight: 0.5, ...fillStyle(c, first(c), stackAlpha(c)), clip })],
+
+  density: (c) => [
+    Plot.areaY(c.index, { x: c.v("x"), y: c.v("y"), z: c.groups(), fill: c.colors(first(c)), fillOpacity: 0.15, clip }),
+    Plot.line(c.index, { x: c.v("x"), y: c.v("y"), z: c.groups(), ...strokeStyle(c, first(c)), clip }),
+  ],
+
+  area: (c) => [
+    Plot.areaY(c.index, { x: c.v("x"), y1: c.v("ymin"), y2: c.v("ymax"), z: c.groups(), ...fillStyle(c, first(c), stackAlpha(c, 0.8)), clip }),
+  ],
+
+  ribbon: (c) => [Plot.areaY(c.index, { x: c.v("x"), y1: c.v("ymin"), y2: c.v("ymax"), z: c.groups(), ...fillStyle(c, first(c), 0.2), clip })],
+
+  smooth: (c) => {
+    const marks = [];
+    if (c.v("ymin").some((v) => v !== null)) {
+      marks.push(Plot.areaY(c.index, { x: c.v("x"), y1: c.v("ymin"), y2: c.v("ymax"), z: c.groups(), fill: c.colors(c.theme.muted), fillOpacity: 0.15, clip }));
+    }
+    marks.push(Plot.line(c.index, { x: c.v("x"), y: c.v("y"), z: c.groups(), ...strokeStyle(c, c.theme.accent), clip }));
+    return marks;
+  },
+
+  hline: (c) => [Plot.ruleY(c.index, { y: c.v("y"), ...strokeStyle(c, c.theme.muted), strokeWidth: c.options.size ?? 1, clip })],
+
+  vline: (c) => [Plot.ruleX(c.index, { x: c.v("x"), ...strokeStyle(c, c.theme.muted), strokeWidth: c.options.size ?? 1, clip })],
+
+  abline: (c) => {
+    const [x0, x1] = c.domain.x.map(Number);
+    const { slope = 1, intercept = 0 } = c.options;
+    return [Plot.line([0, 1], { x: [x0, x1], y: [intercept + slope * x0, intercept + slope * x1], ...strokeStyle(c, c.theme.muted), strokeWidth: c.options.size ?? 1, clip })];
+  },
+
+  segment: (c) => [Plot.link(c.index, { x1: c.v("x"), y1: c.v("y"), x2: c.v("xend"), y2: c.v("yend"), ...strokeStyle(c, c.theme.ink), clip })],
+
+  rect: (c) => [Plot.rect(c.index, { x1: c.v("xmin"), x2: c.v("xmax"), y1: c.v("ymin"), y2: c.v("ymax"), ...fillStyle(c, first(c)), clip })],
+
+  // A band without a bound spans the full panel on that side.
+  band: (c) => {
+    const edge = (ch, axis, i) => c.v(ch) ?? c.index.map(() => c.domain[axis][i]);
+    const box = { x1: edge("xmin", "x", 0), x2: edge("xmax", "x", 1), y1: edge("ymin", "y", 0), y2: edge("ymax", "y", 1) };
+    return [Plot.rect(c.index, { ...box, ...fillStyle(c, c.theme.muted, 0.12), clip })];
+  },
+
+  tile: (c) => {
+    const fill = fillStyle(c, first(c));
+    const [cx, cy] = [c.kind.x === "category", c.kind.y === "category"];
+    if (cx && cy) return [Plot.cell(c.index, { x: c.v("x"), y: c.v("y"), ...fill, inset: 0.5, clip })];
+    const [x1, x2] = cx ? [] : spread(c.v("x"));
+    const [y1, y2] = cy ? [] : spread(c.v("y"));
+    if (cx) return [Plot.barY(c.index, { x: c.v("x"), y1, y2, ...fill, clip })];
+    if (cy) return [Plot.barX(c.index, { y: c.v("y"), x1, x2, ...fill, insetTop: 0.5, insetBottom: 0.5, clip })];
+    return [Plot.rect(c.index, { x1, x2, y1, y2, ...fill, clip })];
+  },
+
+  text: (c) => [
+    Plot.text(c.index, { x: c.v("x"), y: c.v("y"), text: c.v("label"), fontSize: c.options.size ?? c.fonts.tick, ...fillStyle(c, c.theme.ink), clip }),
+  ],
+
+  errorbar: (c) => {
+    const style = { ...strokeStyle(c, c.theme.ink), strokeWidth: c.options.size ?? 1.2 };
+    const rule = Plot.ruleX(c.index, { x: c.v("x"), y1: c.v("ymin"), y2: c.v("ymax"), ...style, clip });
+    if (c.kind.x === "category") {
+      const inset = c.bandwidth.x * 0.35;
+      const cap = (ch) => Plot.tickY(c.index, { x: c.v("x"), y: c.v(ch), ...style, insetLeft: inset, insetRight: inset, clip });
+      return [rule, cap("ymin"), cap("ymax")];
+    }
+    const [x1, x2] = spread(c.v("x"), 0.25);
+    const cap = (ch) => Plot.link(c.index, { x1, x2, y1: c.v(ch), y2: c.v(ch), ...style, clip });
+    return [rule, cap("ymin"), cap("ymax")];
+  },
+
+  box: (c) => [
+    Plot.boxY(c.index, { x: c.v("x"), y: c.v("y"), fill: c.colors(c.theme.strip), fillOpacity: c.options.alpha ?? 1, stroke: c.theme.ink, strokeWidth: 1, r: c.theme.point }),
+  ],
+};
+
+// Overlaid fills are see-through, stacked fills are solid.
+function stackAlpha(c, solid = 0.9) {
+  return c.options.position === "overlay" ? 0.45 : solid;
+}
+
+// Intervals of a fraction of the data resolution (the smallest step between values) around each value.
+function spread(values, fraction = 0.5) {
+  const nums = values.map(Number);
+  const sorted = [...new Set(nums)].sort((a, b) => a - b);
+  const step = d3.min(d3.pairs(sorted), ([a, b]) => b - a) ?? 1;
+  const back = values[0] instanceof Date ? (v) => new Date(v) : (v) => v;
+  return [nums.map((v) => back(v - step * fraction)), nums.map((v) => back(v + step * fraction))];
+}
+
+// Seeded jitter, so that each redraw and each output put the points at the same place.
+function jittered(c) {
+  const x = c.v("x");
+  if (!c.options.jitter || c.kind.x === "category") return x;
+  const random = d3.randomUniform.source(d3.randomLcg(42))(-1, 1);
+  const [lo] = spread(x, c.options.jitter);
+  return x.map((v, i) => +v + (+v - +lo[i]) * random()).map((v) => (x[0] instanceof Date ? new Date(v) : v));
+}
+
+function jitterRender(fraction) {
+  return (index, scales, values, dimensions, context, next) => {
+    const random = d3.randomUniform.source(d3.randomLcg(42))(-1, 1);
+    const step = scales.scales.x?.bandwidth ?? 20;
+    const x = Float64Array.from(values.x, (v) => v + random() * step * fraction * 0.5);
+    return next(index, scales, { ...values, x }, dimensions, context);
+  };
+}

package/src/layout.js

@@ -0,0 +1,130 @@
+// Layout: the position and size of the title, info table, panels, strips, axis titles, caption and legend, in px of the figure.
+// Text sizes come from text.js, so Node and the browser get the same layout.
+import * as d3 from "d3";
+import { ticks } from "./scales.js";
+import { fitText, textWidth, wrapText } from "./text.js";
+
+export const TICK = { size: 4, padding: 3 };
+const ROTATE = 40; // degrees of rotated category labels
+const TOOLBAR = 0.22; // share of the width kept free of the title, for the toolbar
+
+export function place({ ns, grid, kind, home, legend, info, fonts, W, H }) {
+  const theme = ns.theme;
+  const metrics = theme.metrics;
+  const tw = (t, size, bold) => textWidth(t, size, bold, metrics);
+  const s = fonts.base;
+  const pad = Math.round(s * 0.9);
+  const gap = Math.round(s * 0.8);
+  const { title, subtitle, caption, x: xTitle, y: yTitle } = ns.labels;
+  const at = (position) => (info?.position === position ? info : null);
+  const headW = W - 2 * pad - Math.min(180, W * TOOLBAR);
+  const titleLines = title ? wrapText(title, fonts.title, headW, true, metrics) : [];
+  const subtitleLines = subtitle ? wrapText(subtitle, fonts.subtitle, headW, false, metrics) : [];
+  const head = titleLines.length * fonts.title * 1.25 + subtitleLines.length * fonts.subtitle * 1.4;
+  const top = pad + head + (head ? s * 0.7 : 0);
+  const xt = xTitle ? fonts.axisTitle * 1.7 : 0;
+  const yt = yTitle ? fonts.axisTitle * 1.7 : 0;
+  const cap = caption ? fonts.tick * 1.8 : 0;
+  const rightW = Math.max(legend && !legend.horizontal ? legend.width : 0, at("right")?.width ?? 0);
+  const right = rightW ? rightW + s * 1.5 : 0;
+  const bottom = legend?.horizontal ? legend.height + s * 0.8 : 0;
+  const below = at("bottom") ? at("bottom").height + gap : 0;
+  const area = { x: pad + yt, y: top, w: W - 2 * pad - yt - right, h: H - top - pad - xt - bottom - cap - below };
+
+  const strip = grid.kind === "none" ? 0 : Math.round(fonts.strip * 2);
+  const wrapStrip = grid.kind === "wrap" ? strip : 0;
+  const topStrip = grid.kind === "grid" && ns.facet.cols ? strip + 2 : 0;
+  const rightStrip = grid.kind === "grid" && ns.facet.rows ? strip + 2 : 0;
+  const free = ns.facet?.free ?? { x: false, y: false };
+  const n = grid.panels.length;
+  const showY = (p) => free.y || p.col === 0;
+  const showX = (p, i) => free.x || (grid.kind === "wrap" ? i + grid.ncol >= n : p.row === grid.nrow - 1);
+
+  // Two passes: the tick count depends on the panel size, and the margins depend on the tick labels.
+  let innerW = area.w / grid.ncol;
+  let innerH = area.h / grid.nrow;
+  let ml, mb, count, rotateX;
+  for (let pass = 0; pass < 2; pass++) {
+    count = { x: Math.max(2, innerW / (kind.x === "time" ? 110 : 75)), y: Math.max(2, innerH / 45) };
+    ml = Array(grid.ncol).fill(0);
+    mb = Array(grid.nrow).fill(0);
+    rotateX = false;
+    let xLabelW = 0;
+    grid.panels.forEach((p, i) => {
+      if (showY(p)) {
+        const t = ticks(kind.y, home[i].y, count.y, ns.scales.y?.format);
+        const w = d3.max(t.major, (v) => tw(t.format(v), fonts.tick)) ?? 0;
+        ml[p.col] = Math.max(ml[p.col], Math.ceil(w + TICK.size + TICK.padding + 3));
+      }
+      if (kind.x === "category" && showX(p, i)) {
+        const labels = home[i].x;
+        const w = d3.max(labels, (v) => tw(v, fonts.tick)) ?? 0;
+        xLabelW = Math.max(xLabelW, w);
+        if (w > (innerW / (labels.length + 0.2)) * 0.95) rotateX = true;
+      }
+    });
+    const xLabelH = rotateX ? Math.min(xLabelW, innerH * 0.6) * Math.sin((ROTATE * Math.PI) / 180) + fonts.tick : fonts.tick * 1.2;
+    grid.panels.forEach((p, i) => {
+      if (showX(p, i)) mb[p.row] = Math.max(mb[p.row], Math.ceil(xLabelH + TICK.size + TICK.padding + 3));
+    });
+    innerW = (area.w - d3.sum(ml) - gap * (grid.ncol - 1) - rightStrip) / grid.ncol;
+    innerH = (area.h - d3.sum(mb) - grid.nrow * wrapStrip - topStrip - gap * (grid.nrow - 1)) / grid.nrow;
+  }
+  innerW = Math.max(20, innerW);
+  innerH = Math.max(20, innerH);
+
+  const colX = d3.cumsum([area.x, ...ml.slice(0, -1).map((m) => m + innerW + gap)]);
+  const rowY = d3.cumsum([area.y + topStrip, ...mb.slice(0, -1).map((m) => wrapStrip + innerH + m + gap)]);
+  const panels = grid.panels.map((p, i) => ({
+    x: colX[p.col],
+    y: rowY[p.row] + wrapStrip,
+    w: ml[p.col] + innerW,
+    h: innerH + mb[p.row],
+    ml: ml[p.col],
+    mb: mb[p.row],
+    innerW,
+    innerH,
+    count,
+    rotateX,
+    showX: showX(p, i),
+    showY: showY(p),
+  }));
+
+  const strips = [];
+  grid.panels.forEach((p, i) => {
+    const b = panels[i];
+    const left = b.x + b.ml;
+    const label = (text, width) => fitText(text, fonts.strip, width - 8, true, metrics);
+    if (p.strips.top != null) strips.push({ x: left, y: b.y - wrapStrip - topStrip, w: innerW, h: strip, text: label(p.strips.top, innerW), full: p.strips.top });
+    if (p.strips.right != null) strips.push({ x: left + innerW + 2, y: b.y, w: strip, h: innerH, text: label(p.strips.right, innerH), full: p.strips.right, vertical: true });
+  });
+
+  const first = panels[0];
+  const lastCol = panels.find((b, i) => grid.panels[i].col === grid.ncol - 1) ?? first;
+  const innerLeft = first.x + first.ml;
+  const innerRight = lastCol.x + lastCol.w;
+  const panelsBottom = area.y + area.h;
+  const texts = [];
+  let y = pad;
+  for (const line of titleLines) texts.push({ text: line, attrs: { x: innerLeft, y: (y += fonts.title * 1.05), "font-size": fonts.title, "font-weight": "bold", fill: theme.ink, "text-anchor": "start" } }), (y += fonts.title * 0.2);
+  for (const line of subtitleLines) texts.push({ text: line, attrs: { x: innerLeft, y: (y += fonts.subtitle * 1.3), "font-size": fonts.subtitle, fill: theme.muted, "text-anchor": "start" } });
+  if (xTitle) texts.push({ text: xTitle, attrs: { x: (innerLeft + innerRight) / 2, y: panelsBottom + fonts.axisTitle * 1.35, "text-anchor": "middle", "font-size": fonts.axisTitle, fill: theme.muted } });
+  if (yTitle) {
+    const cy = area.y + (area.h - d3.sum(mb)) / 2;
+    texts.push({ text: yTitle, attrs: { transform: `translate(${pad + fonts.axisTitle * 0.85},${cy}) rotate(-90)`, "text-anchor": "middle", "font-size": fonts.axisTitle, fill: theme.muted } });
+  }
+  if (caption) texts.push({ text: fitText(caption, fonts.tick, W - 2 * pad, false, metrics), attrs: { x: innerLeft, y: H - pad - (bottom ? bottom : 0) + fonts.tick * 0.2, "font-size": fonts.tick, fill: theme.muted, "text-anchor": "start" } });
+  const rightX = W - pad - rightW;
+  const infoAt = !info
+    ? null
+    : info.position === "right"
+      ? { x: rightX, y: area.y }
+      : { x: Math.max(pad, Math.min(innerLeft, W - pad - info.width)), y: panelsBottom + xt + gap / 2 };
+  const above = at("right") ? info.height + s : 0;
+  const legendAt = !legend
+    ? null
+    : legend.horizontal
+      ? { x: Math.max(pad, (innerLeft + innerRight - legend.width) / 2), y: H - pad - legend.height }
+      : { x: rightX, y: area.y + above + Math.max(0, (area.h - d3.sum(mb) - above - legend.height) / 2) };
+  return { panels, strips, texts, legend: legendAt, info: infoAt, area, rotateX };
+}