ggaction 0.0.6 → 0.0.8

package/src/actions/marks/point/materialize.js

@@ -12,6 +12,7 @@ import {
   resolvePointJitter
 } from "../../../grammar/jitter.js";
 import { polarToCartesian, resolvePolarFrame } from "../../../grammar/polar.js";
+import { resolveDirectionValues } from "../../../grammar/direction.js";
 import { resolveGraphicBounds } from "../../../layout/canvas.js";
 import { validateMarkOptions } from "../shared.js";
 import {
@@ -60,8 +61,10 @@ function compactProperties(properties) {
   );
 }
 
-function incompleteShapeGraphic(shape, properties) {
-  const type = getPointGraphicType(shape);
+function incompleteShapeGraphic(shape, properties, angle) {
+  const type = angle !== undefined && shape === "square"
+    ? "path"
+    : getPointGraphicType(shape);
   const incomplete = type === "path"
     ? { fill: properties.fill, opacity: properties.opacity }
     : properties;
@@ -99,6 +102,7 @@ function resolveJitterEntries({
   y,
   area,
   shapes,
+  angles,
   config,
   graphic,
   existingChildren
@@ -131,7 +135,8 @@ function resolveJitterEntries({
       area: resolvedArea,
       strokeWidth: typeof config.stroke === "string"
         ? config.strokeWidth ?? 1
-        : 0
+        : 0,
+      angle: angles?.[index]
     });
     return [{
       index,
@@ -150,6 +155,7 @@ function applyPointJitter(program, {
   y,
   area,
   shapes,
+  angles,
   config,
   graphic,
   existingChildren
@@ -172,6 +178,7 @@ function applyPointJitter(program, {
     y,
     area,
     shapes,
+    angles,
     config,
     graphic,
     existingChildren
@@ -234,6 +241,7 @@ export const rematerializePointMark = action(
     const area = resolveRowEncodingValues(this, layer, dataset, "size");
     const encodedShape = resolveRowEncodingValues(this, layer, dataset, "shape");
     const encodedOpacity = resolveRowEncodingValues(this, layer, dataset, "opacity");
+    const angles = resolveDirectionValues(dataset.values, layer.encoding?.angle);
     const config = this.markConfigs[id] ?? {};
     const fill = mappedFill ?? config.fill ?? DEFAULT_POINT_FILL;
     const shapes = encodedShape ?? dataset.values.map(() => config.shape ?? "circle");
@@ -241,6 +249,7 @@ export const rematerializePointMark = action(
     const constantShape = validatePointShape(config.shape ?? "circle");
     const requiresMixedCollection =
       encodedShape !== undefined ||
+      angles !== undefined ||
       graphic.type === "collection" ||
       getPointGraphicType(constantShape) !== graphic.type;
     const jittered = applyPointJitter(this, {
@@ -251,6 +260,7 @@ export const rematerializePointMark = action(
       y: positions.y,
       area,
       shapes,
+      angles,
       config,
       graphic,
       existingChildren
@@ -273,6 +283,7 @@ export const rematerializePointMark = action(
         );
         const centerX = x?.[index] ?? existing.x;
         const centerY = y?.[index] ?? existing.y;
+        const angle = angles?.[index];
         if (
           resolvedArea === undefined ||
           !Number.isFinite(centerX) ||
@@ -283,7 +294,7 @@ export const rematerializePointMark = action(
             y: centerY,
             fill: color,
             opacity
-          });
+          }, angle);
         }
         return createPointShapeGraphic({
           shape,
@@ -295,7 +306,8 @@ export const rematerializePointMark = action(
           ...(config.strokeWidth === undefined
             ? {}
             : { strokeWidth: config.strokeWidth }),
-          opacity
+          opacity,
+          angle
         });
       });
       return jittered.program.editGraphics({

package/src/actions/marks/rect/actions.js

@@ -162,7 +162,11 @@ const editRectMark = action(
 );
 
 export function registerRectMarkActions(ProgramClass) {
-  ProgramClass.prototype.createRectMark = createRectMark;
   ProgramClass.prototype.editRectMark = editRectMark;
+  registerBasicRectMarkActions(ProgramClass);
+}
+
+export function registerBasicRectMarkActions(ProgramClass) {
+  ProgramClass.prototype.createRectMark = createRectMark;
   ProgramClass.prototype.rematerializeRectMark = rematerializeRectMark;
 }

package/src/actions/marks/rect/index.js

@@ -1 +1,4 @@
-export { registerRectMarkActions } from "./actions.js";
+export {
+  registerBasicRectMarkActions,
+  registerRectMarkActions
+} from "./actions.js";

package/src/actions/marks/tick/actions.js

@@ -0,0 +1,225 @@
+import { action } from "../../../core/action.js";
+import { validateUserId } from "../../../core/identifiers.js";
+import {
+  validateNonEmptyString,
+  validateNonNegativeFinite,
+  validatePositiveFinite,
+  validateUnitInterval
+} from "../../../core/validation.js";
+import {
+  centeredDirectionalSegment,
+  resolveDirectionValues
+} from "../../../grammar/direction.js";
+import { resolveMarkGraphicPlacement } from
+  "../../../materialization/graphicHierarchy.js";
+import { resolveRowEncodingValues } from
+  "../../../materialization/rowEncoding.js";
+import { findDataset } from "../../../selectors/datasets.js";
+import { findLayer } from "../../../selectors/layers.js";
+import { DEFAULT_COLORS } from "../../../theme/defaults.js";
+import { rematerializeHighlightBaseline } from "../lifecycle.js";
+import {
+  applyLayeredMarkInheritance,
+  assertMarkAvailable,
+  materializeInheritedMark,
+  resolveLayeredMarkInheritance,
+  resolveMarkData,
+  resolveMarkId,
+  validateMarkOptions
+} from "../shared.js";
+
+const CREATE_OPTIONS = Object.freeze([
+  "id", "data", "length", "stroke", "strokeWidth", "opacity"
+]);
+const EDIT_OPTIONS = Object.freeze([
+  "target", "length", "stroke", "strokeWidth", "opacity"
+]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
+
+export const DEFAULT_TICK_CONFIG = Object.freeze({
+  length: 14,
+  stroke: DEFAULT_COLORS.mark,
+  strokeWidth: 2,
+  opacity: 1
+});
+
+function resolveTick(program, requested, operation) {
+  const candidates = program.semanticSpec.layers.filter(
+    layer => layer.mark?.type === "tick"
+  );
+  if (requested !== undefined) {
+    const id = validateUserId(requested, "Tick mark id");
+    const layer = findLayer(program, id);
+    if (layer?.mark?.type !== "tick") {
+      throw new Error(`Unknown tick mark "${id}".`);
+    }
+    return layer;
+  }
+  const current = findLayer(program, program.context.currentMark);
+  if (current?.mark?.type === "tick") return current;
+  if (candidates.length === 1) return candidates[0];
+  if (candidates.length === 0) {
+    throw new Error(`${operation} requires an existing tick mark.`);
+  }
+  throw new Error(`${operation} target is ambiguous; provide target.`);
+}
+
+function validateTickConfig(args, current = DEFAULT_TICK_CONFIG) {
+  return {
+    length: Object.hasOwn(args, "length")
+      ? validatePositiveFinite(args.length, "Tick length")
+      : current.length,
+    stroke: Object.hasOwn(args, "stroke")
+      ? validateNonEmptyString(args.stroke, "Tick stroke")
+      : current.stroke,
+    strokeWidth: Object.hasOwn(args, "strokeWidth")
+      ? validateNonNegativeFinite(args.strokeWidth, "Tick strokeWidth")
+      : current.strokeWidth,
+    opacity: Object.hasOwn(args, "opacity")
+      ? validateUnitInterval(args.opacity, "Tick opacity")
+      : current.opacity
+  };
+}
+
+export const createTickMark = action(
+  {
+    op: "createTickMark",
+    description: "Create a centered fixed-length Tick mark."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, CREATE_OPTIONS, "createTickMark");
+    const id = resolveMarkId(this, args.id, {
+      defaultId: "tick",
+      label: "Tick mark id",
+      markType: "tick",
+      operation: "createTickMark"
+    });
+    const inherited = resolveLayeredMarkInheritance(this, args, "tick");
+    const { data } = resolveMarkData(this, {
+      ...args,
+      ...(args.data === undefined && this.context.currentData === undefined &&
+        inherited?.data !== undefined ? { data: inherited.data } : {})
+    });
+    const config = validateTickConfig(args);
+    assertMarkAvailable(this, id);
+
+    let created = this
+      .editSemantic({ property: `layer[${id}].mark.type`, value: "tick" })
+      .editSemantic({ property: `layer[${id}].data`, value: data });
+    created = applyLayeredMarkInheritance(created, id, inherited)
+      .createGraphics({
+        id,
+        type: "line",
+        length: 0,
+        ...resolveMarkGraphicPlacement(created, { data, markType: "tick" })
+      })
+      ._withMarkConfig(id, DEFAULT_TICK_CONFIG);
+    const materialized = materializeInheritedMark(created, id);
+    const appearance = Object.fromEntries(
+      ["length", "stroke", "strokeWidth", "opacity"]
+        .filter(property => Object.hasOwn(args, property))
+        .map(property => [property, config[property]])
+    );
+    return Object.keys(appearance).length === 0
+      ? materialized
+      : materialized.editTickMark({ target: id, ...appearance });
+  }
+);
+
+export const editTickMark = action(
+  {
+    op: "editTickMark",
+    description: "Edit Tick length and constant line appearance."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, EDIT_OPTIONS, "editTickMark");
+    const editable = ["length", "stroke", "strokeWidth", "opacity"];
+    if (!editable.some(property => Object.hasOwn(args, property))) {
+      throw new Error(
+        "editTickMark requires length, stroke, strokeWidth, or opacity."
+      );
+    }
+    const layer = resolveTick(this, args.target, "editTickMark");
+    const config = validateTickConfig(args, {
+      ...DEFAULT_TICK_CONFIG,
+      ...this.markConfigs[layer.id]
+    });
+    return this
+      ._withMarkConfig(layer.id, config)
+      .rematerializeTickMark({ id: layer.id });
+  }
+);
+
+export const rematerializeTickMark = action(
+  {
+    op: "rematerializeTickMark",
+    description: "Recompute concrete centered Tick endpoints and appearance."
+  },
+  function (args = {}) {
+    validateMarkOptions(
+      args,
+      REMATERIALIZE_OPTIONS,
+      "rematerializeTickMark"
+    );
+    const id = validateUserId(args.id, "Tick mark id");
+    const highlighted = rematerializeHighlightBaseline(this, {
+      target: id,
+      operation: "rematerializeTickMark",
+      resetProperty: "length",
+      resetValue: 0
+    });
+    if (highlighted !== undefined) return highlighted;
+    const layer = findLayer(this, id);
+    if (layer?.mark?.type !== "tick") {
+      throw new Error(`Unknown tick mark "${id}".`);
+    }
+    const graphic = this.graphicSpec.objects[id];
+    if (graphic?.type !== "line" || !Array.isArray(graphic.items)) {
+      throw new Error(`Tick mark "${id}" requires line collection graphics.`);
+    }
+    const dataset = findDataset(this, layer.data);
+    if (dataset === undefined) {
+      throw new Error(`Tick mark "${id}" requires an existing dataset.`);
+    }
+    if (
+      layer.encoding?.x?.scale === undefined ||
+      layer.encoding?.y?.scale === undefined
+    ) {
+      return graphic.items.length === 0
+        ? this
+        : this.editGraphics({ target: id, property: "length", value: 0 });
+    }
+
+    const x = resolveRowEncodingValues(this, layer, dataset, "x");
+    const y = resolveRowEncodingValues(this, layer, dataset, "y");
+    const angles = resolveDirectionValues(dataset.values, layer.encoding?.angle);
+    const config = validateTickConfig({}, {
+      ...DEFAULT_TICK_CONFIG,
+      ...this.markConfigs[id]
+    });
+    const segments = dataset.values.map((_, index) =>
+      centeredDirectionalSegment({
+        x: x[index],
+        y: y[index],
+        degrees: angles?.[index] ?? 0,
+        length: config.length
+      })
+    );
+
+    return this
+      .editGraphics({ target: id, property: "length", value: segments.length })
+      .editGraphics({ target: id, property: "x1", value: segments.map(item => item.x1) })
+      .editGraphics({ target: id, property: "y1", value: segments.map(item => item.y1) })
+      .editGraphics({ target: id, property: "x2", value: segments.map(item => item.x2) })
+      .editGraphics({ target: id, property: "y2", value: segments.map(item => item.y2) })
+      .editGraphics({ target: id, property: "stroke", value: config.stroke })
+      .editGraphics({ target: id, property: "strokeWidth", value: config.strokeWidth })
+      .editGraphics({ target: id, property: "opacity", value: config.opacity });
+  }
+);
+
+export function registerTickMarkActions(ProgramClass) {
+  ProgramClass.prototype.createTickMark = createTickMark;
+  ProgramClass.prototype.editTickMark = editTickMark;
+  ProgramClass.prototype.rematerializeTickMark = rematerializeTickMark;
+}

package/src/actions/marks/tick/index.js

@@ -0,0 +1 @@
+export { registerTickMarkActions } from "./actions.js";

package/src/actions/primitives/semanticValidation/layer.js

@@ -16,6 +16,7 @@ import {
   validateParallelMissingPolicy
 } from "../../../grammar/parallelCoordinates.js";
 import { validatePathOrderDirection } from "../../../grammar/pathOrder.js";
+import { normalizeCategoryOrder } from "../../../grammar/categoryOrder.js";
 import { validateSemanticFieldType } from "../../../grammar/scales/index.js";
 import { findLayer } from "../../../selectors/layers.js";
 import { validateNonEmptySemanticString } from "./shared.js";
@@ -50,6 +51,7 @@ export function validateLayerSemanticValue(program, parsed, value) {
   }
   if (property.endsWith(".fieldType")) validateSemanticFieldType(value);
   if (property === "encoding.pathOrder.order") validatePathOrderDirection(value);
+  if (property.endsWith(".categoryOrder")) normalizeCategoryOrder(value);
   if (property === "encoding.parallel.dimensions") {
     validateParallelDimensions(value, { normalized: true });
   }

package/src/actions/scales/consumers/index.js

@@ -6,6 +6,7 @@ import {
   requireConsumerDataset
 } from "./common.js";
 import { resolveMarkFamilyConsumerValues } from "./families.js";
+import { resolveCategoryOrder } from "../../../grammar/categoryOrder.js";
 
 export { findScale, findScaleConsumers } from "./common.js";
 export {
@@ -39,3 +40,10 @@ export function resolveConsumerValues(program, consumer) {
     ? family.values
     : readConsumerFieldValues(program, consumer, dataset, scale);
 }
+
+export function resolveConsumerCategoryOrder(program, consumer) {
+  const order = consumer.encoding.categoryOrder;
+  if (order === undefined) return undefined;
+  const dataset = requireConsumerDataset(program, consumer);
+  return resolveCategoryOrder(dataset.values, consumer.encoding.field, order);
+}

package/src/actions/scales/consumers/seriesLayout.js

@@ -10,7 +10,10 @@ import {
   findHistogramBinIndex,
   resolveHistogramBins
 } from "../../../grammar/histogram.js";
-import { deriveDensityAreaSeries } from "../../../grammar/areaSeries.js";
+import {
+  deriveCenteredAreaSeries,
+  deriveDensityAreaSeries
+} from "../../../grammar/areaSeries.js";
 import {
   resolveSeriesLayoutDomainValues
 } from "../../../grammar/seriesLayout.js";
@@ -122,6 +125,16 @@ function resolveAreaPartitions(program, consumer) {
     dataset.transform[0].type === "density"
     ? dataset.transform[0]
     : undefined;
+  if (
+    transform === undefined &&
+    layer.encoding?.y?.stack === "center" &&
+    layer.encoding?.x !== undefined
+  ) {
+    const derived = deriveCenteredAreaSeries(dataset.values, layer);
+    return Array.from({ length: derived.series[0].values.length }, (_, index) =>
+      derived.series.map(series => series.values[index].y)
+    );
+  }
   if (transform === undefined) return undefined;
   const derived = deriveDensityAreaSeries(dataset.values, layer, transform);
   if (derived.mode !== "y-density") return undefined;
@@ -153,10 +166,17 @@ export function resolveSeriesLayoutScaleValues(program, consumer) {
   }
   if (consumer.channel !== "y") return undefined;
   if (consumer.layer.mark?.type === "area") {
-    const layout = consumer.layer.encoding?.color?.layout;
+    const layout = consumer.layer.encoding?.y?.stack === "center"
+      ? "center"
+      : consumer.layer.encoding?.color?.layout;
     if (layout === undefined || layout === "overlay") return undefined;
     const partitions = resolveAreaPartitions(program, consumer);
     if (partitions === undefined) {
+      if (
+        layout === "center" &&
+        consumer.layer.encoding?.y?.stack === "center" &&
+        consumer.layer.encoding?.x === undefined
+      ) return undefined;
       throw new Error(
         `Area layout "${layout}" currently requires vertical density series.`
       );

package/src/actions/scales/index.js

@@ -4,8 +4,12 @@ import { rematerializeScale } from "./materialize.js";
 import { setQuantitativeColorScale } from "./quantitativeColor.js";
 
 export function registerScaleActions(ProgramClass) {
-  ProgramClass.prototype.createScale = createScale;
   ProgramClass.prototype.editScale = editScale;
+  registerBasicScaleActions(ProgramClass);
+}
+
+export function registerBasicScaleActions(ProgramClass) {
+  ProgramClass.prototype.createScale = createScale;
   ProgramClass.prototype.rematerializeScale = rematerializeScale;
   ProgramClass.prototype.setQuantitativeColorScale = setQuantitativeColorScale;
 }

package/src/actions/scales/materialize.js

@@ -19,6 +19,7 @@ import { resolveScaleMaterialization } from
 import {
   findScale,
   findScaleConsumers,
+  resolveConsumerCategoryOrder,
   resolveConsumerValues,
   resolveSeriesLayoutScaleValues
 } from "./consumers/index.js";
@@ -62,6 +63,7 @@ export const rematerializeScale = action(
     const valuesByConsumer = consumers.map(consumer => ({
       consumer,
       values: resolveConsumerValues(this, consumer),
+      categoryOrder: resolveConsumerCategoryOrder(this, consumer),
       seriesLayout: resolveSeriesLayoutScaleValues(this, consumer)
     }));
     const resolvedScale = resolveScaleMaterialization({

package/src/actions/selection/actions.js

@@ -340,8 +340,11 @@ export const applyRuleHighlight = action(
     validateKeys(args, INTERNAL_SELECTION_OPTIONS, "applyRuleHighlight");
     const resolved = resolveStoredSelection(this, args.selection);
     const keys = selectedKeys(args, resolved);
-    if (resolved.items[0]?.markType !== "rule" && resolved.items.length > 0) {
-      throw new Error("applyRuleHighlight requires a rule selection.");
+    if (
+      resolved.items.length > 0 &&
+      !["rule", "tick"].includes(resolved.items[0]?.markType)
+    ) {
+      throw new Error("applyRuleHighlight requires a rule or Tick selection.");
     }
     if (keys.length === 0) return this;
     const selected = new Set(keys);

package/src/basic.js

@@ -0,0 +1,2 @@
+export { chart } from "./BasicChartProgram.js";
+export { render } from "./renderers/canvas/index.js";

package/src/core/vocabulary.js

@@ -5,6 +5,7 @@ export const MARK_TYPES = Object.freeze([
   "area",
   "arc",
   "rule",
+  "tick",
   "text",
   "rect"
 ]);
@@ -16,6 +17,7 @@ export const MARK_GRAPHIC_TYPES = Object.freeze({
   area: Object.freeze(["path"]),
   arc: Object.freeze(["path"]),
   rule: Object.freeze(["line"]),
+  tick: Object.freeze(["line"]),
   text: Object.freeze(["text"]),
   rect: Object.freeze(["rect"])
 });
@@ -34,6 +36,7 @@ export const ENCODING_CHANNELS = Object.freeze([
   "strokeWidth",
   "size",
   "shape",
+  "angle",
   "group",
   "pathOrder",
   "opacity",
@@ -41,7 +44,7 @@ export const ENCODING_CHANNELS = Object.freeze([
 ]);
 
 const CARTESIAN_MARK_TYPES = Object.freeze([
-  "point", "line", "bar", "area", "rule", "text", "rect"
+  "point", "line", "bar", "area", "rule", "tick", "text", "rect"
 ]);
 const POLAR_MARK_TYPES = Object.freeze(["point", "line", "arc"]);
 
@@ -114,7 +117,7 @@ export const POSITION_CHANNEL_DEFINITIONS = Object.freeze({
 
 export const SCALED_ENCODING_CHANNELS = Object.freeze(
   ENCODING_CHANNELS.filter(channel =>
-    !["group", "pathOrder", "text"].includes(channel)
+    !["angle", "group", "pathOrder", "text"].includes(channel)
   )
 );
 
@@ -185,12 +188,13 @@ export function getMarkGraphicTypes(markType) {
 export const COLOR_LAYOUTS = Object.freeze([
   "stack",
   "fill",
+  "center",
   "group",
   "overlay",
   "diverging"
 ]);
 
-export const STACK_MODES = Object.freeze(["zero", "normalize"]);
+export const STACK_MODES = Object.freeze(["zero", "normalize", "center"]);
 
 export const CATEGORICAL_LEGEND_CHANNELS = Object.freeze([
   "color",

package/src/grammar/areaSeries.js

@@ -120,6 +120,110 @@ export function deriveAreaSeries(rows, layer) {
   });
 }
 
+export function deriveCenteredAreaSeries(rows, layer) {
+  if (layer?.mark?.type !== "area") {
+    throw new Error("Centered area series derivation requires an area mark.");
+  }
+  const { x, y, x2, y2, group, color } = layer.encoding ?? {};
+  if (
+    !["quantitative", "temporal"].includes(x?.fieldType) ||
+    y?.fieldType !== "quantitative" ||
+    y?.stack !== "center" ||
+    x2 !== undefined ||
+    y2 !== undefined
+  ) {
+    throw new Error(
+      `Centered area mark "${layer.id}" requires one x field and one quantitative y field without ranged endpoints.`
+    );
+  }
+  if (group?.fieldType !== "nominal") {
+    throw new Error(`Centered area mark "${layer.id}" requires a nominal group encoding.`);
+  }
+  if (color !== undefined && color.field !== group.field) {
+    throw new Error(
+      `Centered area color on mark "${layer.id}" must match its group field.`
+    );
+  }
+  const xValues = x.fieldType === "temporal"
+    ? readTemporalField(rows, x.field)
+    : readQuantitativeField(rows, x.field);
+  const yValues = readQuantitativeField(rows, y.field);
+  const groups = readNominalField(rows, group.field);
+  const groupOrder = [];
+  const positions = new Set();
+  const byGroup = new Map();
+  for (let index = 0; index < rows.length; index += 1) {
+    const key = groups[index];
+    if (!byGroup.has(key)) {
+      groupOrder.push(key);
+      byGroup.set(key, new Map());
+    }
+    const values = byGroup.get(key);
+    if (values.has(xValues[index])) {
+      throw new Error(
+        `Centered area mark "${layer.id}" has duplicate ${group.field}/${x.field} rows.`
+      );
+    }
+    values.set(xValues[index], yValues[index]);
+    positions.add(xValues[index]);
+  }
+  const orderedPositions = [...positions].sort((left, right) => left - right);
+  if (groupOrder.length === 0 || orderedPositions.length < 2) {
+    throw new Error(
+      `Centered area mark "${layer.id}" requires at least two aligned positions.`
+    );
+  }
+  for (const [key, values] of byGroup) {
+    if (
+      values.size !== orderedPositions.length ||
+      orderedPositions.some(position => !values.has(position))
+    ) {
+      throw new Error(
+        `Centered area series "${String(key)}" requires one aligned value at every x position.`
+      );
+    }
+  }
+
+  const valuesBySeries = groupOrder.map(() => []);
+  for (const position of orderedPositions) {
+    const partition = groupOrder.map(key => byGroup.get(key).get(position));
+    const segments = new Map(
+      layoutSeriesPartition(partition, "center").map(segment => [
+        segment.index,
+        segment
+      ])
+    );
+    let endpoint = -partition.reduce((sum, value) => sum + value, 0) / 2;
+    for (let index = 0; index < groupOrder.length; index += 1) {
+      const segment = segments.get(index);
+      valuesBySeries[index].push({
+        x: position,
+        y: partition[index],
+        lower: segment?.start ?? endpoint,
+        upper: segment?.end ?? endpoint
+      });
+      if (segment !== undefined) endpoint = segment.end;
+    }
+  }
+  const series = groupOrder.map((key, index) => ({
+    key: {
+      [group.field]: key,
+      ...(color === undefined ? {} : { [color.field]: key })
+    },
+    values: valuesBySeries[index]
+  }));
+  return cloneAndFreeze({
+    mode: "y-center",
+    orientation: "vertical",
+    xValues: orderedPositions,
+    yValues: series.flatMap(item => item.values.flatMap(value => [
+      value.lower,
+      value.upper
+    ])),
+    series
+  });
+}
+
 export function deriveDensityAreaSeries(rows, layer, transform) {
   if (layer?.mark?.type !== "area") {
     throw new Error("Density area derivation requires a semantic area mark.");
@@ -233,13 +337,19 @@ export function layoutDensityAreaSeries(derived, layout = "overlay") {
         segment
       ])
     );
+    let zeroThicknessEndpoint = layout === "center"
+      ? -densities.reduce((sum, value) => sum + value, 0) / 2
+      : 0;
     for (let index = 0; index < derived.series.length; index += 1) {
       const segment = segments.get(index);
       valuesBySeries[index].push({
         x,
-        lower: segment?.start ?? 0,
-        upper: segment?.end ?? 0
+        lower: segment?.start ?? zeroThicknessEndpoint,
+        upper: segment?.end ?? zeroThicknessEndpoint
       });
+      if (segment !== undefined && ["stack", "fill", "center"].includes(layout)) {
+        zeroThicknessEndpoint = segment.end;
+      }
     }
   }