ggaction 0.0.1

package/src/layout/title.js

@@ -0,0 +1,107 @@
+import { measureTextWidth, wrapText } from "./text.js";
+
+function lineCenters(lines, style, lineHeight, start) {
+  return lines.map((_, index) => start + style.fontSize / 2 + index * lineHeight);
+}
+
+export function buildTitleReadingBlock({ text, subtitle }, config) {
+  const titleLines = wrapText(text, {
+    maxWidth: config.maxWidth,
+    mode: config.wrap,
+    style: config.titleStyle
+  });
+  const subtitleLines = subtitle === undefined ? [] : wrapText(subtitle, {
+    maxWidth: config.maxWidth,
+    mode: config.wrap,
+    style: config.subtitleStyle
+  });
+  const titleLineHeight = config.lineHeight ?? config.titleStyle.fontSize * 1.2;
+  const subtitleLineHeight = config.lineHeight ??
+    config.subtitleStyle.fontSize * 1.2;
+  const titleCenters = lineCenters(
+    titleLines,
+    config.titleStyle,
+    titleLineHeight,
+    0
+  );
+  const titleBottom = titleCenters.at(-1) + config.titleStyle.fontSize / 2;
+  const subtitleStart = titleBottom + (subtitleLines.length === 0 ? 0 : config.gap);
+  const subtitleCenters = lineCenters(
+    subtitleLines,
+    config.subtitleStyle,
+    subtitleLineHeight,
+    subtitleStart
+  );
+  const height = subtitleLines.length === 0
+    ? titleBottom
+    : subtitleCenters.at(-1) + config.subtitleStyle.fontSize / 2;
+  const widths = [
+    ...titleLines.map(line => measureTextWidth(line, config.titleStyle)),
+    ...subtitleLines.map(line => measureTextWidth(line, config.subtitleStyle))
+  ];
+  return {
+    titleLines,
+    subtitleLines,
+    titleCenters,
+    subtitleCenters,
+    width: Math.max(...widths),
+    height
+  };
+}
+
+export function alignedTitleAnchor(start, length, blockLength, align) {
+  if (align === "left") return start + blockLength / 2;
+  if (align === "center") return start + length / 2;
+  return start + length - blockLength / 2;
+}
+
+function axisAlignedTextBounds({ x, y, text, style, align, rotation }) {
+  const width = measureTextWidth(text, style);
+  const left = align === "left" ? 0 : align === "center" ? -width / 2 : -width;
+  const right = left + width;
+  const top = -style.fontSize / 2;
+  const bottom = style.fontSize / 2;
+  const cosine = Math.cos(rotation);
+  const sine = Math.sin(rotation);
+  const corners = [
+    [left, top], [right, top], [right, bottom], [left, bottom]
+  ].map(([localX, localY]) => ({
+    x: x + localX * cosine - localY * sine,
+    y: y + localX * sine + localY * cosine
+  }));
+  return {
+    left: Math.min(...corners.map(point => point.x)),
+    right: Math.max(...corners.map(point => point.x)),
+    top: Math.min(...corners.map(point => point.y)),
+    bottom: Math.max(...corners.map(point => point.y))
+  };
+}
+
+function unionBounds(bounds) {
+  return {
+    left: Math.min(...bounds.map(item => item.left)),
+    right: Math.max(...bounds.map(item => item.right)),
+    top: Math.min(...bounds.map(item => item.top)),
+    bottom: Math.max(...bounds.map(item => item.bottom))
+  };
+}
+
+export function resolveTitleComponentBounds(component, style) {
+  return unionBounds(component.lines.map((text, index) => axisAlignedTextBounds({
+    x: Array.isArray(component.x) ? component.x[index] : component.x,
+    y: Array.isArray(component.y) ? component.y[index] : component.y,
+    text,
+    style,
+    align: component.textAlign,
+    rotation: component.rotation
+  })));
+}
+
+export function unionTitleBounds(bounds) {
+  return unionBounds(bounds);
+}
+
+export function layoutBoundsIntersect(first, second) {
+  return first.left < second.right && first.right > second.left &&
+    first.top < second.bottom && first.bottom > second.top;
+}

