ggaction 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 All notable changes to `ggaction` are recorded in this file.
 
+## Unreleased
+
+## [0.0.4] - 2026-07-19
+
+### Changed
+
+- Transferred the canonical repository to the `ggaction` organization and moved public documentation to
+  `https://ggaction.github.io/ggaction/`.
+- Made public documentation deployment release-scoped so ordinary `main` pushes continue to verify docs without
+  changing the published site.
+- Refactored source ownership and materialization boundaries while preserving the public API, stored specifications,
+  trace hierarchy, and rendered output.
+
+### Fixed
+
+- Normalized numeric Canvas font weights before rendering so valid intermediate values such as `650` retain normal
+  text geometry in both Browser Canvas and Node PNG output.
+- Applied right categorical legend offsets from the plot boundary consistently during creation and focused layout
+  edits, including labels, titles, and optional backgrounds.
+- Accepted `count` on sequential palette descriptors as a concrete gradient-stop count, consistently across
+  top-level palette shorthands, nested ranges, encodings, direct scales, and scale edits.
+- Preserved concrete `ChartProgram` subclasses in the TypeScript signature of wrapped extension actions and added
+  a strict NodeNext declaration-merging authoring pattern.
+- Routed every selective `llms.txt` target to a deployed HTML page, stabilized action fragments, and made built-site
+  checks validate both HTTP targets and DOM IDs.
+
+## [0.0.3] - 2026-07-19
+
+### Added
+
+- Added complete Polar point, line/radar, arc/donut/rose/radial-bar authoring with theta/radius guides, selection,
+  highlighting, and Canvas/PNG rendering.
+- Added immutable horizontal and vertical program composition, nested child snapshots, layout editing, stable child
+  replacement, and Cartesian facets with derived-data replay, scale resolution, outer axes, and shared legends.
+- Added text and rect marks, directional offsets, horizontal grouped bars, and compatible shared temporal bar/line
+  position inference.
+
+### Changed
+
+- Nested compositions now preserve their intrinsic layout and honor outer cross-axis alignment instead of stretching
+  internal cells or leaving unequal snapshots pinned to the start edge.
+
+### Fixed
+
+- Corrected zero-baseline and signed geometry for aggregate bars, and materialized complete ranged or aggregate bars
+  with their documented default width.
+- Made horizontal error bands compose with color and explicit boundaries in the same supported cases as vertical bands.
+- Added standalone point-size legends and interval-aware temporal axis labels without duplicate automatic tick text.
+- Published the exact `createDerivedData` transform-array contract and stable `ChartProgram` state-inspection paths in
+  TypeScript and user documentation.
+
 ## [0.0.2] - 2026-07-17
 
 ### Fixed
@@ -31,5 +82,7 @@ All notable changes to `ggaction` are recorded in this file.
 - Cartesian charts are the complete current path. Polar semantic tokens exist only where explicitly documented and do
   not imply complete polar rendering.
 
-[0.0.2]: https://github.com/hj-n/ggaction/releases/tag/v0.0.2
-[0.0.1]: https://github.com/hj-n/ggaction/releases/tag/v0.0.1
+[0.0.4]: https://github.com/ggaction/ggaction/releases/tag/v0.0.4
+[0.0.3]: https://github.com/ggaction/ggaction/releases/tag/v0.0.3
+[0.0.2]: https://github.com/ggaction/ggaction/releases/tag/v0.0.2
+[0.0.1]: https://github.com/ggaction/ggaction/releases/tag/v0.0.1

package/README.md

@@ -1,108 +1,131 @@
 # ggaction
 
