@figurestead/web 0.9.0-alpha.1

package/src/renderers/scatter.js

@@ -0,0 +1,24 @@
+import { arrival, numericScales } from "./shared.js";
+import { compileProgress, drawAxes, drawScopePoint, drawText, pointMotionState } from "../marks.js";
+import { styleForSeries } from "../series-style.js";
+
+export function prepareScatter(contract) {
+  const keys = [...new Set(contract.data.series)];
+  const points = contract.data.x.map((x, i) => ({ x, y: contract.data.y[i], series: contract.data.series[i], colorIndex: keys.indexOf(contract.data.series[i]), index: i }));
+  return { points: arrival(points, contract), legend: keys.map((key, colorIndex) => ({ label: contract.data.seriesLabels[key], colorIndex })) };
+}
+
+export function drawScatter(context, env) {
+  const { contract, prepared, layout, progress, settled } = env, presentation = contract.presentation ?? {}; const scales = numericScales(prepared.points, contract.data, layout, { domains: env.domains });
+  drawAxes(context, { config: contract, layout, scales, xTicks: scales.xTicks, yTicks: scales.yTicks });
+  prepared.points.forEach((point) => { const style = styleForSeries(env, point.series, point.colorIndex), state = pointMotionState(point, progress, scales, layout.plot); if (contract.view?.motion === "semantic") { state.x = state.finalX; state.y = state.finalY; } drawScopePoint(context, state, { color: style.color, edge: style.edge, radius: Math.max(3.5, Math.sqrt(contract.profile.markerSize) * 0.64 * layout.scale) * (presentation.markerScale ?? 1), trailAlpha: contract.motion.trailAlpha, settled: settled || contract.view?.motion === "semantic", shape: style.glyph }); });
+  if (contract.data.summary === "linear_fit") {
+    const n = prepared.points.length, sx = prepared.points.reduce((a,p)=>a+p.x,0), sy = prepared.points.reduce((a,p)=>a+p.y,0), sxx = prepared.points.reduce((a,p)=>a+p.x*p.x,0), sxy = prepared.points.reduce((a,p)=>a+p.x*p.y,0);
+    const slope = (n*sxy-sx*sy)/(n*sxx-sx*sx || 1), intercept=(sy-slope*sx)/n, cp=compileProgress(progress, contract.timeline), x0=scales.xDomain[0], x1=x0+(scales.xDomain[1]-x0)*cp;
+    context.save();
+    if (contract.theme.summaryEdge) { context.strokeStyle=contract.theme.summaryEdge; context.globalAlpha=.62*cp; context.lineWidth=Math.max(2,2.8*layout.scale); context.beginPath(); context.moveTo(scales.x(x0),scales.y(intercept+slope*x0)); context.lineTo(scales.x(x1),scales.y(intercept+slope*x1)); context.stroke(); }
+    context.strokeStyle=contract.theme.summaryCore; context.globalAlpha=.72*cp; context.lineWidth=Math.max(1,1.5*layout.scale); context.beginPath(); context.moveTo(scales.x(x0),scales.y(intercept+slope*x0)); context.lineTo(scales.x(x1),scales.y(intercept+slope*x1)); context.stroke(); context.restore();
+  }
+  const keys = [...new Set(contract.data.series)], legend = prepared.legend.map((item, index) => ({ ...item, style: styleForSeries(env, keys[index], index) }));
+  drawText(context, { config: contract, layout, legend, legendPosition: presentation.legend ?? "top-right", seriesMarkers: presentation.seriesMarkers ?? [] }); return scales;
+}

package/src/renderers/shared.js