package/src/materialization/bars/aggregate.js

@@ -0,0 +1,184 @@
+import { deriveBarAggregates } from "../../grammar/bars/aggregate.js";
+import {
+  BAR_ORIENTATIONS,
+  resolveBarChannels,
+  resolveBarColorLayout
+} from "../../grammar/bars/policy.js";
+import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
+import {
+  isDiscretePositionScaleType,
+  mapContinuousScaleValues,
+  mapOrdinalPositionValues,
+  mapSequentialColors
+} from "../../grammar/scales.js";
+import {
+  DEFAULT_BAR_FILL,
+  DEFAULT_BAR_STROKE,
+  DEFAULT_BAR_STROKE_WIDTH
+} from "./resolve.js";
+import { deriveGroupedRectangles } from "./grouped.js";
+import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+
+export function deriveAggregateRectangles(required, resolved, widthConfig) {
+  const { dataset, layer } = required;
+  const layout = resolveBarColorLayout(layer);
+  if (layout === "group") {
+    return deriveGroupedRectangles(required, resolved, widthConfig);
+  }
+
+  const xScale = resolved.resolvedScales[required.xEncoding.scale];
+  const yScale = resolved.resolvedScales[required.yEncoding.scale];
+  const channels = resolveBarChannels(layer);
+  const vertical = channels.orientation === BAR_ORIENTATIONS.vertical;
+  const categoryScale = vertical ? xScale : yScale;
+  const measureScale = vertical ? yScale : xScale;
+  const colorEncoding = layer.encoding?.color;
+  const colorScale = resolved.resolvedScales[colorEncoding?.scale];
+  if (colorEncoding !== undefined && colorScale === undefined) {
+    throw new Error(
+      `Bar mark "${layer.id}" requires a resolved color scale.`
+    );
+  }
+
+  const seriesDomain = colorScale?.domain ?? [undefined];
+  const seriesIndex = new Map(
+    seriesDomain.map((value, index) => [value, index])
+  );
+  const colors = new Map(seriesDomain.map((value, index) => [
+    value,
+    colorScale?.range[index % colorScale.range.length] ?? DEFAULT_BAR_FILL
+  ]));
+  const cells = deriveBarAggregates(dataset.values, layer).values;
+  const discreteCategory = categoryScale.type === "ordinal" ||
+    isDiscretePositionScaleType(categoryScale.type);
+  const categoryDomain = discreteCategory
+    ? categoryScale.domain
+    : [...new Set(cells.map(cell => cell[channels.category]))]
+        .sort((left, right) => left - right);
+  const categoryIndex = new Map(
+    categoryDomain.map((value, index) => [value, index])
+  );
+  const cellMap = new Map(cells.map(cell => [
+    JSON.stringify([cell[channels.category], cell.color]),
+    cell
+  ]));
+  const thickness = resolveBarWidth(
+    widthConfig,
+    Math.abs(categoryScale.bandwidth ?? categoryScale.step)
+  );
+  const baseline = layout === "overlay" ? measureScale.domain[0] : 0;
+  const continuousColor = colorEncoding?.fieldType === "quantitative";
+  if (continuousColor) {
+    const mappedColors = mapSequentialColors(
+      cells.map(cell => cell.color),
+      colorScale.domain,
+      colorScale.range,
+      {
+        interpolation: colorScale.interpolate,
+        clamp: colorScale.clamp ?? false
+      }
+    );
+    const cellByCategory = new Map(
+      cells.map((cell, index) => [cell[channels.category], { cell, index }])
+    );
+    const existing = resolved.graphicSpec.objects[layer.id].items;
+    const config = resolved.markConfigs[layer.id] ?? {};
+    const appearance = config.barAppearance ?? {};
+    return categoryDomain.flatMap(categoryValue => {
+      const entry = cellByCategory.get(categoryValue);
+      if (entry === undefined) return [];
+      const { cell, index } = entry;
+      const categoryCenter = discreteCategory
+        ? mapOrdinalPositionValues([categoryValue], categoryScale)[0]
+        : mapContinuousScaleValues(
+            [categoryValue],
+            categoryScale
+          )[0];
+      const [start, end] = mapContinuousScaleValues(
+        [baseline, cell[channels.measure]],
+        measureScale
+      );
+      return [{
+        x: vertical ? categoryCenter - thickness / 2 : Math.min(start, end),
+        y: vertical ? Math.min(start, end) : categoryCenter - thickness / 2,
+        width: vertical ? thickness : Math.abs(start - end),
+        height: vertical ? Math.abs(start - end) : thickness,
+        fill: mappedColors[index],
+        stroke: appearance.stroke === false
+          ? "transparent"
+          : appearance.stroke ?? config.stroke ??
+            existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
+        strokeWidth: appearance.stroke === false
+          ? 0
+          : appearance.strokeWidth ?? config.strokeWidth ??
+            existing[index]?.properties.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
+        ...((appearance.opacity ?? config.opacity) === undefined
+          ? (existing[index]?.properties.opacity === undefined
+              ? {}
+              : { opacity: existing[index].properties.opacity })
+          : { opacity: appearance.opacity ?? config.opacity })
+      }];
+    });
+  }
+  const segments = [];
+
+  for (const category of categoryDomain) {
+    const partition = seriesDomain.map(color =>
+      cellMap.get(JSON.stringify([category, color]))?.[channels.measure] ?? 0
+    );
+    for (const segment of layoutSeriesPartition(partition, layout, { baseline })) {
+      const color = seriesDomain[segment.index];
+      const cell = cellMap.get(JSON.stringify([category, color]));
+      if (cell === undefined) continue;
+      segments.push({ category, color, ...segment });
+    }
+  }
+
+  const existing = resolved.graphicSpec.objects[layer.id].items;
+  const config = resolved.markConfigs[layer.id] ?? {};
+  const appearance = config.barAppearance ?? {};
+  return segments.map((segment, index) => {
+    const category = categoryIndex.get(segment.category);
+    const color = seriesIndex.get(segment.color);
+    if (category === undefined || color === undefined) {
+      throw new Error("Bar value is outside a resolved ordinal domain.");
+    }
+    const categoryCenter = discreteCategory
+      ? mapOrdinalPositionValues([segment.category], categoryScale)[0]
+      : mapContinuousScaleValues(
+          [segment.category],
+          categoryScale
+        )[0];
+    const [start, end] = mapContinuousScaleValues(
+      [segment.start, segment.end],
+      measureScale
+    );
+    return {
+      x: vertical
+        ? categoryCenter - thickness / 2
+        : Math.min(start, end),
+      y: vertical
+        ? Math.min(start, end)
+        : categoryCenter - thickness / 2,
+      width: vertical ? thickness : Math.abs(start - end),
+      height: vertical ? Math.abs(start - end) : thickness,
+      fill: segment.color === undefined
+        ? appearance.fill ?? config.fill ?? colors.get(segment.color)
+        : colors.get(segment.color),
+      stroke: appearance.stroke === false
+        ? "transparent"
+        : appearance.stroke ?? config.stroke ?? existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
+      strokeWidth:
+        appearance.stroke === false
+          ? 0
+          : appearance.strokeWidth ?? config.strokeWidth ??
+            existing[index]?.properties.strokeWidth ??
+            DEFAULT_BAR_STROKE_WIDTH,
+      ...((appearance.opacity ?? config.opacity) === undefined
+        ? (existing[index]?.properties.opacity === undefined
+            ? {}
+            : { opacity: existing[index].properties.opacity })
+        : { opacity: appearance.opacity ?? config.opacity })
+    };
+  });
+}

