ggaction 0.0.21 → 0.0.23

package/src/actions/guides/tickValues.js

@@ -5,9 +5,10 @@ import {
   readQuantitativeField,
   transformedTicks
 } from "../../grammar/scales/index.js";
-import { niceTicks, timeTicks } from "../../grammar/ticks.js";
+import { niceTicks, timeTicks, validateTickSelectionRounding, axisTickSelection } from "../../grammar/ticks.js";
 import { findDataset } from "../../selectors/datasets.js";
 import { findSemanticScale } from "../../selectors/scales.js";
+import { applyItemMissingPolicy } from "../../grammar/itemMissing.js";
 
 export const DEFAULT_TICK_COUNT = 5;
 
@@ -28,7 +29,7 @@ export function inferHistogramBoundaries(program, channel, scaleId) {
       throw new Error(`Guide values require histogram data and scale "${scaleId}".`);
     }
     return resolveHistogramBins({
-      values: readQuantitativeField(dataset.values, encoding.field),
+      values: readQuantitativeField(applyItemMissingPolicy(layer, dataset).values, encoding.field),
       bin: encoding.bin,
       domain: scale.domain,
       nice: scale.nice ?? true,
@@ -44,11 +45,11 @@ export function inferHistogramBoundaries(program, channel, scaleId) {
 }
 
 export function valuesFromTickConfig(program, config) {
-  if (config.mode === "values") return config.values;
-
   const scale = program.resolvedScales[config.scale];
+  validateTickSelectionRounding(config, scale?.type);
+  if (config.mode === "values") return config.values;
   if (scale?.type === "time") return timeTicks(scale.domain, config.count);
-  if (scale?.type === "linear") return niceTicks(scale.domain, config.count);
+  if (scale?.type === "linear") return niceTicks(scale.domain, config.count, config.rounding);
   if (isTransformedScaleType(scale?.type)) {
     return transformedTicks(scale.type, scale.domain, config.count, {
       ...(scale.base === undefined ? {} : { base: scale.base }),
@@ -64,8 +65,7 @@ export function valuesFromTickConfig(program, config) {
 export function inferGridTickConfig(program, channel, scaleId) {
   const axes = cartesianAxisOwners(program).filter(owner => owner.channel === channel &&
     owner.config?.ticks?.scale === scaleId).map(owner => owner.config.ticks);
-  const policies = axes.map(axis => axis.mode === "values"
-    ? { mode: "values", values: axis.values } : { mode: "count", count: axis.count });
+  const policies = axes.map(axisTickSelection);
   if (new Set(policies.map(policy => JSON.stringify(policy))).size > 1) {
     throw new Error("Grid values require explicit count or values when bound axis tick policies differ.");
   }

package/src/actions/marks/arc/actions.js

@@ -8,10 +8,7 @@ import {
 } from "../../../core/validation.js";
 import { deriveArcSectors } from "../../../grammar/arcs.js";
 import { buildAnnularSectorCommands } from "../../../grammar/polarPaths.js";
-import {
-  mapOrdinalValues,
-  readScaleField
-} from "../../../grammar/scales/index.js";
+import { readScaleField } from "../../../grammar/scales/index.js";
 import { resolveCoordinatePolarFrame } from
   "../../../materialization/coordinateBounds.js";
 import {
@@ -165,6 +162,7 @@ const rematerializeArcMark = /* @__PURE__ */ action(
     const highlighted = rematerializeHighlightBaseline(this, {
       target: id,
       operation: "rematerializeArcMark",
+      scales: args.scales,
       resetProperty: "length",
       resetValue: 0
     });
@@ -209,10 +207,10 @@ const rematerializeArcMark = /* @__PURE__ */ action(
     }));
     const fills = colorScaleId === undefined
       ? commands.map(() => config.fill ?? DEFAULT_COLORS.mark)
-      : mapOrdinalValues(
+      : mapScaleConsumerValues(
           derived.sectors.map(sector => sector.color),
-          resolved.resolvedScales[colorScaleId].domain,
-          resolved.resolvedScales[colorScaleId].range
+          resolved.resolvedScales[colorScaleId],
+          "color"
         );
     const strokeEncoding = layer.encoding?.stroke;
     const strokeValues = strokeEncoding === undefined ? undefined : derived.sectors.map(

package/src/actions/marks/area/actions.js

@@ -1,3 +1,4 @@
+import { requestedMarkClip, validateMarkClipCoordinate } from "../../../selectors/markClip.js";
 import { validateFillPaint } from "../../../grammar/paint.js";
 import { validateAreaPaintConfig } from "../../../grammar/areaPaint.js";
 import { validateAreaMissing } from "../../../grammar/areaEndpoints.js";
@@ -36,7 +37,7 @@ import {
 } from "../../../grammar/strokeStyle.js";
 
 const AREA_OPTIONS = Object.freeze([
-  "fill", "opacity", "stroke", "strokeWidth", "curve",
+  "clip", "fill", "opacity", "stroke", "strokeWidth", "curve",
   ...STROKE_STYLE_PROPERTIES
 ]);
 const CREATE_OPTIONS = Object.freeze(["id", "data", "missing", ...AREA_OPTIONS]);
@@ -66,6 +67,7 @@ const createAreaMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createAreaMark");
+    requestedMarkClip(args);
     const strokeDetails = requestedStrokeDetails(args, "createAreaMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "area",
@@ -101,6 +103,7 @@ const createAreaMark = /* @__PURE__ */ action(
         ...resolveMarkGraphicPlacement(created, { data, markType: "area" })
       })
       ._withMarkConfig(id, {
+        ...requestedMarkClip(args),
         fill,
         opacity,
         ...(Object.hasOwn(args, "curve") ? { curve } : {}),
@@ -154,6 +157,7 @@ const rematerializeAreaMark = /* @__PURE__ */ action(
     const highlighted = rematerializeHighlightBaseline(this, {
       target: id,
       operation: "rematerializeAreaMark",
+      scales: args.scales,
       resetProperty: "length",
       resetValue: 0
     });
@@ -240,9 +244,10 @@ const editAreaMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editAreaMark");
+    requestedMarkClip(args);
     const strokeDetails = requestedStrokeDetails(args, "editAreaMark");
     const changes = [
-      "fill", "opacity", "stroke", "strokeWidth", "curve", "missing",
+      "clip", "fill", "opacity", "stroke", "strokeWidth", "curve", "missing",
       ...STROKE_STYLE_PROPERTIES
     ];
     if (!changes.some(key => Object.hasOwn(args, key))) {
@@ -272,7 +277,8 @@ const editAreaMark = /* @__PURE__ */ action(
       throw new Error("editAreaMark cannot set strokeWidth while removing stroke.");
     }
 
-    let config = { ...this.markConfigs[layer.id] };
+    validateMarkClipCoordinate(this, layer, args.clip ?? this.markConfigs[layer.id]?.clip);
+    let config = { ...this.markConfigs[layer.id], ...requestedMarkClip(args) };
     Object.assign(config, strokeDetails);
     if (Object.hasOwn(args, "fill")) {
       config.fill = validateFillPaint(args.fill, "Area fill");

package/src/actions/marks/bar/create.js

@@ -1,3 +1,4 @@
+import { requestedMarkClip } from "../../../selectors/markClip.js";
 import { action } from "../../../core/action.js";
 import {
   assertMarkAvailable,
@@ -17,7 +18,7 @@ import { STROKE_STYLE_PROPERTIES } from
 import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "orientation", "missing", "fill", "opacity", "stroke", "strokeWidth",
+  "clip", "id", "data", "orientation", "missing", "fill", "opacity", "stroke", "strokeWidth",
   ...RECT_RADIUS_PROPERTIES, ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -28,6 +29,7 @@ export const createBarMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createBarMark");
+    requestedMarkClip(args);
     requestedRectStyleDetails(args, "createBarMark");
     if (args.orientation !== undefined && !["vertical", "horizontal"].includes(args.orientation)) {
       throw new Error("Bar orientation must be vertical or horizontal.");
@@ -76,7 +78,7 @@ export const createBarMark = /* @__PURE__ */ action(
     created = materializeInheritedMark(created, id);
     const appearance = Object.fromEntries(
       [
-        "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
+        "clip", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
         ...STROKE_STYLE_PROPERTIES
       ]
         .filter(property => Object.hasOwn(args, property))

package/src/actions/marks/bar/edit.js

@@ -1,3 +1,4 @@
+import { requestedMarkClip, validateMarkClipCoordinate } from "../../../selectors/markClip.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
@@ -18,7 +19,7 @@ import { validateFillPaint } from "../../../grammar/paint.js";
 import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const EDIT_OPTIONS = Object.freeze([
-  "target", "missing", "blend", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
+  "target", "clip", "missing", "blend", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
   ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -29,9 +30,10 @@ export const editBarMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editBarMark");
+    requestedMarkClip(args);
     const styleDetails = requestedRectStyleDetails(args, "editBarMark");
     const changes = [
-      "missing", "blend", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
+      "clip", "missing", "blend", "fill", "opacity", "stroke", "strokeWidth", ...RECT_RADIUS_PROPERTIES,
       ...STROKE_STYLE_PROPERTIES
     ];
     if (!changes.some(key => Object.hasOwn(args, key))) {
@@ -71,7 +73,8 @@ export const editBarMark = /* @__PURE__ */ action(
     }
     const missing = Object.hasOwn(args, "missing")
       ? validateItemMissing(args.missing, "Bar missing") : undefined;
-    const config = { ...this.markConfigs[layer.id] };
+    validateMarkClipCoordinate(this, layer, args.clip ?? this.markConfigs[layer.id]?.clip);
+    const config = { ...this.markConfigs[layer.id], ...requestedMarkClip(args) };
     const appearance = { ...config.barAppearance };
     Object.assign(appearance, styleDetails);
     if (Object.hasOwn(args, "fill")) {
@@ -115,11 +118,11 @@ export const editBarMark = /* @__PURE__ */ action(
         semantic = semantic.editSemantic({property: `layer[${layer.id}].mark.blend`, remove: true});
       }
     }
-    const editsAppearance = changes.some(key => key !== "missing" && key !== "blend" &&
+    const editsAppearance = changes.some(key => key !== "missing" && key !== "blend" && key !== "clip" &&
       Object.hasOwn(args, key));
-    const next = editsAppearance ? semantic._withMarkConfig(layer.id, {
+    const next = editsAppearance || Object.hasOwn(args, "clip") ? semantic._withMarkConfig(layer.id, {
       ...config,
-      barAppearance: appearance
+      ...(editsAppearance ? {barAppearance: appearance} : {})
     }) : semantic;
     const materialized = canMaterializeBar(next, layer)
       ? next.rematerializeBarMark({ id: layer.id })

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

@@ -1,3 +1,4 @@
+import { materializeMarkClip } from "../../../materialization/markClip.js";
 import { findLayer } from "../../../selectors/layers.js";
 import { editGraphicProperties } from "../../primitives/graphicProperties.js";
 import { action } from "../../../core/action.js";
@@ -29,12 +30,12 @@ function editRectangles(program, id, rectangles) {
     item.properties?.blend !== undefined);
   if (hasShapeStyle || blend !== undefined || previousBlend) {
     const radius = appearance;
-    return replaceGraphicItems(
+    return materializeMarkClip(replaceGraphicItems(
       program,
       id,
       "rect",
       rectangles.map(rectangle => materializeRectItem(rectangle, radius))
-    );
+    ), id);
   }
   let next = editGraphicProperties(program, id, {
     length: rectangles.length,
@@ -53,7 +54,7 @@ function editRectangles(program, id, rectangles) {
       value: rectangles.map(rect => rect.opacity ?? 1)
     });
   }
-  return next;
+  return materializeMarkClip(next, id);
 }
 
 export const rematerializeBarMark = /* @__PURE__ */ action(
@@ -74,6 +75,7 @@ export const rematerializeBarMark = /* @__PURE__ */ action(
     const highlighted = rematerializeHighlightBaseline(this, {
       target: id,
       operation: "rematerializeBarMark",
+      scales: args.scales,
       resetProperty: "items",
       resetValue: []
     });

package/src/actions/marks/dependentReferences.js

@@ -0,0 +1,87 @@
+import { findLayer } from "../../selectors/layers.js";
+import { ownedChildren } from "../../selectors/markOwners.js";
+import { findGraphicParent } from "../../grammar/schemas/graphicTree.js";
+import { applyLayerDataRematerialization } from "../../materialization/dependencies.js";
+
+export function retainStatisticalDependents(program, ownerId) {
+  const references = new Map();
+  const visited = new Set();
+  const visit = id => {
+    if (visited.has(id)) return;
+    visited.add(id);
+    const config = program.markConfigs[id]?.statisticalReference;
+    if (config !== undefined) references.set(id, {
+      config, encoding: findLayer(program, id).encoding
+    });
+    for (const child of ownedChildren(program, id)) visit(child);
+  };
+  visit(ownerId);
+  let next = program;
+  // Keep independently authored references and their labels through the
+  // component replacement; removeMark otherwise treats them as source-owned.
+  for (const id of references.keys()) {
+    const { statisticalReference, ...config } = next.markConfigs[id];
+    next = next._withMarkConfig(id, config);
+    // Detached statistics must not temporarily look like ordinary data marks:
+    // their derived value field would pollute axis-title/domain inference while
+    // replacement components fulfill their guides.
+    const encoding = findLayer(next, id).encoding;
+    for (const channel of ["x", "y", "x2", "y2"]) {
+      if (encoding[channel] !== undefined) {
+        next = next.editSemantic({ property: `layer[${id}].encoding.${channel}`, remove: true });
+      }
+    }
+  }
+  return { program: next, references };
+}
+
+export function restoreStatisticalDependents(program, references, { fallbackSource, fromAxis, toAxis }) {
+  if (references.size === 0) return program;
+  let next = program;
+  const sources = new Set();
+  for (const [id, { config, encoding }] of references) {
+    const source = findLayer(next, config.source) === undefined ? fallbackSource : config.source;
+    const axis = config.axis === fromAxis ? toAxis : config.axis;
+    const channels = fromAxis === toAxis ? [["x", "x"], ["y", "y"], ["x2", "x2"], ["y2", "y2"]]
+      : [["x", "y"], ["y", "x"], ["x2", "y2"], ["y2", "x2"]];
+    for (const [from, to] of channels) {
+      for (const [key, value] of Object.entries(encoding[from] ?? {})) {
+        next = next.editSemantic({ property: `layer[${id}].encoding.${to}.${key}`, value });
+      }
+    }
+    next = next._withMarkConfig(id, {
+      ...next.markConfigs[id],
+      statisticalReference: { ...config, source, axis }
+    });
+    sources.add(source);
+  }
+  // Recreate these graphics after the new components, retaining overlays'
+  // authored styles while placing them above their source as before.
+  const graphics = new Map();
+  const removeGraphics = id => {
+    if (graphics.has(id)) return;
+    graphics.set(id, {
+      graphic: next.graphicSpec.objects[id],
+      parent: findGraphicParent(next.graphicSpec, id)?.id
+    });
+    for (const child of ownedChildren(next, id)) removeGraphics(child);
+    if (next.graphicSpec.objects[id] !== undefined) {
+      next = next.editGraphics({ target: id, remove: true });
+    }
+  };
+  for (const id of references.keys()) removeGraphics(id);
+  for (const [id, { graphic, parent }] of graphics) {
+    if (graphic !== undefined) {
+      next = next.createGraphics({
+        id, type: graphic.type, ...(parent === undefined ? {} : { parent }),
+        ...(graphic.type === "collection" || graphic.items === undefined ? {} : { length: 0 })
+      });
+    }
+  }
+  for (const source of sources) next = applyLayerDataRematerialization(next, source);
+  for (const id of references.keys()) {
+    if (ownedChildren(next, id).length > 0) next = applyLayerDataRematerialization(next, id);
+  }
+  return next._withContext(program.context);
+}
+

package/src/actions/marks/index.js

@@ -1,5 +1,6 @@
 import { removeMark } from "./remove.js";
 import {
+  createStatisticalReference,
   createReferenceLine,
   createReferenceBand,
   materializeStatisticalReferenceData,
@@ -32,6 +33,7 @@ export function registerMarkActions(ProgramClass) {
   registerTextMarkActions(ProgramClass);
   registerTickMarkActions(ProgramClass);
   ProgramClass.prototype.removeMark = removeMark;
+  ProgramClass.prototype.createStatisticalReference = createStatisticalReference;
   ProgramClass.prototype.createReferenceLine = createReferenceLine;
   ProgramClass.prototype.createReferenceBand = createReferenceBand;
   ProgramClass.prototype.materializeStatisticalReferenceData =

package/src/actions/marks/lifecycle.js

@@ -1,6 +1,7 @@
 export function rematerializeHighlightBaseline(program, {
   target,
   operation,
+  scales,
   resetProperty,
   resetValue
 }) {
@@ -22,6 +23,6 @@ export function rematerializeHighlightBaseline(program, {
       property: resetProperty,
       value: resetValue
     })
-    [operation]({ id: target })
+    [operation]({ id: target, ...(scales === undefined ? {} : { scales }) })
     .rematerializeMarkHighlights({ target, highlights });
 }

package/src/actions/marks/line/actions.js

@@ -1,3 +1,4 @@
+import { requestedMarkClip, validateMarkClipCoordinate } from "../../../selectors/markClip.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
@@ -34,6 +35,7 @@ import {
   resolvePositionedLineMaterialization
 } from "./materialize.js";
 import { resolveLineBins } from "../../../grammar/lineSeries.js";
+import { validateLineMissing, validateLineMissingScope } from "../../../grammar/lineMissing.js";
 import { requireSemanticScale } from "../../../selectors/scales.js";
 import {
   requestedStrokeDetails,
@@ -43,11 +45,11 @@ import {
 const DEFAULT_LINE_STROKE = DEFAULT_COLORS.mark;
 const DEFAULT_LINE_WIDTH = 2;
 const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "stroke", "strokeWidth", "opacity", "curve", "tension", "closed",
+  "clip", "missing", "id", "data", "stroke", "strokeWidth", "opacity", "curve", "tension", "closed",
   ...STROKE_STYLE_PROPERTIES
 ]);
 const EDIT_OPTIONS = Object.freeze([
-  "target", "stroke", "strokeWidth", "opacity", "curve", "tension", "closed",
+  "clip", "missing", "target", "stroke", "strokeWidth", "opacity", "curve", "tension", "closed",
   ...STROKE_STYLE_PROPERTIES
 ]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
@@ -100,7 +102,9 @@ const createLineMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createLineMark");
+    requestedMarkClip(args);
     const strokeDetails = requestedStrokeDetails(args, "createLineMark");
+    const missing = validateLineMissing(args.missing);
     const id = resolveMarkId(this, args.id, {
       defaultId: "line",
       label: "Line mark id",
@@ -140,6 +144,10 @@ const createLineMark = /* @__PURE__ */ action(
         value: data
       });
     created = applyLayeredMarkInheritance(created, id, inherited);
+    if (Object.hasOwn(args, "missing")) {
+      created = created.editSemantic({ property: `layer[${id}].mark.missing`, value: missing });
+    }
+    validateLineMissingScope(findLayer(created, id));
     created = created
       .createGraphics({
         id,
@@ -159,6 +167,7 @@ const createLineMark = /* @__PURE__ */ action(
       );
     created = materializeInheritedMark(created, id);
     const appearance = {
+      ...requestedMarkClip(args),
       ...(stroke === undefined ? {} : { stroke }),
       ...(opacity === undefined ? {} : { opacity })
     };
@@ -203,11 +212,13 @@ const rematerializeLineMark = /* @__PURE__ */ action(
     const highlighted = rematerializeHighlightBaseline(this, {
       target: id,
       operation: "rematerializeLineMark",
+      scales: args.scales,
       resetProperty: "length",
       resetValue: 0
     });
     if (highlighted !== undefined) return highlighted;
     const { dataset, layer } = requireLine(this, id);
+    validateLineMissingScope(layer);
     const existingChildren = this.graphicSpec.objects[id].items;
     const parallel = layer.encoding?.parallel;
     const xScaleId = layer.encoding?.x?.scale;
@@ -277,9 +288,10 @@ const editLineMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editLineMark");
+    requestedMarkClip(args);
     const strokeDetails = requestedStrokeDetails(args, "editLineMark");
-    if (!EDIT_OPTIONS.slice(1).some(key => Object.hasOwn(args, key))) {
-      throw new Error("editLineMark requires stroke, strokeWidth, opacity, curve, tension, or closed.");
+    if (!EDIT_OPTIONS.filter(key => key !== "target").some(key => Object.hasOwn(args, key))) {
+      throw new Error("editLineMark requires stroke, strokeWidth, opacity, curve, tension, closed, or missing.");
     }
     const target = Object.hasOwn(args, "target")
       ? validateUserId(args.target, "Line mark id")
@@ -306,7 +318,8 @@ const editLineMark = /* @__PURE__ */ action(
         (layer.encoding?.x !== undefined || isParallelLine(layer))) {
       throw new Error("Line closed requires theta/radius Polar position encodings.");
     }
-    const config = { ...this.markConfigs[layer.id] };
+    validateMarkClipCoordinate(this, layer, args.clip ?? this.markConfigs[layer.id]?.clip);
+    const config = { ...this.markConfigs[layer.id], ...requestedMarkClip(args) };
     Object.assign(config, strokeDetails);
     for (const [key, validate] of Object.entries({
       stroke: validateNonEmptyString,
@@ -323,7 +336,12 @@ const editLineMark = /* @__PURE__ */ action(
     if (Object.hasOwn(args, "tension")) config.tension = args.tension;
     validateCardinalTension(config.tension, config.curve ?? "linear");
     validatePolarLineConfig(layer, config);
-    const next = this._withMarkConfig(layer.id, config);
+    let next = this._withMarkConfig(layer.id, config);
+    if (Object.hasOwn(args, "missing")) {
+      const missing = validateLineMissing(args.missing);
+      validateLineMissingScope({ ...layer, mark: { ...layer.mark, missing } });
+      next = next.editSemantic({ property: `layer[${layer.id}].mark.missing`, value: missing });
+    }
     const materialized = canMaterializeLine(next, layer)
       ? next.rematerializeLineMark({ id: layer.id })
       : next;

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

@@ -4,6 +4,7 @@ import {
 import {
   mapContinuousScaleValues,
   mapOrdinalPositionValues,
+  readScaleField,
   normalizeStrokeDashPattern
 } from "../../../grammar/scales/index.js";
 import { buildCurvePathCommands } from
@@ -55,7 +56,9 @@ export function resolveParallelLineMaterialization({
   );
   const sourceRows = items.map(item => rows[item.sourceRowIndex]);
   const mapAppearance = appearanceMapper(layer, resolvedScales,
-    field => sourceRows.map(row => row[field]));
+    (field, channel, encoding) => readScaleField(sourceRows, field, encoding.fieldType, {
+      temporalUnit: encoding.temporalUnit
+    }));
   return {
     commands: items.map(item => item.commands),
     strokes: layer.encoding?.stroke?.scale !== undefined
@@ -99,7 +102,7 @@ export function resolvePositionedLineMaterialization({
   const lineOptions = polar
     ? { thetaDomain: resolvedScales[thetaScaleId].domain }
     : { xBinBoundaries, xDomain: resolvedScales[xScaleId].domain };
-  const derived = deriveLineSeries(rows, layer, lineOptions);
+  const derived = deriveLineSeries(rows, layer, { ...lineOptions, scales: resolvedScales });
   const commands = polar
     ? derived.series.map(series => buildPolarLinePathCommands({
         series: series.values,
@@ -134,7 +137,8 @@ export function resolvePositionedLineMaterialization({
       derived.series,
       field,
       channel,
-      encoding
+      encoding,
+      channel === "color" ? resolvedScales[encoding.scale] : undefined
     ));
   return {
     commands,

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

@@ -1,3 +1,4 @@
+import { requestedMarkClip } from "../../../selectors/markClip.js";
 import { action } from "../../../core/action.js";
 import { validatePointShape } from "../../../grammar/pointShapes.js";
 import { getPointGraphicType } from "../../../grammar/schemas/mark.js";
@@ -19,7 +20,7 @@ import {
 import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const OPTIONS = Object.freeze([
-  "id", "data", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
+  "clip", "id", "data", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
   ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -30,6 +31,7 @@ export const createPointMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, OPTIONS, "createPointMark");
+    requestedMarkClip(args);
     requestedStrokeDetails(args, "createPointMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "point",
@@ -46,8 +48,7 @@ export const createPointMark = /* @__PURE__ */ action(
         ? { data: inherited.data }
         : {})
     });
-    const shape = Object.hasOwn(args, "shape") ? args.shape : "circle";
-    validatePointShape(shape);
+    const shape = validatePointShape(Object.hasOwn(args, "shape") ? args.shape : "circle");
     const resolvedType = getPointGraphicType(shape);
     const graphicType = resolvedType === "path" ? "circle" : resolvedType;
 
@@ -78,7 +79,7 @@ export const createPointMark = /* @__PURE__ */ action(
       ._withMarkConfig(id, { shape });
     const created = materializeInheritedMark(next, id);
     const appearance = Object.fromEntries(
-      ["fill", "opacity", "stroke", "strokeWidth", ...STROKE_STYLE_PROPERTIES]
+      ["clip", "fill", "opacity", "stroke", "strokeWidth", ...STROKE_STYLE_PROPERTIES]
         .filter(property => Object.hasOwn(args, property))
         .map(property => [property, args[property]])
     );

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

@@ -1,3 +1,4 @@
+import { requestedMarkClip, validateMarkClipCoordinate } from "../../../selectors/markClip.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
@@ -16,7 +17,7 @@ import { validateMarkOptions } from "../shared.js";
 import { validateItemMissing } from "../../../grammar/itemMissing.js";
 
 const OPTIONS = Object.freeze([
-  "target", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
+  "target", "clip", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
   ...STROKE_STYLE_PROPERTIES
 ]);
 
@@ -27,9 +28,10 @@ export const editPointMark = /* @__PURE__ */ action(
   },
   function (args = {}) {
     validateMarkOptions(args, OPTIONS, "editPointMark");
+    requestedMarkClip(args);
     const strokeDetails = requestedStrokeDetails(args, "editPointMark");
     const editable = [
-      "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
+      "clip", "missing", "shape", "fill", "opacity", "stroke", "strokeWidth",
       ...STROKE_STYLE_PROPERTIES
     ];
     if (!editable.some(property => Object.hasOwn(args, property))) {
@@ -62,13 +64,14 @@ export const editPointMark = /* @__PURE__ */ action(
     if (Object.hasOwn(args, "opacity") && layer.encoding?.opacity?.field !== undefined) {
       throw new Error("editPointMark opacity conflicts with a field encoding; use encodeOpacity with value to replace it.");
     }
+    validateMarkClipCoordinate(this, layer, args.clip ?? this.markConfigs[id]?.clip);
     const semantic = Object.hasOwn(args, "missing")
       ? this.editSemantic({
           property: `layer[${id}].mark.missing`,
           value: validateItemMissing(args.missing, "Point missing")
         })
       : this;
-    const config = { ...semantic.markConfigs[id] };
+    const config = { ...semantic.markConfigs[id], ...requestedMarkClip(args) };
     Object.assign(config, strokeDetails);
     if (Object.hasOwn(args, "shape")) {
       config.shape = validatePointShape(args.shape);

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

@@ -10,20 +10,20 @@ const JITTER_OPTIONS = Object.freeze([
 ]);
 const REMOVE_OPTIONS = Object.freeze(["target"]);
 
-function isCartesianPoint(program, layer, channel) {
+function isCartesianPoint(program, layer) {
   return layer.mark?.type === "point" &&
-    layer.encoding?.[channel]?.scale !== undefined &&
-    layer.encoding?.[channel === "x" ? "y" : "x"]?.scale !== undefined &&
+    layer.encoding?.x?.scale !== undefined &&
+    layer.encoding?.y?.scale !== undefined &&
     findCoordinate(program, layer.coordinate)?.type === "cartesian";
 }
 
-function resolveJitterTarget(program, target, channel) {
+function resolveJitterTarget(program, target) {
   const requested = target === undefined
     ? undefined
     : validateUserId(target, "Point jitter target");
   return resolveEligibleLayer(program, {
     target: requested,
-    predicate: layer => isCartesianPoint(program, layer, channel),
+    predicate: layer => isCartesianPoint(program, layer),
     label: "point jitter"
   });
 }
@@ -35,7 +35,7 @@ export const jitterPoints = /* @__PURE__ */ closedAction(
   }, JITTER_OPTIONS,
   function (args = {}) {
     const policy = normalizePointJitterPolicy(args);
-    const layer = resolveJitterTarget(this, args.target, policy.channel);
+    const layer = resolveJitterTarget(this, args.target);
     if (this.materializationConfigs.pointPacking?.[layer.id] !== undefined) {
       throw new Error(`Point jitter on "${layer.id}" conflicts with point packing.`);
     }