@@ -0,0 +1,21 @@
+import { extent, linearScale, ticks } from "../scales.js";
+import { deriveSeed, mulberry32 } from "../random.js";
+
+export function numericScales(points, data, layout, { categorical = false, domains = {} } = {}) {
+  const xs = points.map((p) => p.x), ys = points.map((p) => p.y);
+  const xd = domains.x || data.xDomain || (categorical ? [0, Math.max(1, Math.max(...xs))] : extent(xs));
+  const yd = domains.y || data.yDomain || extent(ys);
+  return { x: linearScale(xd, [layout.plot.left, layout.plot.right]), y: linearScale(yd, [layout.plot.bottom, layout.plot.top]), xTicks: categorical ? xs : ticks(xd, 6), yTicks: ticks(yd, 6), xDomain: xd, yDomain: yd };
+}
+
+export function arrival(points, contract, order = "random") {
+  const random = mulberry32(deriveSeed(contract.motion.seed, `${contract.renderer}:marks`));
+  const [start, end] = contract.timeline.marksEnter; const span = end - start;
+  const ranks = points.map((_, i) => i);
+  if (order === "x") ranks.sort((a, b) => points[a].x - points[b].x || points[a].colorIndex - points[b].colorIndex || a - b);
+  else for (let i = ranks.length - 1; i > 0; i -= 1) { const j = Math.floor(random() * (i + 1)); [ranks[i], ranks[j]] = [ranks[j], ranks[i]]; }
+  const rank = new Map(ranks.map((index, i) => [index, i]));
+  return points.map((point, index) => ({ ...point, delay: start + (rank.get(index) / Math.max(1, points.length - 1)) * span * 0.62, duration: Math.max(0.08, span * 0.52), startOffset: 0.15 + random() * 0.85 }));
+}
+
+export const median = (values) => { const a = [...values].sort((x, y) => x - y); const m = Math.floor(a.length / 2); return a.length % 2 ? a[m] : (a[m - 1] + a[m]) / 2; };

package/src/renderers/strip-summary.js

@@ -0,0 +1,40 @@
+import { arrival, median, numericScales } from "./shared.js";
+import { deriveSeed, mulberry32 } from "../random.js";
+import { compileProgress, drawAxes, drawScopePoint, drawText, pointMotionState } from "../marks.js";
+
+export function prepareStrip(contract) {
+  const keys=[...new Set(contract.data.series)], random=mulberry32(deriveSeed(contract.motion.seed,"strip:jitter"));
+  const points=contract.data.values.map((y,i)=>({ x:contract.data.groups.indexOf(contract.data.group[i])+(random()-.5)*.28, y, group:contract.data.group[i], series:contract.data.series[i], colorIndex:keys.indexOf(contract.data.series[i]), index:i }));
+  return { points:arrival(points,contract), legend:keys.map((key,colorIndex)=>({label:contract.data.seriesLabels[key],colorIndex})), medians:contract.data.groups.map((group,index)=>({x:index,y:median(contract.data.values.filter((_,i)=>contract.data.group[i]===group))})) };
+}
+
+export function compileStripScene({ panel, contract, prepared, styles, markId }) {
+  const keys = [...new Set(contract.data.series)];
+  const marks = prepared.points.map((point) => {
+    const groupIndex = contract.data.groups.indexOf(point.group);
+    return {
+      id: markId(panel, "point", point.index), kind: "point", series: point.series,
+      group: point.group, xOffset: point.x - groupIndex, y: point.y,
+      style: styles[point.series],
+    };
+  });
+  if (contract.data.summary === "median") prepared.medians.forEach((median, index) => marks.push({
+    id: markId(panel, "median", contract.data.groups[index]), kind: "median-rule", role: "summary",
+    group: contract.data.groups[index], y: median.y, xOffset1: -0.22, xOffset2: 0.22,
+    style: { color: contract.theme.summaryCore, edge: contract.theme.summaryEdge ?? null, lineStyle: "solid", lineWidth: 2 },
+  }));
+  return {
+    marks,
+    categories: { x: [...contract.data.groups], y: null },
+    scales: { x: { ...contract.xScale, type: "band" }, y: contract.yScale },
+    legend: keys.map((key, colorIndex) => ({ key, label: contract.data.seriesLabels[key], colorIndex, style: styles[key] })),
+  };
+}
+
+export function drawStrip(context, env) {
+  const {contract,prepared,layout,progress,settled}=env, presentation=contract.presentation??{}, scales=numericScales(prepared.points,{...contract.data,xDomain:[-.5,contract.data.groups.length-.5]},layout,{categorical:true,domains:env.domains});
+  drawAxes(context,{config:contract,layout,scales,xTicks:contract.data.groups.map((_,i)=>i),yTicks:scales.yTicks,xCategories:contract.data.groups});
+  prepared.points.forEach((point)=>drawScopePoint(context,pointMotionState(point,progress,scales,layout.plot),{color:contract.theme.series[point.colorIndex%contract.theme.series.length],edge:contract.theme.seriesEdges?.[point.colorIndex%contract.theme.series.length],radius:Math.max(3.4,Math.sqrt(contract.profile.markerSize)*.62*layout.scale)*(presentation.markerScale??1),trailAlpha:contract.motion.trailAlpha,settled,shape:presentation.seriesMarkers?.[point.colorIndex%presentation.seriesMarkers.length]??"ring"}));
+  if(contract.data.summary==="median") { const cp=compileProgress(progress,contract.timeline); context.save(); context.strokeStyle=contract.theme.summaryCore; context.lineWidth=Math.max(1.2,2*layout.scale); context.globalAlpha=.84*cp; prepared.medians.forEach((m)=>{context.beginPath();context.moveTo(scales.x(m.x-.22*cp),scales.y(m.y));context.lineTo(scales.x(m.x+.22*cp),scales.y(m.y));context.stroke();});context.restore(); }
+  drawText(context,{config:contract,layout,legend:prepared.legend,legendPosition:presentation.legend??"top-right",seriesMarkers:presentation.seriesMarkers??[]}); return scales;
+}