package/src/materialization/bars/grouped.js

@@ -0,0 +1,117 @@
+import { deriveBarAggregates } from "../../grammar/bars/aggregate.js";
+import { mapContinuousScaleValues } from "../../grammar/scales.js";
+import { sameOrderedValues } from "../../core/validation.js";
+import {
+  DEFAULT_BAR_STROKE,
+  DEFAULT_BAR_STROKE_WIDTH
+} from "./resolve.js";
+import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+
+export function deriveGroupedRectangles(required, resolved, widthConfig) {
+  const { dataset, layer } = required;
+  const xScale = resolved.resolvedScales[required.xEncoding.scale];
+  const yScale = resolved.resolvedScales[required.yEncoding.scale];
+  const colorEncoding = layer.encoding?.color;
+  const offsetEncoding = layer.encoding?.xOffset;
+  const colorScale = resolved.resolvedScales[colorEncoding?.scale];
+  const offsetScale = resolved.resolvedScales[offsetEncoding?.scale];
+
+  if (
+    colorEncoding?.field === undefined ||
+    offsetEncoding?.field !== colorEncoding.field ||
+    colorScale === undefined ||
+    offsetScale === undefined
+  ) {
+    throw new Error(
+      `Grouped bar mark "${layer.id}" requires matching color and xOffset scales.`
+    );
+  }
+  if (!sameOrderedValues(colorScale.domain, offsetScale.domain)) {
+    throw new Error(
+      `Grouped bar mark "${layer.id}" requires matching color and xOffset domains.`
+    );
+  }
+
+  const xIndex = new Map(xScale.domain.map((value, index) => [value, index]));
+  const offsetIndex = new Map(
+    offsetScale.domain.map((value, index) => [value, index])
+  );
+  const colors = new Map(
+    colorScale.domain.map((value, index) => [
+      value,
+      colorScale.range[index % colorScale.range.length]
+    ])
+  );
+  const offsetMidpoint = (offsetScale.range[0] + offsetScale.range[1]) / 2;
+  const direction = Math.sign(xScale.step) || 1;
+  const offsetDirection = Math.sign(offsetScale.step) || 1;
+  const width = resolveBarWidth(widthConfig, offsetScale.bandwidth);
+  const baseline = mapContinuousScaleValues(
+    [yScale.domain[0]],
+    yScale
+  )[0];
+  const cells = [...deriveBarAggregates(dataset.values, layer).values].sort(
+    (left, right) =>
+      (xScale.type === "time"
+        ? left.x - right.x
+        : xIndex.get(left.x) - xIndex.get(right.x)) ||
+      offsetIndex.get(left.color) - offsetIndex.get(right.color)
+  );
+  const existing = resolved.graphicSpec.objects[layer.id].items;
+  const config = resolved.markConfigs[layer.id] ?? {};
+  const appearance = config.barAppearance ?? {};
+
+  return cells.map((cell, index) => {
+    const category = xIndex.get(cell.x);
+    const offset = offsetIndex.get(cell.color);
+    if ((xScale.type !== "time" && category === undefined) || offset === undefined) {
+      throw new Error("Grouped bar value is outside a resolved ordinal domain.");
+    }
+
+    const temporal = xScale.type === "time";
+    const categoryStart = temporal
+      ? mapContinuousScaleValues(
+          [cell.x],
+          xScale
+        )[0] - xScale.bandwidth / 2
+      : (xScale.start ?? xScale.range[0]) + category * xScale.step;
+    const offsetCenter = offsetScale.start + offset * offsetScale.step +
+      offsetDirection * offsetScale.bandwidth / 2;
+    const center = temporal
+      ? categoryStart + offsetCenter
+      : xScale.step > 0 && offsetScale.step > 0
+      ? categoryStart + offsetCenter
+      : categoryStart + xScale.step / 2 +
+        direction * (offsetCenter - offsetMidpoint);
+    const x = temporal || (xScale.step > 0 && offsetScale.step > 0)
+      ? categoryStart + offsetScale.start + offset * offsetScale.step +
+        (offsetScale.bandwidth - width) / 2
+      : center - width / 2;
+    const valueY = mapContinuousScaleValues(
+      [cell.y],
+      yScale
+    )[0];
+
+    return {
+      x,
+      y: Math.min(valueY, baseline),
+      width,
+      height: Math.abs(baseline - valueY),
+      fill: colors.get(cell.color),
+      stroke: appearance.stroke === false
+        ? "transparent"
+        : appearance.stroke ?? config.stroke ?? existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
+      strokeWidth:
+        appearance.stroke === false
+          ? 0
+          : appearance.strokeWidth ?? config.strokeWidth ??
+            existing[index]?.properties.strokeWidth ??
+            DEFAULT_BAR_STROKE_WIDTH,
+      ...((appearance.opacity ?? config.opacity) === undefined
+        ? (existing[index]?.properties.opacity === undefined
+            ? {}
+            : { opacity: existing[index].properties.opacity })
+        : { opacity: appearance.opacity ?? config.opacity })
+    };
+  });
+}