-`ggaction` is a JavaScript library for building charts through immutable,
-traceable actions.
+[![npm version](https://img.shields.io/npm/v/ggaction.svg)](https://www.npmjs.com/package/ggaction) [![license](https://img.shields.io/npm/l/ggaction.svg)](./LICENSE) [![documentation](https://img.shields.io/badge/docs-ggaction.github.io-2563eb)](https://ggaction.github.io/ggaction/)
+
+### A grammar for how charts are made.
+
+Most visualization grammars describe a finished chart. **ggaction** represents chart authoring itself as an immutable, traceable sequence of graphical actions.
+
+Build, inspect, select, and revise charts one meaningful action at a time.
+
+<p align="left">
+  <img src="./docs/assets/images/readme-authoring-sequence.gif" width="960" height="540" loading="eager" alt="A ggaction program progressively creates a scatterplot, adds grouped regression fits and confidence bands, highlights the Japan group across chart layers, and finishes with an R-squared annotation.">
+</p>
+
+Every frame is rendered from an immutable `ChartProgram`. The final R² label is a custom traceable action composed from ggaction's public extension primitives.
+
+```bash
+npm install ggaction
+```
+
+## A grammar of graphical action
+
+Actions are verbs:
+
+`create · transform · encode · edit · select · compose`
+
+Chart resources are nouns:
+
+`data · marks · scales · coordinates · guides`
+
+A `ChartProgram` is the immutable sentence they produce.
+
+The following fragment assumes `cars` is an array of row objects:
+
+```javascript
+import { chart } from "ggaction";
+
+const program = chart()
+  .createCanvas()
+  .createData({ values: cars })
+  .createPointMark({ id: "points" })
+  .encodeX({ field: "Displacement" })
+  .encodeY({ field: "Acceleration" })
+  .encodeColor({ field: "Origin" })
+  .createRegression()
+  .createGuides();
+```
+
+## Why actions?
+
+- **Progressive** — build and revise a chart one meaningful operation at a time.
+- **Traceable** — retain high-level actions and the wrapped actions they invoke.
+- **Materialized** — actions create concrete backend-neutral graphics; rendering does not perform hidden semantic compilation.
+
+## Quick start
+
+```bash
+npm install ggaction
+```
 
 ```javascript
 import { chart, render } from "ggaction";
 
-const cars = [
-  { horsepower: 88, mpg: 27, origin: "USA" },
-  { horsepower: 70, mpg: 36, origin: "Japan" },
-  { horsepower: 110, mpg: 24, origin: "Europe" }
+const observations = [
+  { displacement: 97, acceleration: 14.5, origin: "Japan" },
+  { displacement: 140, acceleration: 15.5, origin: "USA" },
+  { displacement: 86, acceleration: 16.4, origin: "Japan" }
 ];
 
 const program = chart()
   .createCanvas({
     width: 640,
     height: 400,
-    margin: { top: 30, right: 30, bottom: 60, left: 70 }
+    margin: { top: 30, right: 130, bottom: 60, left: 70 }
   })
-  .createData({ values: cars })
+  .createData({ values: observations })
   .createPointMark()
-  .encodeX({ field: "horsepower" })
-  .encodeY({ field: "mpg" })
+  .encodeX({ field: "displacement" })
+  .encodeY({ field: "acceleration" })
   .encodeColor({ field: "origin" })
-  .encodeRadius({ value: 3 })
-  .createGuides({
-    axes: {
-      x: { title: { text: "Horsepower" } },
-      y: { title: { text: "Miles per Gallon" } }
-    }
-  });
-
-render(program, document.querySelector("#chart").getContext("2d"));
+  .encodeRadius({ value: 4 })
+  .createGuides();
+
+const context = document.querySelector("#chart").getContext("2d");
+render(program, context);
 ```
 
-The renderer reads only fully materialized, backend-neutral graphics. Semantic
-state is never automatically compiled during rendering.
+For the advanced version, follow the [regression recipe](https://ggaction.github.io/ggaction/recipes/regression-scatterplot/) or open the [runnable example](./examples/cars-regression-scatterplot/).
 
-> **Status:** `0.0.2` is the current experimental public release. APIs may change
-> before `1.0.0`; changes are recorded in the [changelog](./CHANGELOG.md).
+## What it supports
 
-## Install
+- Cartesian and polar charts
+- Statistical layers and intervals
+- Faceting and program composition
+- Mark selection and coordinated highlighting
+- Browser Canvas and Node PNG output
+- TypeScript declarations and traceable extension actions
 
-```bash
-npm install ggaction
-```
+See the current [supported features](https://ggaction.github.io/ggaction/supported-features/), [tutorials and examples](https://ggaction.github.io/ggaction/tutorials/), and [action reference](https://ggaction.github.io/ggaction/reference/actions/) for exact coverage. Runnable programs are collected in [`examples/`](./examples/README.md).
+
+## Package entries
 
-The package is ESM-only and supports Node.js 20 or later. The default `ggaction`
-entry works with modern browser build tools and Canvas. `ggaction/png` is
-Node-only and uses a native Canvas dependency.
+The package is ESM-only and requires Node.js 20 or later.
 
 | Entry | Purpose |
 | --- | --- |
 | `ggaction` | Create chart programs and render them to Browser Canvas |
-| `ggaction/extension` | Author wrapped actions and use public low-level primitives |
+| `ggaction/extension` | Author wrapped actions with public low-level primitives |
 | `ggaction/png` | Render a completed program to a PNG file in Node.js |
 
-All three entries include TypeScript declarations. See [Getting
-Started](https://hyeonword.com/ggaction/getting-started/) for a complete browser
-setup and [Rendering](https://hyeonword.com/ggaction/api/rendering/) for Node PNG
-output.
+All entries include TypeScript declarations. The default entry is browser-safe; the PNG adapter is Node-only.
 
 ## Documentation
 
-- [npm package](https://www.npmjs.com/package/ggaction)
-- [Getting started](https://hyeonword.com/ggaction/getting-started/)
-- [Cars scatterplot tutorial](https://hyeonword.com/ggaction/tutorials/scatterplot/)
-- [Cars line chart tutorial](https://hyeonword.com/ggaction/tutorials/line-chart/)
-- [Cars histogram tutorial](https://hyeonword.com/ggaction/tutorials/histogram/)
-- [Bar chart tutorial](https://hyeonword.com/ggaction/tutorials/grouped-bar/)
-- [Regression scatterplot tutorial](https://hyeonword.com/ggaction/tutorials/regression-scatterplot/)
-- [Density area chart tutorial](https://hyeonword.com/ggaction/tutorials/density-area/)
-- [Error-bar chart tutorial](https://hyeonword.com/ggaction/tutorials/error-bar/)
-- [Error-band chart tutorial](https://hyeonword.com/ggaction/tutorials/error-band/)
-- [Mark selection and highlighting tutorial](https://hyeonword.com/ggaction/tutorials/mark-selection/)
-- [Box-plot API](https://hyeonword.com/ggaction/api/box-plots/)
-- [Chart concepts](https://hyeonword.com/ggaction/concepts/chart-program/)
-- [Complete action reference](https://hyeonword.com/ggaction/reference/actions/)
-- [Supported features](https://hyeonword.com/ggaction/supported-features/)
-- [Documentation index](https://hyeonword.com/ggaction/)
-
-The runnable [cars scatterplot](https://github.com/hj-n/ggaction/tree/main/examples/cars-scatterplot/),
-[aggregate line chart](https://github.com/hj-n/ggaction/tree/main/examples/cars-line-chart/), and
-[stacked histogram](https://github.com/hj-n/ggaction/tree/main/examples/cars-histogram/) use `data/cars.json`. The
-[regression scatterplot](https://github.com/hj-n/ggaction/tree/main/examples/cars-regression-scatterplot/) also uses the
-cars data and layers grouped fits with confidence bands. The [grouped bar
-chart](https://github.com/hj-n/ggaction/tree/main/examples/jobs-grouped-bar/) uses `data/jobs.json`. The [density area
-chart](https://github.com/hj-n/ggaction/tree/main/examples/cars-density-area/) derives grouped Acceleration
-distributions from the cars data. The [error-bar chart](https://github.com/hj-n/ggaction/tree/main/examples/cars-error-bar/)
-summarizes mean Acceleration with 95% confidence intervals. The
-[error-band chart](https://github.com/hj-n/ggaction/tree/main/examples/gapminder-error-band/) summarizes grouped
-confidence intervals as closed area paths over time.
-The [box plot](https://github.com/hj-n/ggaction/tree/main/examples/cars-box-plot/) supports vertical or horizontal
-Tukey/min–max ranges, configurable factor and component appearance, and
-optional outlier rendering from categorical and quantitative field pairs.
-The [mark-selection example](https://github.com/hj-n/ggaction/tree/main/examples/mark-selection/) compares grouped point,
-complete stacked-bar, and line-series highlighting through one selector grammar.
-Completed programs can also be exported through
-[`ggaction/png`](https://hyeonword.com/ggaction/api/rendering/#png-output).
-
-## Development
+- [Getting Started](https://ggaction.github.io/ggaction/getting-started/)
+- [Tutorials and Examples](https://ggaction.github.io/ggaction/tutorials/)
+- [Action Reference](https://ggaction.github.io/ggaction/reference/actions/)
+- [Concepts](https://ggaction.github.io/ggaction/concepts/chart-program/)
+- [Supported Features](https://ggaction.github.io/ggaction/supported-features/)
+
+## Status and development
+
+> **Status:** `0.0.4` is the current experimental public release. APIs may change before `1.0.0`; changes are recorded in the [changelog](./CHANGELOG.md).
 
 ```bash
 npm install
+npm run assets:readme
 npm test
 npm run test:render
+npm run test:docs
 ```

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "ggaction",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Build charts through immutable, traceable graphical actions.",
   "license": "MIT",
   "author": "Hyeon Jeon",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hj-n/ggaction.git"
+    "url": "git+https://github.com/ggaction/ggaction.git"
   },
-  "homepage": "https://hyeonword.com/ggaction/",
+  "homepage": "https://ggaction.github.io/ggaction/",
   "bugs": {
-    "url": "https://github.com/hj-n/ggaction/issues"
+    "url": "https://github.com/ggaction/ggaction/issues"
   },
   "keywords": [
     "visualization",
@@ -55,10 +55,18 @@
     "test:docs:browser": "node scripts/test-built-docs.js _site",
     "test:coverage": "node scripts/run-tests.js coverage",
     "test:render": "node test/support/artifacts.js && node scripts/run-tests.js render && node scripts/generate-roadmap-gallery.js && node scripts/test-roadmap-gallery.js",
+    "assets:readme": "node scripts/generate-readme-demo.js",
     "artifacts:gallery": "node scripts/generate-roadmap-gallery.js",
     "artifacts:gallery:test": "node scripts/test-roadmap-gallery.js",
     "docs:images": "node scripts/generate-doc-images.js",
     "docs:llms": "node scripts/generate-llm-docs.js",
+    "docs:capabilities": "node scripts/generate-doc-capabilities.js",
+    "docs:capabilities:check": "node scripts/generate-doc-capabilities.js --check",
+    "docs:signatures": "node scripts/generate-doc-signatures.js",
+    "docs:signatures:check": "node scripts/generate-doc-signatures.js --check",
+    "docs:generate": "npm run docs:signatures && npm run docs:capabilities && npm run docs:images && npm run docs:llms",
+    "docs:build": "bundle exec jekyll build --source docs --destination _site --baseurl /ggaction",
+    "docs:verify": "npm run docs:generate && npm run test:docs && npm run docs:build && npm run test:docs:built && npm run test:docs:browser",
     "contracts:catalog": "node scripts/generate-action-catalog.js",
     "contracts:catalog:check": "node scripts/generate-action-catalog.js --check",
     "package:check": "node scripts/package-artifact.js --check",
@@ -79,7 +87,9 @@
   },
   "devDependencies": {
     "es-module-lexer": "^1.7.0",
+    "gifenc": "^1.0.3",
     "playwright": "^1.61.1",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "vite": "^6.4.3"
   }
 }

package/src/actions/boxPlots/components.js

@@ -64,7 +64,8 @@ export const createBoxOutliers = action(
     let next = this.createPointMark({
       id: args.id,
       data: args.data,
-      shape: args.shape
+      shape: args.shape,
+      fill: "#111111"
     });
     next = next[categoryAction]({
       target: args.id,
@@ -82,7 +83,6 @@ export const createBoxOutliers = action(
     });
     return next
       .encodeRadius({ target: args.id, value: args.radius })
-      .encodeOpacity({ target: args.id, value: args.opacity })
-      .editGraphics({ target: args.id, property: "fill", value: "#111111" });
+      .encodeOpacity({ target: args.id, value: args.opacity });
   }
 );

package/src/actions/boxPlots/edit.js

@@ -0,0 +1,277 @@
+import { action } from "../../core/action.js";
+import { isPlainObject } from "../../core/immutable.js";
+import { validateUserId } from "../../core/identifiers.js";
+import { validateKeys } from "../../core/validation.js";
+import { BOX_FIELDS, deriveBoxData, normalizeBoxTransform } from
+  "../../grammar/boxPlot.js";
+import { hasDataset } from "../../selectors/index.js";
+import { findDataset } from "../../selectors/datasets.js";
+import { findLayer } from "../../selectors/layers.js";
+import {
+  resolveBoxAppearance,
+  resolveBoxMedianAppearance,
+  resolveBoxOutlierAppearance,
+  resolveBoxWhisker,
+  resolveBoxWidth
+} from "./options.js";
+
+const OPTIONS = Object.freeze([
+  "target", "whisker", "width", "outliers", "box", "median", "outlier"
+]);
+
+function resolveBoxOwner(program, requested) {
+  const eligible = program.semanticSpec.layers.filter(
+    layer => program.markConfigs[layer.id]?.boxPlot?.materialized === true
+  );
+  if (requested !== undefined) {
+    const id = validateUserId(requested, "Box-plot owner id");
+    const layer = findLayer(program, id);
+    if (layer === undefined || !eligible.includes(layer)) {
+      throw new Error(`Unknown box-plot owner "${id}".`);
+    }
+    return layer;
+  }
+  const current = findLayer(program, program.context.currentMark);
+  if (current !== undefined && eligible.includes(current)) return current;
+  if (eligible.length === 1) return eligible[0];
+  if (eligible.length === 0) throw new Error("No box-plot owner is available.");
+  throw new Error("Box-plot owner is ambiguous; provide target.");
+}
+
+function requirePatch(value, label) {
+  if (!isPlainObject(value)) {
+    throw new TypeError(`editBoxPlot ${label} must be a plain object.`);
+  }
+  return value;
+}
+
+function resolveEditedWhisker(current, value) {
+  if (value === undefined) return current;
+  const patch = requirePatch(value, "whisker");
+  validateKeys(patch, ["type", "factor"], "editBoxPlot whisker");
+  const type = patch.type ?? current.type;
+  const candidate = type === "minmax"
+    ? { type, ...(Object.hasOwn(patch, "factor") ? { factor: patch.factor } : {}) }
+    : {
+        type,
+        factor: Object.hasOwn(patch, "factor")
+          ? patch.factor
+          : current.type === "tukey" ? current.factor : 1.5
+      };
+  return resolveBoxWhisker(candidate, "editBoxPlot");
+}
+
+function nextRevisionId(program, ownerId, kind) {
+  let revision = 1;
+  while (hasDataset(program, `${ownerId}${kind}Revision${revision}`)) {
+    revision += 1;
+  }
+  return `${ownerId}${kind}Revision${revision}`;
+}
+
+function removeOwnedMark(program, id) {
+  return program
+    .editSemantic({ property: `layer[${id}]`, remove: true })
+    .editGraphics({ target: id, remove: true })
+    ._withoutMaterializationConfig(["marks", id]);
+}
+
+function rebindRuleData(program, id, data) {
+  return program.editSemantic({ property: `layer[${id}].data`, value: data });
+}
+
+export const editBoxPlot = action(
+  {
+    op: "editBoxPlot",
+    description: "Revise one box plot and its owned components."
+  },
+  function (args = {}) {
+    validateKeys(args, OPTIONS, "editBoxPlot");
+    if (!OPTIONS.slice(1).some(key => Object.hasOwn(args, key))) {
+      throw new Error("editBoxPlot requires at least one box-plot option.");
+    }
+    const owner = resolveBoxOwner(this, args.target);
+    const current = this.markConfigs[owner.id].boxPlot;
+    const whisker = resolveEditedWhisker(current.whisker, args.whisker);
+    const width = Object.hasOwn(args, "width")
+      ? resolveBoxWidth(args.width, "editBoxPlot")
+      : current.width;
+    if (Object.hasOwn(args, "outliers") && typeof args.outliers !== "boolean") {
+      throw new TypeError("editBoxPlot outliers must be a boolean.");
+    }
+    const outliers = args.outliers ?? current.outliers;
+    const boxPatch = Object.hasOwn(args, "box")
+      ? requirePatch(args.box, "box")
+      : {};
+    const medianPatch = Object.hasOwn(args, "median")
+      ? requirePatch(args.median, "median")
+      : {};
+    const outlierPatch = Object.hasOwn(args, "outlier")
+      ? requirePatch(args.outlier, "outlier")
+      : {};
+    const box = resolveBoxAppearance(
+      { ...current.box, ...boxPatch },
+      "editBoxPlot"
+    );
+    const median = resolveBoxMedianAppearance(
+      { ...current.median, ...medianPatch },
+      "editBoxPlot"
+    );
+    const outlier = resolveBoxOutlierAppearance(
+      { ...current.outlier, ...outlierPatch },
+      "editBoxPlot"
+    );
+    if (Object.hasOwn(boxPatch, "fill") && owner.encoding?.color !== undefined) {
+      throw new Error(
+        "editBoxPlot box.fill cannot be combined with a color encoding."
+      );
+    }
+
+    const revisesData = JSON.stringify(whisker) !== JSON.stringify(current.whisker) ||
+      outliers !== current.outliers;
+    const changesBox = Object.hasOwn(args, "box") ||
+      Object.hasOwn(args, "width") || revisesData;
+    const changesMedian = Object.hasOwn(args, "median") ||
+      Object.hasOwn(args, "width") || revisesData;
+    const changesOutlier = Object.hasOwn(args, "outlier") || revisesData;
+    const categoryEncoding = current.orientation === "vertical"
+      ? owner.encoding.x
+      : owner.encoding.y;
+    const measureEncoding = current.orientation === "vertical"
+      ? owner.encoding.y
+      : owner.encoding.x;
+    let summaryId = current.summaryId;
+    let outlierDataId = current.outlierDataId;
+    let next = this;
+
+    const sourceRows = findDataset(this, current.source).values;
+    const derived = deriveBoxData(sourceRows, normalizeBoxTransform({
+      type: "boxSummary",
+      category: current.category,
+      field: current.measure,
+      whisker: whisker.type,
+      ...(whisker.factor === undefined ? {} : { factor: whisker.factor })
+    }));
+    const hasOutliers = outliers && whisker.type === "tukey" &&
+      derived.outliers.length > 0;
+
+    if (revisesData) {
+      summaryId = nextRevisionId(this, owner.id, "SummaryData");
+      next = next.createBoxSummaryData({
+        id: summaryId,
+        source: current.source,
+        category: current.category,
+        field: current.measure,
+        whisker: whisker.type,
+        ...(whisker.factor === undefined ? {} : { factor: whisker.factor })
+      });
+      if (hasOutliers) {
+        outlierDataId = nextRevisionId(this, owner.id, "OutlierData");
+        next = next.createBoxOutlierData({
+          id: outlierDataId,
+          source: current.source,
+          category: current.category,
+          field: current.measure,
+          whisker: whisker.type,
+          factor: whisker.factor
+        });
+      } else {
+        outlierDataId = undefined;
+      }
+
+      next = next.editSemantic({
+        property: `layer[${owner.id}].data`,
+        value: summaryId
+      });
+      const whiskerConfig = next.markConfigs[current.whiskerId];
+      const capIds = [
+        whiskerConfig.errorBar.lowerCapId,
+        whiskerConfig.errorBar.upperCapId
+      ].filter(id => id !== undefined);
+      next = rebindRuleData(next, current.whiskerId, summaryId)
+        ._withMarkConfig(current.whiskerId, {
+          ...whiskerConfig,
+          errorBar: { ...whiskerConfig.errorBar, data: summaryId }
+        });
+      for (const capId of capIds) {
+        next = rebindRuleData(next, capId, summaryId);
+      }
+      next = rebindRuleData(next, current.medianId, summaryId);
+
+      const hadOutlierLayer = findLayer(next, current.outlierId) !== undefined;
+      if (hadOutlierLayer && !hasOutliers) {
+        next = removeOwnedMark(next, current.outlierId);
+      } else if (hadOutlierLayer && hasOutliers) {
+        next = next.editSemantic({
+          property: `layer[${current.outlierId}].data`,
+          value: outlierDataId
+        });
+      } else if (!hadOutlierLayer && hasOutliers) {
+        next = next.createBoxOutliers({
+          id: current.outlierId,
+          data: outlierDataId,
+          category: current.category,
+          categoryType: categoryEncoding.fieldType,
+          measure: current.measure,
+          orientation: current.orientation,
+          coordinate: owner.coordinate,
+          categoryScale: categoryEncoding.scale,
+          measureScale: measureEncoding.scale,
+          shape: outlier.shape,
+          radius: outlier.radius,
+          opacity: outlier.opacity
+        });
+      }
+    }
+
+    next = next._withMarkConfig(owner.id, {
+      ...next.markConfigs[owner.id],
+      boxPlot: {
+        ...current,
+        whisker,
+        width,
+        outliers,
+        box,
+        median,
+        outlier,
+        summaryId,
+        outlierDataId
+      },
+      barWidth: { band: width },
+      fill: box.fill,
+      opacity: box.opacity,
+      stroke: box.stroke,
+      strokeWidth: box.strokeWidth
+    });
+
+    if (changesBox) next = next.rematerializeBarMark({ id: owner.id });
+    if (revisesData) {
+      next = next.rematerializeErrorBar({ id: current.whiskerId });
+    }
+    if (changesMedian) {
+      next = next
+        .encodeStroke({ target: current.medianId, value: median.stroke })
+        .encodeStrokeWidth({
+          target: current.medianId,
+          value: median.strokeWidth
+        });
+    }
+    if (findLayer(next, current.outlierId) !== undefined && changesOutlier) {
+      next = next
+        .editPointMark({
+          target: current.outlierId,
+          shape: outlier.shape,
+          opacity: outlier.opacity
+        })
+        .encodeRadius({ target: current.outlierId, value: outlier.radius });
+    }
+
+    if (revisesData) {
+      next = next.releaseDerivedData({ id: current.summaryId });
+      if (current.outlierDataId !== undefined) {
+        next = next.releaseDerivedData({ id: current.outlierDataId });
+      }
+    }
+    return next._withContext({ currentMark: owner.id, currentData: current.source });
+  }
+);

package/src/actions/boxPlots/index.js

@@ -1,9 +1,11 @@
 import { createBoxMedian, createBoxOutliers } from "./components.js";
 import { createBoxPlot } from "./create.js";
+import { editBoxPlot } from "./edit.js";
 import { materializeBoxPlot } from "./materialize.js";
 
 export function registerBoxPlotActions(ProgramClass) {
   ProgramClass.prototype.createBoxPlot = createBoxPlot;
+  ProgramClass.prototype.editBoxPlot = editBoxPlot;
   ProgramClass.prototype.materializeBoxPlot = materializeBoxPlot;
   ProgramClass.prototype.createBoxMedian = createBoxMedian;
   ProgramClass.prototype.createBoxOutliers = createBoxOutliers;

package/src/actions/boxPlots/materialize.js

@@ -50,7 +50,11 @@ export const materializeBoxPlot = action(
         source,
         orientation,
         category: category.field,
-        measure: measure.field
+        measure: measure.field,
+        summaryId,
+        whiskerId,
+        medianId,
+        outlierId
       },
       barWidth: { band: config.width },
       fill: config.box.fill,
@@ -178,6 +182,13 @@ export const materializeBoxPlot = action(
         opacity: config.outlier.opacity
       });
     }
+    next = next._withMarkConfig(ownerId, {
+      ...next.markConfigs[ownerId],
+      boxPlot: {
+        ...next.markConfigs[ownerId].boxPlot,
+        outlierDataId: hasOutliers ? outlierDataId : undefined
+      }
+    });
     return next._withContext({ currentMark: ownerId, currentData: source });
   }
 );