package/src/resolved-scene.js

@@ -0,0 +1,249 @@
+import { deriveFigureLayout } from "./figure-layout.js";
+import { markMotionState } from "./motion-plan.js";
+import { monotoneSegmentControls } from "./renderers/line.js";
+import { bandScale, formatTick, formatTimeTick, linearScale, timeScale, ticks, timeTicks } from "./scales.js";
+
+export const RESOLVED_SCENE_VERSION = "figurestead.resolved-scene/1";
+export const RESOLVED_RENDERERS = Object.freeze([
+  "line", "scatter", "categorical_bar", "categorical_layered_bar", "categorical_matrix",
+  "interval_comparison", "strip_summary", "temporal_coverage", "temporal_observations",
+  "paired_points", "reference_improvement",
+]);
+
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+const cloneRect = (value) => ({ ...value });
+function deepFreeze(value) { if (!value || typeof value !== "object" || Object.isFrozen(value)) return value; Object.values(value).forEach(deepFreeze); return Object.freeze(value); }
+
+function parseHex(color) {
+  const match = /^#([0-9a-f]{6})$/i.exec(color);
+  if (match) return [0, 2, 4].map((offset) => Number.parseInt(match[1].slice(offset, offset + 2), 16));
+  const rgb = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(color);
+  return rgb ? rgb.slice(1).map(Number) : [47, 185, 143];
+}
+
+function mix(left, right, amount) {
+  const a = parseHex(left), b = parseHex(right), t = clamp01(amount);
+  return `rgb(${a.map((value, index) => Math.round(value + (b[index] - value) * t)).join(",")})`;
+}
+
+function luminance(color) {
+  const values = parseHex(color).map((value) => { const item = value / 255; return item <= 0.04045 ? item / 12.92 : ((item + 0.055) / 1.055) ** 2.4; });
+  return 0.2126 * values[0] + 0.7152 * values[1] + 0.0722 * values[2];
+}
+function contrast(left, right) { const values = [luminance(left), luminance(right)].sort((a, b) => b - a); return (values[0] + 0.05) / (values[1] + 0.05); }
+
+function panelLayout(source, panel) {
+  const layout = {
+    ...source,
+    rect: source.rect ? cloneRect(source.rect) : { left: 0, top: 0, right: source.width, bottom: source.height },
+    plot: cloneRect(source.plot), text: source.text ? { ...source.text } : null, font: { ...source.font },
+  };
+  if (panel.presentation?.legend === "outside-right" && panel.legend.length) {
+    const width = Math.min(190 * layout.scale, Math.max(110, (layout.rect.right - layout.rect.left) * 0.28));
+    layout.plot.right = Math.max(layout.plot.left + 80, layout.plot.right - width);
+    layout.legend = {
+      left: layout.plot.right + 18 * layout.scale,
+      right: layout.rect.right - 8 * layout.scale,
+      top: layout.plot.top,
+      bottom: layout.plot.bottom,
+      outside: true,
+    };
+  } else {
+    layout.legend = { left: layout.plot.left, right: layout.plot.right, top: layout.plot.top, bottom: layout.plot.bottom, outside: false };
+  }
+  return layout;
+}
+
+function numericScale(type, domain, range) {
+  return type === "time" ? timeScale(domain, range) : linearScale(domain, range);
+}
+
+function numericTicks(type, domain) {
+  const values = type === "time" ? timeTicks(domain, 5) : ticks(domain, 5);
+  return values.map((value) => ({ value, label: type === "time" ? formatTimeTick(value, domain) : formatTick(value) }));
+}
+
+function resolveAxes(panel, layout, plotOverride = null) {
+  const plot = plotOverride ?? layout.plot, xType = panel.scales.x.type, yType = panel.scales.y.type;
+  const xCategories = panel.categories.x, yCategories = panel.categories.y;
+  const x = xType === "band" ? bandScale(xCategories ?? [], [plot.left, plot.right], { padding: panel.scales.x.padding }) : numericScale(xType, panel.domain.x, [plot.left, plot.right]);
+  const y = yType === "band" ? bandScale(yCategories ?? [], [plot.top, plot.bottom], { padding: panel.scales.y.padding }) : numericScale(yType, panel.domain.y, [plot.bottom, plot.top]);
+  const xTicks = xType === "band" ? (xCategories ?? []).map((value) => ({ value, label: panel.categoryLabels?.x?.[value] ?? value })) : numericTicks(xType, panel.domain.x);
+  const yTicks = yType === "band" ? (yCategories ?? []).map((value) => ({ value, label: panel.categoryLabels?.y?.[value] ?? value })) : numericTicks(yType, panel.domain.y);
+  return { x, y, xTicks, yTicks, xType, yType, plot };
+}
+
+function pointGeometry(mark, axes, radius) {
+  let cx;
+  if (mark.group != null && axes.x.bandwidth) cx = axes.x(mark.group) + axes.x.bandwidth() / 2 + (mark.xOffset ?? 0) * (axes.x.step?.() ?? axes.x.bandwidth());
+  else cx = axes.x(mark.x);
+  const cy = mark.yCategory != null && axes.y.bandwidth ? axes.y(mark.yCategory) + axes.y.bandwidth() / 2 : axes.y(mark.y);
+  return { cx, cy, radius };
+}
+
+function lineGeometry(panel, axes, radius) {
+  const controls = new Map();
+  const series = [...new Set(panel.marks.filter((mark) => mark.kind === "point").map((mark) => mark.series))];
+  series.forEach((key) => {
+    const points = panel.marks.filter((mark) => mark.kind === "point" && mark.series === key);
+    const values = panel.encoding.interpolation === "monotone" ? monotoneSegmentControls(points) : null;
+    values?.forEach((value, index) => controls.set(`${key}\u0000${index}`, value));
+  });
+  const segmentIndex = new Map();
+  return panel.marks.map((mark) => {
+    if (mark.kind === "point") return { ...mark, geometry: pointGeometry(mark, axes, radius) };
+    if (mark.kind !== "segment") return { ...mark };
+    const index = segmentIndex.get(mark.series) ?? 0; segmentIndex.set(mark.series, index + 1);
+    const control = controls.get(`${mark.series}\u0000${index}`);
+    return { ...mark, geometry: {
+      x1: axes.x(mark.from.x), y1: axes.y(mark.from.y), x2: axes.x(mark.to.x), y2: axes.y(mark.to.y),
+      ...(control ? { c1x: axes.x(control.c1.x), c1y: axes.y(control.c1.y), c2x: axes.x(control.c2.x), c2y: axes.y(control.c2.y) } : {}),
+    } };
+  });
+}
+
+function scatterGeometry(panel, axes, radius) {
+  return panel.marks.map((mark) => {
+    if (mark.kind === "point") return { ...mark, geometry: pointGeometry(mark, axes, radius) };
+    if (mark.kind === "summary-line") {
+      const [x0, x1] = panel.domain.x;
+      return { ...mark, geometry: { x1: axes.x(x0), y1: axes.y(mark.intercept + mark.slope * x0), x2: axes.x(x1), y2: axes.y(mark.intercept + mark.slope * x1) } };
+    }
+    return { ...mark };
+  });
+}
+
+function barGeometry(panel, axes, layout) {
+  const horizontal = panel.orientation === "horizontal", categories = horizontal ? panel.categories.y : panel.categories.x;
+  const category = horizontal ? axes.y : axes.x, value = horizontal ? axes.x : axes.y;
+  const series = [...new Set(panel.marks.map((mark) => mark.series))], layered = panel.renderer === "categorical_layered_bar";
+  return panel.marks.map((mark) => {
+    const start = category(mark.category), bandwidth = category.bandwidth();
+    let left, right, top, bottom;
+    if (layered) {
+      const ratio = Math.max(0.36, 1 - mark.seriesIndex * 0.24), inset = bandwidth * (1 - ratio) / 2;
+      if (horizontal) { left = value(0); right = value(mark.value ?? 0); top = start + inset; bottom = start + bandwidth - inset; }
+      else { left = start + inset; right = start + bandwidth - inset; top = value(mark.value ?? 0); bottom = value(0); }
+    } else {
+      const slot = bandwidth / Math.max(1, series.length), inset = slot * 0.12, seriesIndex = series.indexOf(mark.series);
+      if (horizontal) { left = value(0); right = value(mark.value ?? 0); top = start + slot * seriesIndex + inset; bottom = start + slot * (seriesIndex + 1) - inset; }
+      else { left = start + slot * seriesIndex + inset; right = start + slot * (seriesIndex + 1) - inset; top = value(mark.value ?? 0); bottom = value(0); }
+    }
+    return { ...mark, geometry: {
+      left: Math.min(left, right), right: Math.max(left, right), top: Math.min(top, bottom), bottom: Math.max(top, bottom),
+      baselineX: horizontal ? value(0) : null, baselineY: horizontal ? null : value(0),
+      alpha: layered && mark.layer === 0 ? 0.3 : 0.68,
+    } };
+  });
+}
+
+function matrixGeometry(panel, layout, theme) {
+  const { plot } = layout, xs = panel.categories.x, ys = panel.categories.y;
+  const x = bandScale(xs, [plot.left, plot.right], { padding: 0.06 }), y = bandScale(ys, [plot.top, plot.bottom], { padding: 0.06 });
+  const domain = panel.valueScale?.domain ?? [0, 1];
+  const marks = panel.marks.map((mark) => {
+    const t = Number.isFinite(mark.value) ? clamp01((mark.value - domain[0]) / (domain[1] - domain[0])) : 0;
+    const diagonal = mark.diagonalMode === "context" && mark.xCategory === mark.yCategory;
+    const fill = mark.status !== "observed" ? mark.style.low : diagonal ? mix(mark.style.low, mark.style.color, 0.12)
+      : t < 0.68 ? mix(mark.style.low, mark.style.color, t / 0.68) : mix(mark.style.color, mark.style.high, (t - 0.68) / 0.32);
+    const labelColor = contrast(theme.label, fill) >= contrast(theme.field, fill) ? theme.label : theme.field;
+    return { ...mark, geometry: { left: x(mark.xCategory), top: y(mark.yCategory), right: x(mark.xCategory) + x.bandwidth(), bottom: y(mark.yCategory) + y.bandwidth(), fill, labelColor } };
+  });
+  return { marks, axes: {
+    x, y, xType: "band", yType: "band",
+    xTicks: xs.map((value) => ({ value, label: value })), yTicks: ys.map((value) => ({ value, label: value })),
+  } };
+}
+
+function categoryCenter(scale, value) { return scale(value) + scale.bandwidth() / 2; }
+
+function extensionGeometry(panel, axes, layout, radius) {
+  const { plot } = axes;
+  return panel.marks.map((mark) => {
+    if (mark.kind === "point") return { ...mark, geometry: pointGeometry(mark, axes, radius) };
+    if (mark.kind === "interval") return { ...mark, geometry: {
+      x1: axes.x(mark.low), x2: axes.x(mark.high),
+      y: categoryCenter(axes.y, mark.category), cap: Math.max(2.5, radius * 0.72),
+    } };
+    if (mark.kind === "median-rule") {
+      const center = categoryCenter(axes.x, mark.group), step = axes.x.step?.() ?? axes.x.bandwidth();
+      return { ...mark, geometry: { x1: center + mark.xOffset1 * step, x2: center + mark.xOffset2 * step, y1: axes.y(mark.y), y2: axes.y(mark.y) } };
+    }
+    if (mark.kind === "connector") return { ...mark, geometry: {
+      x1: axes.x(mark.x1), x2: axes.x(mark.x2), y: categoryCenter(axes.y, mark.yCategory),
+    } };
+    if (mark.kind === "reference-band") return { ...mark, geometry: {
+      left: plot.left, right: plot.right,
+      top: Math.min(axes.y(mark.to), axes.y(mark.from)), bottom: Math.max(axes.y(mark.to), axes.y(mark.from)),
+    } };
+    if (mark.kind === "baseline-rule") return { ...mark, geometry: { x: axes.x(mark.x), top: plot.top, bottom: plot.bottom } };
+    if (mark.kind === "row-band") {
+      const first = axes.y(mark.categoryFrom), last = axes.y(mark.categoryTo), bandwidth = axes.y.bandwidth();
+      return { ...mark, geometry: { left: plot.left, right: plot.right, top: Math.min(first, last), bottom: Math.max(first, last) + bandwidth } };
+    }
+    if (mark.kind === "rug") return { ...mark, geometry: {
+      x: axes.x(mark.x), y: categoryCenter(axes.y, mark.yCategory), halfHeight: Math.max(4, 5 * layout.scale),
+    } };
+    return { ...mark, geometry: null };
+  });
+}
+
+function coverageGeometry(panel, layout, radius) {
+  const height = layout.plot.bottom - layout.plot.top;
+  const countPlot = { ...layout.plot, bottom: layout.plot.top + Math.min(48 * layout.scale, height * 0.22) };
+  const rugPlot = { ...layout.plot, top: countPlot.bottom + Math.max(8, 10 * layout.scale) };
+  const axes = resolveAxes(panel, layout, rugPlot);
+  const marks = panel.marks.map((mark) => {
+    if (mark.kind === "rug") return { ...mark, geometry: {
+      x: axes.x(mark.x), y: categoryCenter(axes.y, mark.yCategory), halfHeight: Math.max(4, 5 * layout.scale),
+    } };
+    if (mark.kind === "temporal-bar") {
+      const left = Math.max(countPlot.left, axes.x(mark.xFrom) + 1), right = Math.min(countPlot.right, axes.x(mark.xTo) - 1);
+      const usable = Math.max(0, countPlot.bottom - countPlot.top - 12 * layout.scale), barHeight = usable * mark.value / Math.max(1, mark.maximum);
+      return { ...mark, geometry: { left, right: Math.max(left, right), top: countPlot.bottom - barHeight, bottom: countPlot.bottom, labelX: (left + Math.max(left, right)) / 2, labelY: countPlot.bottom - barHeight - 2 * layout.scale } };
+    }
+    return { ...mark, geometry: null };
+  });
+  return { axes, marks, plots: { count: countPlot, rug: rugPlot } };
+}
+
+export function isResolvedRenderer(renderer) { return RESOLVED_RENDERERS.includes(renderer); }
+
+export function resolveTerminalScene(scene, options = {}) {
+  const width = options.width ?? 960, height = options.height ?? 600;
+  const layout = deriveFigureLayout(width, height, { panels: scene.panels, layout: scene.layout, theme: scene.theme, spec: scene.spec });
+  const panels = scene.panels.map((panel, index) => {
+    const resolvedLayout = panelLayout(layout.panels[index], panel);
+    let axes = resolveAxes(panel, resolvedLayout), marks, plots = null;
+    const radius = Math.max(3.2, Math.sqrt(scene.profile.markerSize) * 0.62 * resolvedLayout.scale) * (panel.presentation?.markerScale ?? 1);
+    if (panel.renderer === "line") marks = lineGeometry(panel, axes, radius);
+    else if (panel.renderer === "scatter") marks = scatterGeometry(panel, axes, radius);
+    else if (["categorical_bar", "categorical_layered_bar"].includes(panel.renderer)) marks = barGeometry(panel, axes, resolvedLayout);
+    else if (panel.renderer === "categorical_matrix") { const matrix = matrixGeometry(panel, resolvedLayout, scene.theme); marks = matrix.marks; axes = matrix.axes; }
+    else if (panel.renderer === "temporal_coverage") { const coverage = coverageGeometry(panel, resolvedLayout, radius); marks = coverage.marks; axes = coverage.axes; plots = coverage.plots; }
+    else if (["interval_comparison", "strip_summary", "temporal_observations", "paired_points", "reference_improvement"].includes(panel.renderer)) marks = extensionGeometry(panel, axes, resolvedLayout, radius);
+    else marks = panel.marks.map((mark) => ({ ...mark, geometry: null }));
+    const evidenceFrame = cloneRect(plots ? resolvedLayout.plot : (axes.plot ?? resolvedLayout.plot));
+    return { ...panel, layout: resolvedLayout, axes, plots, evidenceFrame, marks, resolved: isResolvedRenderer(panel.renderer) };
+  });
+  return deepFreeze({ schemaVersion: RESOLVED_SCENE_VERSION, sourceSceneVersion: scene.schemaVersion, width, height, theme: scene.theme, spec: scene.spec, profile: scene.profile, applicationProfile: scene.applicationProfile, view: scene.view, layout, panels, motionPlan: scene.motionPlan });
+}
+
+export function resolveSceneFrame(resolvedScene, progress = 1) {
+  const p = clamp01(progress);
+  return {
+    ...resolvedScene,
+    progress: p,
+    panels: resolvedScene.panels.map((panel) => {
+      const plan = resolvedScene.motionPlan.panels.find((item) => item.panelId === panel.id);
+      return { ...panel, marks: panel.marks.map((mark, index) => ({
+        ...mark,
+        motion: markMotionState(mark, index, panel.marks.length, p, plan?.strategy ?? "none"),
+      })) };
+    }),
+  };
+}
+
+export function resolvedTerminalGeometry(resolvedScene) {
+  return resolvedScene.panels.map((panel) => ({ panelId: panel.id, marks: panel.marks.map((mark) => ({ id: mark.id, geometry: mark.geometry })) }));
+}