package/src/materialization/bars/histogram.js

@@ -0,0 +1,163 @@
+import {
+  countHistogramBins,
+  findHistogramBinIndex,
+  resolveHistogramBins
+} from "../../grammar/histogram.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalValues,
+  readNominalField,
+  readQuantitativeField
+} from "../../grammar/scales.js";
+import { resolveBarColorLayout } from "../../grammar/bars/policy.js";
+import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
+import {
+  DEFAULT_BAR_FILL,
+  DEFAULT_BAR_STROKE,
+  DEFAULT_BAR_STROKE_WIDTH
+} from "./resolve.js";
+
+export function deriveHistogramSegments({
+  dataset,
+  layer,
+  xEncoding,
+  xScale,
+  resolvedScales
+}) {
+  const xValues = readQuantitativeField(dataset.values, xEncoding.field);
+  const bins = resolveHistogramBins({
+    values: xValues,
+    bin: xEncoding.bin,
+    domain: xScale.domain,
+    nice: xScale.nice ?? true,
+    zero: xScale.zero ?? false
+  });
+  const colorEncoding = layer.encoding?.color;
+  const layout = resolveBarColorLayout(layer);
+
+  if (colorEncoding?.scale === undefined) {
+    return countHistogramBins(xValues, bins.boundaries).flatMap((count, bin) =>
+      layoutSeriesPartition([count], layout).map(segment => ({
+        bin,
+        start: bins.boundaries[bin],
+        end: bins.boundaries[bin + 1],
+        category: segment.index,
+        categoryCount: 1,
+        stackStart: segment.start,
+        stackEnd: segment.end,
+        members: dataset.values.filter((_, index) =>
+          findHistogramBinIndex(xValues[index], bins.boundaries) === bin
+        )
+      }))
+    );
+  }
+
+  const colorScale = resolvedScales[colorEncoding.scale];
+  if (colorScale === undefined) {
+    throw new Error(
+      `Bar mark "${layer.id}" requires a resolved color scale.`
+    );
+  }
+  const colorValues = readNominalField(dataset.values, colorEncoding.field);
+  mapOrdinalValues(colorValues, colorScale.domain, colorScale.range);
+  const categoryIndex = new Map(
+    colorScale.domain.map((value, index) => [value, index])
+  );
+  const counts = bins.boundaries.slice(0, -1).map(() =>
+    colorScale.domain.map(() => 0)
+  );
+
+  for (let index = 0; index < xValues.length; index += 1) {
+    const bin = findHistogramBinIndex(xValues[index], bins.boundaries);
+    const category = categoryIndex.get(colorValues[index]);
+    if (bin !== -1 && category !== undefined) counts[bin][category] += 1;
+  }
+
+  const segments = [];
+  for (let bin = 0; bin < counts.length; bin += 1) {
+    const partition = layoutSeriesPartition(counts[bin], layout);
+    for (const segment of partition) {
+      const category = segment.index;
+      segments.push({
+        bin,
+        start: bins.boundaries[bin],
+        end: bins.boundaries[bin + 1],
+        category,
+        categoryCount: counts[bin].length,
+        stackStart: segment.start,
+        stackEnd: segment.end,
+        members: dataset.values.filter((_, index) =>
+          findHistogramBinIndex(xValues[index], bins.boundaries) === bin &&
+          categoryIndex.get(colorValues[index]) === category
+        ),
+        color: mapOrdinalValues(
+          [colorScale.domain[category]],
+          colorScale.domain,
+          colorScale.range
+        )[0]
+      });
+    }
+  }
+  return segments;
+}
+
+export function deriveHistogramRectangles(required, resolved) {
+  const xScale = resolved.resolvedScales[required.xEncoding.scale];
+  const yScale = resolved.resolvedScales[required.yEncoding.scale];
+  const segments = deriveHistogramSegments({
+    ...required,
+    resolvedScales: resolved.resolvedScales
+  });
+  const existing = resolved.graphicSpec.objects[required.layer.id].items;
+  const layout = resolveBarColorLayout(required.layer);
+  const config = resolved.markConfigs[required.layer.id] ?? {};
+  const appearance = config.barAppearance ?? {};
+
+  return segments.map((segment, index) => {
+    const [x1, x2] = mapContinuousScaleValues(
+      [segment.start, segment.end],
+      xScale
+    );
+    const [y1, y2] = mapContinuousScaleValues(
+      [segment.stackStart, segment.stackEnd],
+      yScale
+    );
+    const binStart = Math.min(x1, x2);
+    const binWidth = Math.abs(x2 - x1);
+    const groupedWidth = layout === "group"
+      ? binWidth / segment.categoryCount
+      : binWidth;
+    const groupedX = layout === "group"
+      ? binStart + groupedWidth * segment.category
+      : binStart;
+    return {
+      x: groupedX,
+      y: Math.min(y1, y2),
+      width: groupedWidth,
+      height: Math.abs(y2 - y1),
+      fill:
+        segment.color ??
+        appearance.fill ??
+        config.fill ??
+        existing[index]?.properties.fill ??
+        DEFAULT_BAR_FILL,
+      stroke:
+        appearance.stroke === false
+          ? "transparent"
+          : appearance.stroke ?? config.stroke ??
+            existing[index]?.properties.stroke ??
+            DEFAULT_BAR_STROKE,
+      strokeWidth:
+        appearance.stroke === false
+          ? 0
+          : appearance.strokeWidth ?? config.strokeWidth ??
+            existing[index]?.properties.strokeWidth ??
+            DEFAULT_BAR_STROKE_WIDTH,
+      ...((appearance.opacity ?? config.opacity) === undefined
+        ? (existing[index]?.properties.opacity === undefined
+            ? {}
+            : { opacity: existing[index].properties.opacity })
+        : { opacity: appearance.opacity ?? config.opacity })
+    };
+  });
+}

