ggaction 0.0.11 → 0.0.13

package/src/actions/data/regression.js

@@ -9,7 +9,7 @@ import { derivedMaterializer } from "./shared.js";
 
 const OPTIONS = Object.freeze([
   "id", "source", "x", "y", "groupBy", "method", "degree", "span",
-  "confidence", "interval"
+  "confidenceMethod", "level", "confidence", "interval"
 ]);
 
 export const materializeRegressionData = derivedMaterializer(
@@ -23,6 +23,8 @@ export const materializeRegressionData = derivedMaterializer(
       method: transform.method,
       degree: transform.degree,
       span: transform.span,
+      confidenceMethod: transform.confidenceMethod,
+      level: transform.level,
       confidence: transform.confidence,
       interval: transform.interval
     })
@@ -50,7 +52,8 @@ export const createRegressionData = action(
       ...(parameters.method === "loess"
         ? { span: parameters.span }
         : {
-            confidence: parameters.confidence,
+            confidenceMethod: parameters.confidenceMethod,
+            level: parameters.level,
             interval: parameters.interval
           })
     };

package/src/actions/data/stack.js

@@ -0,0 +1,26 @@
+import {
+  deriveStackRows,
+  normalizeStackTransform
+} from "../../grammar/stack.js";
+import { derivedCreator, derivedMaterializer } from "./shared.js";
+
+const OPTIONS = Object.freeze([
+  "id", "source", "category", "group", "value", "mode", "as"
+]);
+
+export const materializeStackData = derivedMaterializer(
+  "materializeStackData",
+  "Materialize one immutable category/series stack dataset.",
+  "stack",
+  deriveStackRows
+);
+
+export const createStackData = derivedCreator(
+  "createStackData",
+  "Create reusable start, end, value, and share stack rows.",
+  OPTIONS,
+  "Stack dataset id",
+  "Stack source dataset id",
+  normalizeStackTransform,
+  "materializeStackData"
+);

package/src/actions/data/summary.js

@@ -0,0 +1,26 @@
+import {
+  deriveSummaryRows,
+  normalizeSummaryTransform
+} from "../../grammar/summary.js";
+import { derivedCreator, derivedMaterializer } from "./shared.js";
+
+const OPTIONS = Object.freeze([
+  "id", "source", "groupBy", "aggregates", "members"
+]);
+
+export const materializeSummaryData = derivedMaterializer(
+  "materializeSummaryData",
+  "Materialize one immutable grouped summary dataset.",
+  "summary",
+  deriveSummaryRows
+);
+
+export const createSummaryData = derivedCreator(
+  "createSummaryData",
+  "Create reusable grouped aggregate values and provenance.",
+  OPTIONS,
+  "Summary dataset id",
+  "Summary source dataset id",
+  normalizeSummaryTransform,
+  "materializeSummaryData"
+);

package/src/actions/data/timeUnit.js

@@ -4,7 +4,7 @@ import {
 } from "../../grammar/timeUnit.js";
 import { derivedCreator, derivedMaterializer } from "./shared.js";
 