package/src/scales.js

@@ -0,0 +1,68 @@
+export function linearScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0 || 1;
+  return (value) => r0 + ((value - d0) / span) * (r1 - r0);
+}
+
+export function parseTime(value, path = "time value") {
+  const milliseconds = value instanceof Date ? value.getTime() : typeof value === "number" ? value : Date.parse(value);
+  if (!Number.isFinite(milliseconds)) throw new TypeError(`${path} must be an ISO date, Date, or finite epoch milliseconds`);
+  return milliseconds;
+}
+
+export function timeScale(domain, range) {
+  return linearScale(domain.map((value, index) => parseTime(value, `time domain[${index}]`)), range);
+}
+
+export function bandScale(domain, range, { padding = 0.12 } = {}) {
+  const keys = domain.map(String), [r0, r1] = range, count = Math.max(1, keys.length);
+  const step = (r1 - r0) / count, bandwidth = step * (1 - padding);
+  const offset = (step - bandwidth) / 2, lookup = new Map(keys.map((key, index) => [key, r0 + index * step + offset]));
+  const scale = (value) => lookup.get(String(value));
+  scale.bandwidth = () => bandwidth; scale.step = () => step; scale.domain = () => [...keys];
+  return scale;
+}
+
+export function timeTicks(domain, count = 6) {
+  const numeric = domain.map((value, index) => parseTime(value, `time domain[${index}]`));
+  return ticks(numeric, count);
+}
+
+export function formatTimeTick(value, domain = null) {
+  const date = new Date(parseTime(value));
+  const span = domain ? Math.abs(parseTime(domain[1]) - parseTime(domain[0])) : 0;
+  const options = span > 1000 * 60 * 60 * 24 * 730 ? { year: "numeric" }
+    : span > 1000 * 60 * 60 * 24 * 60 ? { month: "short", year: "2-digit" }
+      : { month: "short", day: "numeric" };
+  return new Intl.DateTimeFormat("en-US", { timeZone: "UTC", ...options }).format(date);
+}
+
+export function extent(values, padding = 0.08, floor = null) {
+  const minimum = Math.min(...values);
+  const maximum = Math.max(...values);
+  const span = maximum - minimum || Math.max(Math.abs(maximum), 1);
+  let low = minimum - span * padding;
+  const high = maximum + span * padding;
+  if (floor !== null) low = Math.min(floor, low);
+  return [low, high];
+}
+
+export function ticks(domain, count = 6) {
+  const [start, end] = domain;
+  if (count < 2) return [start];
+  const raw = (end - start) / (count - 1);
+  const power = 10 ** Math.floor(Math.log10(Math.abs(raw) || 1));
+  const normalized = raw / power;
+  const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * power;
+  const first = Math.ceil(start / step) * step;
+  const result = [];
+  for (let value = first; value <= end + step * 1e-9; value += step) result.push(Number(value.toPrecision(12)));
+  return result.length >= 2 ? result : [start, end];
+}
+
+export function formatTick(value) {
+  if (Math.abs(value) >= 1000 || (Math.abs(value) > 0 && Math.abs(value) < 0.01)) return value.toExponential(1);
+  if (Number.isInteger(value)) return String(value);
+  return Number(value.toFixed(2)).toString();
+}