package/src/materialization/bars/ranged.js

@@ -0,0 +1,53 @@
+import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales.js";
+import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+import { DEFAULT_BAR_FILL, DEFAULT_BAR_STROKE, DEFAULT_BAR_STROKE_WIDTH } from "./resolve.js";
+
+export function deriveRangedRectangles(required, program, width) {
+  const { layer, dataset } = required;
+  const vertical = layer.encoding?.y2 !== undefined;
+  const categoryChannel = vertical ? "x" : "y";
+  const measureChannel = vertical ? "y" : "x";
+  const secondaryChannel = `${measureChannel}2`;
+  const category = layer.encoding[categoryChannel];
+  const primary = layer.encoding[measureChannel];
+  const secondary = layer.encoding[secondaryChannel];
+  const categoryScale = program.resolvedScales[category.scale];
+  const measureScale = program.resolvedScales[primary.scale];
+  const centers = mapOrdinalPositionValues(dataset.values.map(row => row[category.field]), categoryScale);
+  const first = mapContinuousScaleValues(
+    dataset.values.map(row => row[primary.field]),
+    measureScale
+  );
+  const second = mapContinuousScaleValues(
+    dataset.values.map(row => row[secondary.field]),
+    measureScale
+  );
+  const band = resolveBarWidth(width, Math.abs(categoryScale.bandwidth ?? categoryScale.step));
+  const config = program.markConfigs[layer.id] ?? {};
+  const appearance = config.barAppearance ?? {};
+  const color = layer.encoding?.color;
+  const fills = color === undefined
+    ? dataset.values.map(() => appearance.fill ?? config.fill ?? DEFAULT_BAR_FILL)
+    : mapOrdinalValues(dataset.values.map(row => row[color.field]), program.resolvedScales[color.scale].domain, program.resolvedScales[color.scale].range);
+  return dataset.values.map((_, index) => vertical ? {
+    x: centers[index] - band / 2, y: Math.min(first[index], second[index]), width: band,
+    height: Math.abs(second[index] - first[index]), fill: fills[index],
+    stroke: appearance.stroke === false
+      ? "transparent"
+      : appearance.stroke ?? (color === undefined ? config.stroke ?? DEFAULT_BAR_STROKE : fills[index]),
+    strokeWidth: appearance.stroke === false
+      ? 0
+      : appearance.strokeWidth ?? config.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
+    opacity: appearance.opacity ?? config.opacity ?? 1
+  } : {
+    x: Math.min(first[index], second[index]), y: centers[index] - band / 2,
+    width: Math.abs(second[index] - first[index]), height: band, fill: fills[index],
+    stroke: appearance.stroke === false
+      ? "transparent"
+      : appearance.stroke ?? (color === undefined ? config.stroke ?? DEFAULT_BAR_STROKE : fills[index]),
+    strokeWidth: appearance.stroke === false
+      ? 0
+      : appearance.strokeWidth ?? config.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
+    opacity: appearance.opacity ?? config.opacity ?? 1
+  });
+}