-const OPTIONS = Object.freeze(["id", "source", "field", "unit", "as"]);
+const OPTIONS = Object.freeze(["id", "source", "field", "unit", "as", "temporalUnit"]);
 
 export const materializeTimeUnitData = derivedMaterializer(
   "materializeTimeUnitData",

package/src/actions/encodings/appearance.js

@@ -1,4 +1,6 @@
 import { action } from "../../core/action.js";
+import { validatePathSeriesAppearance } from "../../grammar/pathSeries.js";
+import { assertEncodingSelectionCompatibility } from "../../materialization/selection/compatibility.js";
 import {
   readNominalField,
   readQuantitativeField,
@@ -15,6 +17,7 @@ import {
 } from "../../selectors/layers.js";
 import {
   applyEncodingScale,
+  applyDetachedScaleRematerialization,
   clearMarkGraphic,
   rematerializeEncoding,
   resolveReassignmentScaleOptions,
@@ -73,7 +76,7 @@ function encodeAppearanceField(program, channel, args, operation) {
   next = applyEncodingScale(next, scale, requestedScale, {
     reassignment: previous?.scale === scale.id
   });
-  return rematerializeEncoding(next, target, channel, scale.id);
+  return rematerializeEncoding(next, target, channel, scale.id, layer);
 }
 
 const encodeRadius = action(
@@ -119,7 +122,7 @@ const encodePointRadius = action(
   }
 );
 
-const removePointRadius = action(
+const removePointRadius = /* @__PURE__ */ action(
   {
     op: "removePointRadius",
     description: "Remove a constant point radius and restore the theme default."
@@ -163,7 +166,7 @@ const encodeShape = action(
   }
 );
 
-const clearOpacityEncoding = action(
+const clearOpacityEncoding = /* @__PURE__ */ action(
   {
     op: "clearOpacityEncoding",
     description: "Remove the semantic field-driven opacity assignment."
@@ -178,7 +181,7 @@ const clearOpacityEncoding = action(
   }
 );
 
-const encodeOpacity = action(
+const encodeOpacity = /* @__PURE__ */ action(
   {
     op: "encodeOpacity",
     description: "Assign constant or field-driven mark opacity."
@@ -190,26 +193,34 @@ const encodeOpacity = action(
     if (hasValue === hasField) {
       throw new Error("encodeOpacity requires exactly one of value or field.");
     }
+    if (hasValue && (args.fieldType !== undefined || args.scale !== undefined)) {
+      throw new Error("Constant opacity does not accept fieldType or scale.");
+    }
     const { id: target, dataset, layer } = resolveTarget(
       this,
       args.target,
-      ["point", "rule"],
-      "point or rule mark"
+      ["point", "rule", "line"],
+      "point, rule or line mark"
     );
     if (hasValue) {
       validateOpacityValue(args.value, "encodeOpacity");
+      assertEncodingSelectionCompatibility(this, target, ["opacity"]);
       const { opacity, ...config } = this.markConfigs[target] ?? {};
       void opacity;
-      const withoutLegend = this.guideConfigs.legend?.opacity === undefined
-        ? this
-        : this.removeOpacityLegend();
+      const withoutLegend = this.guideConfigs.legend?.opacity?.target === target
+        ? this.removeOpacityLegend()
+        : this;
       const next = withoutLegend
         .clearOpacityEncoding({ target })
         ._withoutMaterializationConfig(["marks", target, "opacity"])
         ._withMarkConfig(target, { ...config, opacity: args.value });
-      return layer.mark.type === "rule"
+      if (layer.mark.type === "line") {
+        return rematerializeEncoding(next, target, "opacity", undefined, layer);
+      }
+      const materialized = layer.mark.type === "rule"
         ? next.rematerializeRuleMark({ id: target })
         : next.rematerializePointMark({ id: target });
+      return applyDetachedScaleRematerialization(materialized, [layer]);
     }
     const fieldType = args.fieldType ?? "quantitative";
     if (fieldType !== "quantitative") {
@@ -221,6 +232,14 @@ const encodeOpacity = action(
       args.scale ?? {}
     );
     const scale = resolveOpacityScaleDefinition(this, requestedScale);
+    if (layer.mark.type === "line") {
+      if (Object.hasOwn(scale, "unknown")) {
+        throw new Error("Line opacity does not support unknown fallback.");
+      }
+      validatePathSeriesAppearance(dataset.values, {
+        ...layer, encoding: { ...layer.encoding, opacity: { field: args.field, fieldType } }
+      });
+    }
     if (Object.hasOwn(scale, "unknown")) {
       readScaleField(dataset.values, args.field, fieldType, {
         allowUnknown: true
@@ -239,19 +258,19 @@ const encodeOpacity = action(
     next = applyEncodingScale(next, scale, requestedScale, {
       reassignment: previous?.scale === scale.id
     });
-    return rematerializeEncoding(next, target, "opacity", scale.id);
+    return rematerializeEncoding(next, target, "opacity", scale.id, layer);
   }
 );
 
 export function registerBasicAppearanceEncodingActions(ProgramClass) {
   ProgramClass.prototype.encodeSize = encodeSize;
   ProgramClass.prototype.encodeShape = encodeShape;
+  ProgramClass.prototype.encodeRadius = encodeRadius;
+  ProgramClass.prototype.encodePointRadius = encodePointRadius;
 }
 
 export function registerAppearanceEncodingAction(ProgramClass) {
   registerBasicAppearanceEncodingActions(ProgramClass);
-  ProgramClass.prototype.encodeRadius = encodeRadius;
-  ProgramClass.prototype.encodePointRadius = encodePointRadius;
   ProgramClass.prototype.removePointRadius = removePointRadius;
   ProgramClass.prototype.encodeOpacity = encodeOpacity;
   ProgramClass.prototype.clearOpacityEncoding = clearOpacityEncoding;

package/src/actions/encodings/barWidth.js

@@ -31,6 +31,14 @@ const encodeBarWidth = action(
     const grouped = layout === "group";
     const offsetChannel = resolveBarOffsetChannel(layer);
     const grain = resolveBarGrain(layer);
+    if (grain === undefined && this.markConfigs[target]?.boxPlot === undefined && (
+      layer.encoding?.x === undefined || layer.encoding?.y === undefined
+    )) {
+      return this._withMarkConfig(target, { ...this.markConfigs[target], barWidth: width });
+    }
+    if (grain === BAR_GRAINS.histogram) {
+      throw new Error("encodeBarWidth requires an aggregate or ranged category slot, not histogram bins.");
+    }
     if (grain === BAR_GRAINS.ranged) {
       return this._withMarkConfig(target, { ...this.markConfigs[target], barWidth: width })
         .rematerializeBarMark({ id: target });

package/src/actions/encodings/basic.js

@@ -1,3 +1,4 @@
+import { registerSeriesLayoutAction } from "./seriesLayout.js";
 import { registerBasicAppearanceEncodingActions } from "./appearance.js";
 import { registerBarWidthEncodingAction } from "./barWidth.js";
 import { registerColorEncodingAction } from "./color/index.js";
@@ -10,6 +11,7 @@ import { registerBasicRangedEncodingActions } from "./ranged.js";
 import { registerStrokeDashEncodingActions } from "./strokeDash.js";
 
 export function registerBasicEncodingActions(ProgramClass) {
+  registerSeriesLayoutAction(ProgramClass);
   registerCartesianPositionEncodingActions(ProgramClass);
   registerBasicRangedEncodingActions(ProgramClass);
   registerColorEncodingAction(ProgramClass);

package/src/actions/encodings/color/continuous.js

@@ -1,18 +1,11 @@
 import {
   readQuantitativeField,
   readScaleField,
-  readTemporalField
+  readTemporalField,
+  resolveTemporalUnit
 } from "../../../grammar/scales/index.js";
-import {
-  BAR_GRAINS,
-  resolveBarChannels,
-  resolveBarGrain
-} from "../../../grammar/bars/policy.js";
-import {
-  validateAggregate,
-  validateAggregateFieldType,
-  validateAggregateFieldValues
-} from "../../../grammar/aggregate.js";
+import { validateContinuousColorConsumer } from "../../../grammar/scales/colorConsumers.js";
+import { validateAggregateFieldValues } from "../../../grammar/aggregate.js";
 import {
   resolveQuantitativeColorScaleDefinition
 } from "../../scales/definitions.js";
@@ -20,7 +13,10 @@ import {
   resolveReassignmentScaleOptions,
   resolveTarget
 } from "../shared.js";
-import { applyMaterializationPlan } from "../../../materialization/dependencies.js";
+import {
+  applyDetachedScaleRematerialization,
+  applyMaterializationPlan
+} from "../../../materialization/dependencies.js";
 import {
   planEncodingRematerialization
 } from "../../../materialization/encodings.js";
@@ -29,6 +25,8 @@ import {
   resolveColorScaleOptions
 } from "./policy.js";
 
+import { applyTemporalUnit } from "../temporal.js";
+
 export function encodeContinuousColor(program, args) {
   if (!["quantitative", "temporal"].includes(args.fieldType)) {
     throw new Error(`Unsupported color field type "${args.fieldType}".`);
@@ -43,6 +41,7 @@ export function encodeContinuousColor(program, args) {
     "continuous color mark"
   );
   assertNoConstantColor(program, layer);
+  const temporalUnit = resolveTemporalUnit(args, args.fieldType, layer.encoding?.color);
   const requestedScale = resolveReassignmentScaleOptions(
     layer.encoding?.color,
     resolveColorScaleOptions(args)
@@ -52,61 +51,22 @@ export function encodeContinuousColor(program, args) {
     args.fieldType,
     requestedScale
   );
-  if (Object.hasOwn(scale, "unknown") && layer.mark.type !== "point") {
-    throw new Error(
-      "Continuous color scale unknown currently requires a row-owned point mark."
-    );
-  }
-  if (
-    layer.mark.type === "bar" &&
-    ["nominal", "ordinal"].includes(layer.encoding?.color?.fieldType)
-  ) {
-    throw new Error(
-      "Continuous bar color cannot replace an existing nominal color layout."
-    );
-  }
-  let aggregate;
-  if (["point", "rect"].includes(layer.mark.type)) {
-    if (args.aggregate !== undefined) {
-      throw new Error(`${layer.mark.type} continuous color does not support aggregate.`);
-    }
-  } else {
-    if (args.fieldType !== "quantitative") {
-      throw new Error("Aggregate bar color currently requires a quantitative field.");
-    }
-    if (resolveBarGrain(layer) !== BAR_GRAINS.aggregate) {
-      throw new Error(
-        "Continuous bar color requires a complete categorical aggregate bar."
-      );
-    }
-    const channels = resolveBarChannels(layer);
-    const measure = layer.encoding?.[channels.measure];
-    aggregate = args.aggregate ?? (
-      measure?.field === args.field ? measure.aggregate : undefined
-    );
-    if (aggregate === undefined) {
-      throw new Error(
-        "Continuous bar color requires aggregate when its field differs from the measure field."
-      );
-    }
-    aggregate = validateAggregate(aggregate);
-    validateAggregateFieldType(aggregate, args.fieldType);
-    validateAggregateFieldValues(dataset.values, args.field, args.fieldType);
-  }
+  const aggregate = validateContinuousColorConsumer(layer, args, scale, { inferAggregate: true });
+  if (aggregate !== undefined) validateAggregateFieldValues(dataset.values, args.field, args.fieldType);
   if (layer.mark.type === "rect") {
     readScaleField(dataset.values, args.field, args.fieldType, {
-      allowUnknown: true
+      allowUnknown: true, temporalUnit
     });
   } else if (Object.hasOwn(scale, "unknown")) {
     readScaleField(dataset.values, args.field, args.fieldType, {
-      allowUnknown: true
+      allowUnknown: true, temporalUnit
     });
   } else if (args.fieldType === "temporal") {
-    readTemporalField(dataset.values, args.field);
+    readTemporalField(dataset.values, args.field, temporalUnit);
   } else {
     readQuantitativeField(dataset.values, args.field);
   }
-  const next = program
+  const next = applyTemporalUnit(program, target, "color", temporalUnit, layer.encoding?.color)
     .editSemantic({
       property: `layer[${target}].encoding.color.field`,
       value: args.field
@@ -126,12 +86,12 @@ export function encodeContinuousColor(program, args) {
         value: aggregate
       });
   const scaled = encoded.setQuantitativeColorScale(scale);
-  return applyMaterializationPlan(
+  return applyDetachedScaleRematerialization(applyMaterializationPlan(
     scaled,
     planEncodingRematerialization(scaled, {
       target,
       channel: "color",
       scale: scale.id
     })
-  );
+  ), [layer]);
 }

package/src/actions/encodings/color/index.js

@@ -1,7 +1,9 @@
+import { inferSeriesGroup } from "../shared.js";
 import { action } from "../../../core/action.js";
 import {
   readNominalField,
   readScaleField,
+  resolveTemporalUnit,
   validateCategoricalFieldType
 } from "../../../grammar/scales/index.js";
 import {
@@ -12,19 +14,21 @@ import {
   applyEncodingScale,
   resolveReassignmentScaleOptions,
   resolveTarget,
-  validateLineSeriesCompatibility,
   validateOptions
 } from "../shared.js";
-import { applyMaterializationPlan } from "../../../materialization/dependencies.js";
+import {
+  applyDetachedScaleRematerialization,
+  applyMaterializationPlan
+} from "../../../materialization/dependencies.js";
 import {
   planEncodingRematerialization
 } from "../../../materialization/encodings.js";
 import { findUpstreamTransform } from
   "../../../materialization/dataProvenance.js";
+import { validatePathSeriesAppearance } from "../../../grammar/pathSeries.js";
 import { encodeContinuousColor } from "./continuous.js";
 import {
-  applyColorLayoutCompanion,
-  preSynchronizeGroupedOffset
+  applyColorLayoutCompanion
 } from "./layout.js";
 import {
   assertNoConstantColor,
@@ -33,6 +37,8 @@ import {
   resolveColorScaleOptions
 } from "./policy.js";
 
+import { applyTemporalUnit } from "../temporal.js";
+
 const encodeColor = action(
   {
     op: "encodeColor",
@@ -51,6 +57,7 @@ const encodeColor = action(
       throw new Error("Categorical color does not support aggregate.");
     }
     const fieldType = validateCategoricalFieldType(requestedFieldType);
+    resolveTemporalUnit(args, fieldType);
     const { id: target, dataset, layer } = resolveTarget(
       this,
       args.target,
@@ -78,10 +85,13 @@ const encodeColor = action(
     }
     const layout = resolveColorLayout(layer, args.layout, barGrain);
     const createsCenterGroup = layer.mark.type === "area" &&
-      layout === "center" && layer.encoding?.group?.field === undefined;
+      layout === "center" && layer.encoding?.group === undefined;
+    const ordinaryGroup = layer.mark.type === "area" && !createsCenterGroup &&
+      densityTransform === undefined && horizonTransform === undefined;
     if (
       layer.mark.type === "area" &&
       !createsCenterGroup &&
+      !ordinaryGroup &&
       (layer.encoding?.group?.field === undefined ||
         layer.encoding.group.field !== args.field) &&
       !densitySeriesFields.includes(args.field) &&
@@ -91,7 +101,11 @@ const encodeColor = action(
         "Area color encoding must match an existing group encoding."
       );
     }
-    validateLineSeriesCompatibility(layer, "color", args.field);
+    if (layer.mark.type === "line" || ordinaryGroup) {
+      validatePathSeriesAppearance(dataset.values, {
+        ...layer, encoding: { ...layer.encoding, color: { field: args.field, fieldType } }
+      });
+    }
     const requestedScale = resolveReassignmentScaleOptions(
       layer.encoding?.color,
       resolveColorScaleOptions(args)
@@ -114,10 +128,10 @@ const encodeColor = action(
       readNominalField(dataset.values, args.field);
     }
 
-    let next = createsCenterGroup
-      ? this.encodeGroup({ target, field: args.field })
+    let next = layer.mark.type === "bar" || createsCenterGroup
+      ? inferSeriesGroup(this, layer, args.field, "color")
       : this;
-    next = next.editSemantic({
+    next = applyTemporalUnit(next, target, "color", undefined, layer.encoding?.color).editSemantic({
       property: `layer[${target}].encoding.color.field`,
       value: args.field
     })
@@ -129,21 +143,12 @@ const encodeColor = action(
         property: `layer[${target}].encoding.color.scale`,
         value: scale.id
       });
-    if (layout !== undefined) {
+    if (layout !== undefined && (layer.mark.type === "arc" || horizonTransform !== undefined)) {
       next = next.editSemantic({
         property: `layer[${target}].encoding.color.layout`,
         value: layout
       });
     }
-    next = preSynchronizeGroupedOffset(next, {
-      target,
-      layer,
-      layout,
-      field: args.field,
-      fieldType,
-      scale,
-      requestedScale
-    });
     next = applyEncodingScale(next, scale, requestedScale, {
       reassignment: layer.encoding?.color?.scale === scale.id
     });
@@ -152,17 +157,18 @@ const encodeColor = action(
       layer,
       layout,
       scale,
-      field: args.field
+      field: args.field,
+      horizon: horizonTransform !== undefined
     });
 
-    return applyMaterializationPlan(
+    return applyDetachedScaleRematerialization(applyMaterializationPlan(
       next,
       planEncodingRematerialization(next, {
         target,
         channel: "color",
         scale: scale.id
       })
-    );
+    ), [layer]);
   }
 );
 

package/src/actions/encodings/color/layout.js

@@ -1,101 +1,7 @@
-import {
-  BAR_GRAINS,
-  resolveBarChannels,
-  resolveBarGrain,
-  resolveBarOffsetChannel
-} from "../../../grammar/bars/policy.js";
-import { resolveOffsetScaleDefinition } from "../../scales/definitions.js";
-import { isRangedArea } from "./policy.js";
-
 export function applyColorLayoutCompanion(
   program,
-  { target, layer, layout, scale, field }
+  { target, layer, layout, horizon }
 ) {
-  if (layout === undefined || layer.mark.type === "arc") return program;
-  if (
-    layer.mark.type === "bar" &&
-    resolveBarGrain(layer) === BAR_GRAINS.ranged
-  ) {
-    return program;
-  }
-  if (
-    layer.mark.type === "area" &&
-    [layer.encoding?.x, layer.encoding?.y].some(
-      encoding => ["nominal", "ordinal"].includes(encoding?.fieldType)
-    )
-  ) {
-    return program;
-  }
-  if (isRangedArea(layer)) return program;
-  const channels = layer.mark.type === "bar"
-    ? resolveBarChannels(layer)
-    : undefined;
-  const measureChannel = channels?.measure ?? "y";
-  const measure = layer.encoding?.[measureChannel];
-  if (measure?.field === undefined || measure.scale === undefined) {
-    throw new Error(`Color layout on mark "${target}" requires a measure encoding.`);
-  }
-  const stack = layout === "fill"
-    ? "normalize"
-    : layout === "center"
-      ? "center"
-    : layout === "overlay" || layout === "group"
-      ? null
-      : "zero";
-  let next = program;
-  if (layout === "group") {
-    const offsetChannel = resolveBarOffsetChannel(layer);
-    const method = offsetChannel === "xOffset" ? "encodeXOffset" : "encodeYOffset";
-    next = next[method]({
-      field,
-      target,
-      scale: {
-        ...(layer.encoding?.[offsetChannel]?.scale === undefined
-          ? {}
-          : { id: layer.encoding[offsetChannel].scale }),
-        domain: scale.domain
-      }
-    });
-  }
-  return next[measureChannel === "x" ? "encodeX" : "encodeY"]({
-    target,
-    field: measure.field,
-    fieldType: measure.fieldType,
-    ...(measure.aggregate === undefined ? {} : { aggregate: measure.aggregate }),
-    stack
-  });
-}
-
-export function preSynchronizeGroupedOffset(
-  program,
-  { target, layer, layout, field, fieldType, scale, requestedScale }
-) {
-  if (
-    layer.mark.type !== "bar" ||
-    layout !== "group" ||
-    layer.encoding?.color?.scale !== scale.id ||
-    !Object.keys(requestedScale).some(key => key !== "id")
-  ) {
-    return program;
-  }
-  const offsetChannel = resolveBarOffsetChannel(layer);
-  const offset = layer.encoding?.[offsetChannel];
-  if (offset?.scale === undefined) return program;
-  const offsetScale = resolveOffsetScaleDefinition(program, {
-    id: offset.scale,
-    domain: scale.domain
-  }, offsetChannel);
-  return program
-    .editSemantic({
-      property: `layer[${target}].encoding.${offsetChannel}.field`,
-      value: field
-    })
-    .editSemantic({
-      property: `layer[${target}].encoding.${offsetChannel}.fieldType`,
-      value: fieldType
-    })
-    .editSemantic({
-      property: `scale[${offsetScale.id}].domain`,
-      value: offsetScale.domain
-    });
+  if (layout === undefined || layer.mark.type === "arc" || horizon) return program;
+  return program.layoutSeries({ target, mode: layout });
 }

package/src/actions/encodings/color/policy.js

@@ -5,7 +5,7 @@ import {
 import { validateColorLayout } from "../../../grammar/seriesLayout.js";
 
 export const COLOR_ENCODING_OPTIONS = Object.freeze([
-  "field", "target", "fieldType", "scale", "palette", "layout", "aggregate"
+  "field", "target", "fieldType", "scale", "palette", "layout", "aggregate", "temporalUnit"
 ]);
 
 export function resolveColorScaleOptions(args) {
@@ -24,6 +24,7 @@ export function assertNoConstantColor(program, layer) {
   const hasConstant = {
     point: config?.fill !== undefined,
     line: config?.stroke !== undefined,
+    area: config?.errorBand?.fill !== undefined,
     bar: config?.barAppearance?.fill !== undefined,
     arc: config?.fill !== undefined,
     rect: config?.fillExplicit === true
@@ -53,12 +54,7 @@ export function resolveColorLayout(layer, requested, barGrain) {
             : undefined
       );
   if (requested !== undefined) validateColorLayout(requested);
-  if (existing !== undefined && requested !== undefined && requested !== existing) {
-    throw new Error(
-      `Color layout transition from "${existing}" to "${requested}" is not supported.`
-    );
-  }
-  const layout = requested ?? existing ?? (
+  const layout = requested ?? layer.layout?.mode ?? existing ?? (
     layer.mark.type === "bar"
       ? barGrain === BAR_GRAINS.histogram
         ? "stack"
@@ -84,7 +80,8 @@ export function resolveColorLayout(layer, requested, barGrain) {
   ) {
     throw new Error('Arc color layout currently supports only "overlay".');
   }
-  if (isRangedArea(layer) && layout !== "overlay") {
+  if (isRangedArea(layer) && layer.encoding?.x2?.datum === undefined && layer.encoding?.y2?.datum === undefined &&
+    layer.encoding?.x?.datum === undefined && layer.encoding?.y?.datum === undefined && layout !== "overlay") {
     throw new Error('Ranged area color encoding supports only "overlay" layout.');
   }
   return layout;