package/src/materialization/bars/resolve.js

@@ -0,0 +1,56 @@
+import { DEFAULT_COLORS } from "../../theme/defaults.js";
+import { findDataset } from "../../selectors/datasets.js";
+import { findLayer } from "../../selectors/layers.js";
+import { findSemanticScale } from "../../selectors/scales.js";
+import { BAR_GRAINS, resolveBarGrain } from "../../grammar/bars/policy.js";
+
+export const DEFAULT_BAR_FILL = DEFAULT_COLORS.mark;
+export const DEFAULT_BAR_STROKE = "white";
+export const DEFAULT_BAR_STROKE_WIDTH = 0.5;
+
+export function requireCompleteBar(program, id) {
+  const layer = findLayer(program, id);
+
+  if (layer?.mark?.type !== "bar") {
+    throw new Error(`Unknown bar mark "${id}".`);
+  }
+  const dataset = findDataset(program, layer.data);
+  if (dataset === undefined) {
+    throw new Error(`Bar mark "${id}" requires an existing dataset.`);
+  }
+  const graphic = program.graphicSpec.objects[id];
+  const rectCollection = graphic?.type === "collection" &&
+    graphic.items?.every(child => child.type === "rect");
+  if (graphic?.type !== "rect" && !rectCollection) {
+    throw new Error(`Bar mark "${id}" requires rect graphics.`);
+  }
+
+  const xEncoding = layer.encoding?.x;
+  const yEncoding = layer.encoding?.y;
+  const grain = resolveBarGrain(layer);
+
+  if (
+    xEncoding?.scale === undefined ||
+    yEncoding?.scale === undefined ||
+    grain === undefined
+  ) {
+    throw new Error(
+      `Bar mark "${id}" requires binned x/count y or ordinal x/aggregate y encodings.`
+    );
+  }
+  const xScale = findSemanticScale(program, xEncoding.scale);
+  const yScale = findSemanticScale(program, yEncoding.scale);
+  if (xScale === undefined || yScale === undefined) {
+    throw new Error(`Bar mark "${id}" requires x and y scales.`);
+  }
+
+  return {
+    dataset,
+    layer,
+    xEncoding,
+    yEncoding,
+    xScale,
+    yScale,
+    materialization: grain
+  };
+}

package/src/materialization/dataProvenance.js

@@ -0,0 +1,15 @@
+import { findDataset } from "../selectors/datasets.js";
+
+export function findUpstreamTransform(program, dataset, type) {
+  const visited = new Set();
+  let current = dataset;
+  while (current !== undefined && !visited.has(current.id)) {
+    visited.add(current.id);
+    if (current.transform?.length !== 1) return undefined;
+    const transform = current.transform[0];
+    if (transform.type === type) return transform;
+    if (transform.type !== "markFilter") return undefined;
+    current = findDataset(program, current.source);
+  }
+  return undefined;
+}