@inflexa-ai/harness 0.42.2 → 0.43.0

package/dist/report-render/chart.js

@@ -5,29 +5,37 @@
  * `deriveChartOption` turns that grammar and the resolved rows into one ECharts option object. The chart
  * container markup lives beside this file, and it wraps the option that this derivation gives.
  *
- * The derivation reads one shape. A preset expands into a composition before the derivation
- * (`chart-presets.ts`), and each base chart type keeps its own fixed rule. Thus the two paths cannot
- * drift.
+ * A preset draws through its figure module (`figures/`), and each base chart type keeps its own fixed rule.
+ * A dense figure builds its points through the composition machinery of this file, thus a figure and a
+ * composition read one series path.
  *
- * The renderer computes no aggregate. Each plotted number stays traceable to one cell of the evidence
- * artifact, or to a per-row transform of one cell. A pie or a heatmap arrives one row per category or per
- * cell, thus a repeated category or a repeated pair is a refusal and not a silent sum.
+ * The renderer computes no aggregate outside the named summaries: the histogram bins, the box quantiles, the
+ * violin density, and the shares of a normalized bar. Every other plotted number stays traceable to one
+ * cell of the evidence artifact, or to a per-row transform of one cell. A pie, a heatmap, a stacked bar, and
+ * a radar arrive one row per category or per pair, thus a repeated category or a repeated pair is a refusal
+ * and not a silent sum.
  *
  * The derivation is deterministic. Every object builds in one fixed key order, and the code reads no
  * clock, no random value, and no locale. A string comparison uses the code-unit order (`<`) and never
  * `localeCompare`, thus the same rows give the same bytes on every host.
  *
  * The option rides to the page as inline JSON. Thus no axis label and no tooltip can carry a function
- * formatter, and every formatter here is a static template of the chart runtime. As a result the
- * derivation bounds the tick precision of the one axis whose unit it declares itself, and every other
- * value axis keeps the tick values that ECharts computes.
+ * formatter, and every formatter here is a static template of the chart runtime or a static text. As a
+ * result the derivation bounds the tick precision of the one axis whose unit it declares itself, and every
+ * other value axis keeps the tick values that ECharts computes. A custom series names its renderer as a
+ * string, and each consumer of the option binds the name (`chart-renderers.ts`).
  */
 import { err, ok } from "neverthrow";
-import { channelColumn, channelTransform, } from "../contracts/report-blocks.js";
+import { channelColumn, channelOrder, channelTransform, } from "../contracts/report-blocks.js";
 import { declaredForColumn } from "../contracts/report-reference.js";
 import { normalizeEchartSpec } from "../tools/display/normalize-echart-spec.js";
-import { expandPreset, isPresetChartType, presetAxisTitles, } from "./chart-presets.js";
-import { CHART_INLINE_OPTION_BOUND, MUTED_CHART_COLOR, SCATTER_CROWD_OPACITY, SCATTER_CROWD_ROWS, SCATTER_CROWD_SYMBOL_SIZE, SCATTER_HOVER_ROWS, SCATTER_HOVER_SYMBOL_SIZE, } from "./design.js";
+import { categoryInterval, INTERVAL_RENDERER, LABEL_LINE_SHARE, OUTLINE_RENDERER, VIOLIN_GRID_POINTS } from "./chart-renderers.js";
+import { BAR_VALUE_LABEL_LIMIT, CHART_BODY_PX, CHART_FONT_STACK, CHART_INK, CHART_INLINE_OPTION_BOUND, CHART_PAGE_TEXT_PX, CHART_PAGE_WIDTH_PX, CHART_SLOT_LIMIT, COLOR_SCALE_BAND_PCT, FACET_COLUMNS, FACET_PANEL_LIMIT, FACET_ROW_PX, FOCUS_CHART_COLOR, MUTED_CHART_COLOR, SCATTER_CROWD_OPACITY, SCATTER_CROWD_ROWS, SCATTER_CROWD_SYMBOL_SIZE, SCATTER_HOVER_ROWS, SCATTER_HOVER_SYMBOL_SIZE, SIZE_CHANNEL_RANGE_PX, } from "./design.js";
+import { applyFigureRules, axisNameFields, categoryAxisTitle, categoryName, chartProblem as problem, colorScale, columnPresent, compareCell, continuousScale, FIGURE_BODY_MEMBER, firstAppearance, guideLine, guideMarkLine, orderCategories, orderQuickCategories, statisticText, toNumber, transformColumn, valueAxisTitle as axisTitle, withTransformedLabels, } from "./figures/common.js";
+import { FIGURE_MEMBER_READERS, FIGURE_MODULES, isModuleOnlyType, } from "./figures/index.js";
+import { SHAPED_SCATTER_FIGURE } from "./figures/pca.js";
+import { formatNumberCell, selectNumberKind } from "./number-format.js";
+export { transformColumn };
 /**
  * The category values that carry no finding.
  *
@@ -53,6 +61,23 @@ function isNullCategory(value) {
 function nullCategoryStyle(name) {
     return isNullCategory(name) ? { itemStyle: { color: MUTED_CHART_COLOR } } : {};
 }
+/**
+ * The color of one category under a focus, or `undefined` when the chart declares no focus.
+ *
+ * A focus names the categories of the finding. Each named category takes the one focus color, and every
+ * other category takes the muted color. Thus a reader sees the finding first, and the rest reads as its
+ * reference.
+ */
+function focusColor(focus, category) {
+    if (focus === undefined || category === undefined)
+        return undefined;
+    return focus.has(String(category)) ? FOCUS_CHART_COLOR : MUTED_CHART_COLOR;
+}
+/** The item style of one grouped series: the focus color where the chart declares a focus, else the null rule. */
+function categoryStyle(name, focus) {
+    const color = focusColor(focus, name);
+    return color !== undefined ? { itemStyle: { color } } : nullCategoryStyle(name);
+}
 /**
  * True when one declared series draws its bars across the plot.
  *
@@ -62,25 +87,6 @@ function nullCategoryStyle(name) {
 function isHorizontalBar(series) {
     return series.form === "bar" && series.orientation === "horizontal";
 }
-/**
- * The ten-stop viridis ramp for a heatmap `visualMap`. The stops run dark to light, thus a continuous
- * scale maps the low value to `#440154` and the high value to `#fde725`.
- */
-const VIRIDIS = ["#440154", "#482777", "#3e4989", "#31688e", "#26828e", "#1f9e89", "#35b779", "#6ece58", "#b5de2b", "#fde725"];
-/**
- * The distance in pixels between the x axis line and its name.
- *
- * The name sits under the middle of the axis, thus the gap must clear the axis labels below the line. The
- * value is a fixed constant, thus the derivation stays deterministic.
- */
-const X_AXIS_NAME_GAP = 34;
-/**
- * The label position of a vertical guide line.
- *
- * The start of such a line sits at the x axis, and its end sits at the top of the plot. The top is the band
- * of the y-axis title, thus a label there reads over the title.
- */
-const VERTICAL_LABEL_POSITION = "start";
 /**
  * The label position of a vertical guide band.
  *
@@ -112,54 +118,88 @@ const LABEL_CONTAINING_GRID = { containLabel: true };
  * The axis counts rows, thus a fractional tick names no count. `minInterval` holds each tick a whole count
  * apart from the next one, and it is the one static field that bounds the tick precision of a value axis.
  */
-const COUNT_AXIS = { type: "value", name: "Count", minInterval: 1 };
+const COUNT_AXIS = { type: "value", minInterval: 1, ...axisNameFields("y", "Count") };
 /**
- * The name fields of an x axis.
- *
- * `normalizeEchartSpec` holds the grid to a right margin of 5 percent. The ECharts default `nameLocation`
- * of `"end"` puts the name at the right end of the axis, thus the name runs past that margin and the panel
- * clips it. A centered name sits under the middle of the axis, and no margin can cut it.
+ * The x name fields of a value axis. The helper names the rule of the page: the name sits under the middle
+ * of the axis, where no grid margin can cut it.
  */
 function xAxisName(title) {
-    return { name: title, nameLocation: "middle", nameGap: X_AXIS_NAME_GAP };
+    return axisNameFields("x", title);
+}
+/** The y name fields of a value axis: the title turned 90 degrees, in the middle beside the axis. */
+function yAxisName(title) {
+    return axisNameFields("y", title);
 }
 /**
- * The title of the axis that reads one column, most specific first: the declared label of the column, the
- * semantic title of the preset, then the raw column name.
+ * Derive the ECharts option for a chart block, then pass it through `normalizeEchartSpec`.
  *
- * A declared label answers for this one column of this one artifact, and a preset title answers for every
- * chart of its kind. Thus the label outranks the preset. The caller resolves an agent axes title over this
- * whole chain, because that title names this one axis of this one block.
+ * The normalizer owns the bottom legend and the axis-label discipline. Thus the derivation sets no `title`,
+ * and it sets a `legend` only where an auxiliary series would show an orphan entry. The theme palette assigns
+ * the series colors by their order, and a null category or a focus is the one case that names a color.
  *
- * A transformed channel reads a derived name such as `neg_log10(padj)`, which no declaration keys. Thus the
- * axis of a transform keeps the name that states the transform, and it never states the raw quantity.
+ * The axis of a channel names the label that the binding declares for its column. The semantic title of a
+ * preset answers next, and the raw column name answers last.
  */
-function axisTitle(labels, column, preset) {
-    return declaredForColumn(labels, column) ?? preset ?? column;
+export function deriveChartOption(block, rows, columns, inputs = {}, opts = DEFAULT_CHART_OPTS) {
+    return deriveRaw(block, rows, columns, undefined, inputs, opts).map((option) => reportLayout(option, block.title));
 }
+/** The options of every render: the registered figure modules. */
+export const DEFAULT_CHART_OPTS = { figures: FIGURE_MODULES };
 /**
- * The legend text of one category value: the value with each underscore as a space.
+ * The layout discipline of a report chart: the rules of `normalizeEchartSpec` with no toolbox, the upright
+ * category labels thinned to the plot width, then the figure rules that read the whole option.
  *
- * An analysis column carries a machine category such as `up_in_nonresponders`, and a legend reads for a
- * person. The replacement reads no locale, thus the same value gives the same text on every host. The raw
- * value stays in the data rows, thus the provenance loses nothing. No hover carries the raw text, because a
- * legend formatter is a function and the option rides as inline JSON.
+ * The chart card carries the export row, thus the save button of the discipline has no place on the page.
+ * Every other rule of the discipline stays. The normalizer gives a copy, thus the delete touches no input.
  */
-function categoryName(value) {
-    return String(value).replaceAll("_", " ");
+function reportLayout(raw, title) {
+    const { [FIGURE_BODY_MEMBER]: _body, ...rest } = raw;
+    const option = normalizeEchartSpec(rest, { title });
+    delete option.toolbox;
+    return applyFigureRules(thinnedLabels(option));
 }
 /**
- * Derive the ECharts option for a chart block, then pass it through `normalizeEchartSpec`.
+ * The height of the page chart body of one derived option, in pixels.
  *
- * The normalizer owns the bottom legend, the save action, and the axis-label discipline. Thus the
- * derivation sets no `title`, no `legend`, and no `toolbox`. The theme palette assigns the series colors by
- * their order, and the null category of a preset is the one series that names a color of its own.
+ * A figure that states its body takes that height. A facet lays its panels out three to a row, and each
+ * further row of panels adds the height of one row. Every other chart takes the default body.
  *
- * The axis of a channel names the label that the binding declares for its column. The semantic title of a
- * preset answers next, and the raw column name answers last.
+ * A figure can hold some grids of one figure, for example the count bar and the share bar beside the matrix of
+ * an oncoprint. Only a facet panel states the `same` outer bounds, thus the count reads those grids alone.
  */
-export function deriveChartOption(block, rows, columns) {
-    return deriveRaw(block, rows, columns).map((option) => normalizeEchartSpec(option, { title: block.title }));
+function bodyPxOf(raw, option) {
+    const stated = raw[FIGURE_BODY_MEMBER];
+    if (typeof stated === "number")
+        return Math.max(CHART_BODY_PX, stated);
+    const grids = option.grid;
+    if (!Array.isArray(grids))
+        return CHART_BODY_PX;
+    const panels = grids.filter((grid) => typeof grid === "object" && grid !== null && grid.outerBoundsMode === FACET_BOUNDS_MODE).length;
+    const rows = panels <= 2 ? 1 : Math.ceil(panels / FACET_COLUMNS);
+    return CHART_BODY_PX + (rows - 1) * FACET_ROW_PX;
+}
+/**
+ * The width of the drawn block of an option whose media rules size it, at one body height, or `undefined`
+ * for an option that fills its body.
+ *
+ * A figure of one unit states one rule for each square size, and each rule names the smallest body that holds
+ * it. The runtime applies the largest rule that fits, thus at a body of this height and of any width wider than
+ * the rule, the block takes the width of that rule. The card then narrows the body to that width and centers
+ * it. A rule that names a largest width serves one export size alone, and the page body reads no such rule.
+ */
+function blockWidthOf(option, bodyPx) {
+    const media = option.media;
+    if (!Array.isArray(media))
+        return undefined;
+    let width;
+    for (const rule of media) {
+        const query = typeof rule === "object" && rule !== null ? rule.query : undefined;
+        if (query === undefined || query.maxWidth !== undefined || typeof query.minWidth !== "number" || typeof query.minHeight !== "number")
+            continue;
+        if (query.minHeight <= bodyPx)
+            width = query.minWidth;
+    }
+    return width;
 }
 /**
  * Derive the option of one chart, and read the shared payload of its artifact where the inline form grows
@@ -178,22 +218,37 @@ export function deriveChartOption(block, rows, columns) {
  * five-number summary, an addressed pair, and the upper half of a band are each such a value, thus no
  * descriptor can state one.
  */
-export function deriveChartRender(block, rows, columns, target) {
-    const first = renderPass(block, target, (collector) => deriveRaw(block, rows, columns, collector));
+export function deriveChartRender(block, rows, columns, target, inputs = {}, opts = DEFAULT_CHART_OPTS) {
+    const first = renderPass(block, target, (collector) => deriveRaw(block, rows, columns, collector, inputs, opts));
     if (first.isErr()) {
         return err(first.error);
     }
-    const quick = perRowQuickPath(block);
+    const quick = perRowQuickPath(block, opts);
     if (first.value.readsPayload || !first.value.overBound || quick === undefined) {
-        return ok({ option: first.value.option, readsPayload: first.value.readsPayload });
+        return ok(chartRender(first.value));
     }
-    const second = renderPass(block, target, (collector) => deriveLabeled(block.id, quick.chartType, quick.encoding, rows, columns, block.binding.columnLabels, block.orientation, collector));
+    const second = renderPass(block, target, (collector) => deriveAsComposition(block.id, quick.chartType, quick.encoding, rows, columns, block.binding.columnLabels, block.orientation, {
+        collector,
+        focus: block.focus,
+        meanings: block.binding.columnMeanings,
+    }));
     if (second.isErr() || !second.value.readsPayload) {
         // The composition refused, or it described no build. The first option is a whole chart, thus the
         // page keeps it and the render reports no problem that the base rule did not raise.
-        return ok({ option: first.value.option, readsPayload: first.value.readsPayload });
+        return ok(chartRender(first.value));
     }
-    return ok({ option: second.value.option, readsPayload: true });
+    return ok(chartRender(second.value));
+}
+/** The render of one pass: the page option, the payload flag, the full-row option, and the body box. */
+function chartRender(pass) {
+    const widthPx = blockWidthOf(pass.inline, pass.bodyPx);
+    return {
+        option: pass.option,
+        readsPayload: pass.readsPayload,
+        inline: pass.inline,
+        bodyPx: pass.bodyPx,
+        ...(widthPx !== undefined ? { widthPx } : {}),
+    };
 }
 /**
  * Run one derivation, normalize it, and route it onto the payload where the inline form passes the bound.
@@ -205,31 +260,51 @@ export function deriveChartRender(block, rows, columns, target) {
 function renderPass(block, target, derive) {
     const collector = { columns: target.columns, series: [], failed: false };
     return derive(collector).map((raw) => {
-        const option = normalizeEchartSpec(raw, { title: block.title });
+        const option = reportLayout(raw, block.title);
+        const bodyPx = bodyPxOf(raw, option);
         const series = option.series;
         if (!Array.isArray(series) || JSON.stringify(option).length <= CHART_INLINE_OPTION_BOUND) {
-            return { option, readsPayload: false, overBound: false };
+            return { option, inline: option, readsPayload: false, overBound: false, bodyPx };
         }
-        if (collector.failed || collector.series.length === 0 || collector.series.length !== series.length) {
-            return { option, readsPayload: false, overBound: true };
+        if (collector.failed || collector.series.length === 0 || !describesLead(series, collector)) {
+            return { option, inline: option, readsPayload: false, overBound: true, bodyPx };
         }
-        return { option: sourcedOption(option, series, collector, target.key), readsPayload: true, overBound: true };
+        return { option: sourcedOption(option, series, collector, target.key), inline: option, readsPayload: true, overBound: true, bodyPx };
     });
 }
+/**
+ * True when the descriptors of a pass describe the leading series of the option.
+ *
+ * A descriptor for each series describes the whole option. A figure can add series after the output of its
+ * composition, for example the band of a QQ plot. Such a series holds a value that no cell gives, thus it keeps
+ * its inline data, and the descriptors then describe the composition output alone. The names of the leading
+ * series must match that output, thus a figure that puts a series before it keeps the whole chart inline.
+ */
+function describesLead(series, collector) {
+    const described = collector.series.length;
+    if (described === series.length)
+        return true;
+    const composed = collector.composed;
+    return (composed !== undefined &&
+        composed.length === described &&
+        described < series.length &&
+        composed.every((name, index) => series[index].name === name));
+}
 /**
  * The quick path of one block that draws one point for one row, or `undefined` for every other block.
  *
- * A composition, a preset, and a labeled quick path each derive through the composition already, thus each
- * one states its own build on the first pass. A histogram, a box, a heatmap, and a pie each hold a value
- * that no cell of the table gives, thus none of them takes a second pass.
+ * A composition, a preset, and a quick path that names a point or a wide channel each derive through the
+ * composition already, thus each one states its own build on the first pass. A histogram, a box, a heatmap,
+ * a pie, a violin, the stacked forms, and a radar each hold a value that no cell of the table gives, thus
+ * none of them takes a second pass.
  */
-function perRowQuickPath(block) {
+function perRowQuickPath(block, opts) {
     const chartType = block.chartType;
     const encoding = block.encoding;
-    if (block.composition !== undefined || chartType === undefined || encoding === undefined || encoding.label !== undefined) {
+    if (block.composition !== undefined || chartType === undefined || encoding === undefined || routesThroughComposition(encoding)) {
         return undefined;
     }
-    if (isPresetChartType(chartType) || LABELED_FORMS[chartType] === undefined) {
+    if (opts.figures[chartType] !== undefined || isModuleOnlyType(chartType) || LABELED_FORMS[chartType] === undefined || encoding.shape !== undefined) {
         return undefined;
     }
     return { chartType, encoding };
@@ -237,9 +312,9 @@ function perRowQuickPath(block) {
 /**
  * The option of a chart that reads the payload: the derived option with no row, and the data source.
  *
- * Each series keeps every field that the derivation gave it, and it loses its data alone. Thus the axes,
- * the names, the colors, and the symbol ladder of a dense chart read as they read inline, and the page
- * fills one member of each series.
+ * Each described series keeps every field that the derivation gave it, and it loses its data alone. Thus
+ * the axes, the names, the colors, and the symbol ladder of a dense chart read as they read inline, and the
+ * page fills one member of each series. A series past the descriptors keeps its inline data.
  */
 function sourcedOption(option, series, collector, key) {
     const source = {
@@ -249,21 +324,23 @@ function sourcedOption(option, series, collector, key) {
     };
     return {
         ...option,
-        series: series.map((entry) => ({ ...entry, data: [] })),
+        series: series.map((entry, index) => (index < collector.series.length ? { ...entry, data: [] } : entry)),
         [CHART_SOURCE_MEMBER]: source,
     };
 }
 /**
  * Dispatch the grammar of one chart block.
  *
- * A composition derives directly. A preset expands into a composition first. A quick path that names a
- * point routes through a one-series composition, because a base rule builds a bare pair and only a
- * composition item carries a name. Every other quick path reaches the fixed rule of its base type.
+ * A composition derives directly. A chart type with a figure module derives through its module. A preset
+ * with no module refuses, because no other path draws it. A quick path that names a point or a wide channel
+ * routes through a one-series
+ * composition, because a base rule builds a bare pair and only a composition item carries a name, a color, a
+ * size, an interval, or a panel. Every other quick path reaches the fixed rule of its base type.
  *
- * The collector rides the composition path alone. A base rule collects nothing, thus its chart keeps its
- * inline data whatever its size.
+ * The collector rides the composition path and the composition of a figure alone. A base rule collects
+ * nothing, thus its chart keeps its inline data whatever its size.
  */
-function deriveRaw(block, rows, columns, collector) {
+function deriveRaw(block, rows, columns, collector, inputs, opts) {
     const labels = block.binding.columnLabels;
     const orientation = block.orientation;
     if (orientation !== undefined && block.composition !== undefined) {
@@ -276,8 +353,15 @@ function deriveRaw(block, rows, columns, collector) {
         // A composition draws its own guide lines, thus a declared pair beside one moves nothing.
         return err(problem(block.id, "A composition draws its own guide lines, thus the chart carries no thresholds beside it."));
     }
+    const meanings = block.binding.columnMeanings;
     if (block.composition !== undefined) {
-        return deriveComposition(block.id, block.composition, rows, columns, labels, { collector });
+        const unread = ["statistics", "track", "trees"].find((member) => declaresMember(block, member));
+        if (unread !== undefined) {
+            // A composition draws the series of one grid over one table, thus it places no statistic and it
+            // draws no second table.
+            return err(problem(block.id, `A composition reads no ${unread}. ${readersSentence(unread)}`));
+        }
+        return deriveComposition(block.id, block.composition, rows, columns, labels, { collector, focus: block.focus, meanings });
     }
     const chartType = block.chartType;
     const encoding = block.encoding;
@@ -286,30 +370,330 @@ function deriveRaw(block, rows, columns, collector) {
         // value that reaches the renderer without a parse.
         return err(problem(block.id, "The chart carries neither a chart type with an encoding, nor a composition."));
     }
-    if (orientation !== undefined && chartType !== "bar") {
+    if (orientation !== undefined && !BAR_FORMS.has(chartType)) {
         // A silent ignore would teach the author a field that does nothing, thus the fault is stated.
-        return err(problem(block.id, `The ${chartType} chart takes no orientation. An orientation is a rule of the bar alone.`));
+        return err(problem(block.id, `The ${chartType} chart takes no orientation. An orientation is a rule of the bar forms alone.`));
+    }
+    if (block.thresholds !== undefined && chartType !== "volcano" && chartType !== "ma") {
+        // The pair states a significance cut and an effect cut. The volcano reads both, and the ma reads the
+        // significance cut.
+        return err(problem(block.id, `The ${chartType} chart takes no thresholds. The thresholds are a rule of the volcano and the ma alone.`));
+    }
+    // A scatter with a shape draws through the shape draw of the PCA, because no base rule draws a symbol.
+    const figure = opts.figures[chartType] ?? (chartType === "scatter" && encoding.shape !== undefined ? SHAPED_SCATTER_FIGURE : undefined);
+    if (figure !== undefined) {
+        return deriveFigure(block, chartType, figure, rows, columns, collector, inputs);
     }
-    if (block.thresholds !== undefined && chartType !== "volcano") {
-        // The pair states a significance cut and an effect cut. The volcano is the one type that reads both.
-        return err(problem(block.id, `The ${chartType} chart takes no thresholds. A threshold pair is a rule of the volcano alone.`));
+    if (isModuleOnlyType(chartType)) {
+        return err(problem(block.id, `The ${chartType} figure is not available yet. Draw the table with a base chart type or a composition.`));
     }
-    if (isPresetChartType(chartType)) {
-        return derivePreset(block.id, chartType, encoding, rows, columns, labels, block.thresholds, collector);
+    const unread = unreadFigureMember(block);
+    if (unread !== undefined) {
+        return err(problem(block.id, memberFault(chartType, unread)));
     }
-    if (encoding.label !== undefined) {
-        return deriveLabeled(block.id, chartType, encoding, rows, columns, labels, orientation, collector);
+    const fault = quickPathFault(chartType, encoding, block.focus);
+    if (fault !== undefined) {
+        return err(problem(block.id, fault));
+    }
+    // A stacked form draws its own panels, because a composition series stacks no parts.
+    const stackedFacet = STACKED_FORMS.has(chartType) ? encoding.facet : undefined;
+    if (routesThroughComposition(stackedFacet === undefined ? encoding : { ...encoding, facet: undefined })) {
+        return deriveAsComposition(block.id, chartType, encoding, rows, columns, labels, orientation, { collector, focus: block.focus, meanings });
+    }
+    if (stackedFacet !== undefined && channelTransform(stackedFacet) !== undefined) {
+        return err(problem(block.id, FACET_TRANSFORM));
     }
     const quick = resolveQuickPath(block.id, chartType, encoding, rows, columns, labels, orientation);
     if (quick.isErr())
         return err(quick.error);
-    return deriveBase(quick.value.block, quick.value.rows, columns);
+    return deriveBase({
+        ...quick.value.block,
+        meanings,
+        ...(block.focus !== undefined ? { focus: block.focus } : {}),
+        ...(stackedFacet !== undefined ? { facet: channelColumn(stackedFacet) } : {}),
+    }, quick.value.rows, columns);
+}
+/** The members that the canonical figures add. A chart type with no figure module reads none of them. */
+const FIGURE_ONLY_MEMBERS = ["shape", "p", "censor", "risk", "hit", "metric", "tracks", "statistics", "track", "trees"];
+/** The first member of a block that the canonical figures add, or `undefined` when the block declares none. */
+function unreadFigureMember(block) {
+    return FIGURE_ONLY_MEMBERS.find((member) => declaresMember(block, member));
+}
+/** True when the block declares one member: a channel of its encoding, the statistics, the track, the trees, or the focus. */
+function declaresMember(block, member) {
+    switch (member) {
+        case "statistics":
+            return block.statistics !== undefined;
+        case "track":
+            return block.track !== undefined;
+        case "trees":
+            return block.trees !== undefined;
+        case "focus":
+            return block.focus !== undefined;
+        default:
+            return block.encoding?.[member] !== undefined;
+    }
+}
+/** Each member that one block declares, in the order of the grammar. */
+function declaredMembers(block) {
+    const members = [];
+    for (const key of Object.keys(block.encoding ?? {})) {
+        if (block.encoding?.[key] !== undefined)
+            members.push(key);
+    }
+    for (const member of ["statistics", "track", "trees", "focus"]) {
+        if (declaresMember(block, member))
+            members.push(member);
+    }
+    return members;
+}
+/** The sentence that names the chart types that read one member that the canonical figures add. */
+function readersSentence(member) {
+    const readers = FIGURE_MEMBER_READERS[member];
+    const list = readers.length <= 2 ? readers.join(" and ") : `${readers.slice(0, -1).join(", ")}, and ${readers[readers.length - 1]}`;
+    switch (member) {
+        case "statistics":
+            return `The statistics are legal on the ${list} charts.`;
+        case "track":
+            return `A track is legal on the ${list} charts.`;
+        case "trees":
+            return `The trees are legal on the ${list} charts.`;
+        default:
+            return `The "${member}" channel is legal on the ${list} charts.`;
+    }
+}
+/**
+ * The refusal of one member that a chart type does not read. A silent drop would teach the author a member
+ * that does nothing, thus the fault is stated, and it names the charts that read the member.
+ */
+function memberFault(chartType, member) {
+    switch (member) {
+        case "statistics":
+            return `The ${chartType} chart prints no statistics. ${readersSentence(member)}`;
+        case "track":
+            return `The ${chartType} chart draws no track. ${readersSentence(member)}`;
+        case "trees":
+            return `The ${chartType} chart draws no tree. ${readersSentence(member)}`;
+        case "focus":
+            return `The ${chartType} chart takes no focus.`;
+        case "shape":
+        case "p":
+        case "censor":
+        case "risk":
+        case "hit":
+        case "metric":
+        case "tracks":
+            return `The ${chartType} chart takes no "${member}" channel. ${readersSentence(member)}`;
+        default:
+            return `The ${chartType} chart takes no "${member}" channel.`;
+    }
+}
+/**
+ * Derive a chart type through its figure module.
+ *
+ * The dispatch refuses each member that the module does not read, and it resolves the statistics and the
+ * track that the module reads. The module then gets the block, the rows, and the context. Its composition
+ * reads the collector of the pass, thus a dense figure reads the shared payload as a composition does.
+ */
+function deriveFigure(block, chartType, figure, rows, columns, collector, inputs) {
+    for (const member of declaredMembers(block)) {
+        if (!figure.reads.has(member)) {
+            return err(problem(block.id, memberFault(chartType, member)));
+        }
+    }
+    const statistics = figureStatistics(block, inputs.statistics);
+    if (statistics.isErr())
+        return err(statistics.error);
+    const track = figureTrack(block, inputs.track);
+    if (track.isErr())
+        return err(track.error);
+    const trees = figureTrees(block, inputs.trees);
+    if (trees.isErr())
+        return err(trees.error);
+    const labels = block.binding.columnLabels;
+    const meanings = block.binding.columnMeanings;
+    const context = {
+        blockId: block.id,
+        labels,
+        meanings,
+        ...(columns !== undefined ? { columns } : {}),
+        statistics: statistics.value,
+        ...(track.value !== undefined ? { track: track.value } : {}),
+        ...(trees.value !== undefined ? { trees: trees.value } : {}),
+        textPx: CHART_PAGE_TEXT_PX,
+        compose: (composition, { keepsRowsInline, ...extras } = {}) => {
+            // A composition with no collector describes no page build, thus the chart keeps its rows inline.
+            const described = keepsRowsInline === true ? undefined : collector;
+            const option = deriveComposition(block.id, composition, rows, columns, labels, { ...extras, collector: described, focus: block.focus, meanings });
+            if (described !== undefined && option.isOk()) {
+                // The names of the composition output let the pass tell it apart from a series that the
+                // figure adds after it.
+                described.composed = Array.isArray(option.value.series) ? option.value.series.map((entry) => String(entry.name)) : [];
+            }
+            return option;
+        },
+    };
+    return figure.derive(block, rows, context);
+}
+/** A `missing-value` problem of a chart whose value entry lacks a part that the block declares. */
+function missingPart(blockId, detail) {
+    return { blockId, kind: "missing-value", detail };
+}
+/**
+ * The statistics of one block with their resolved values and their shown text, in block order.
+ *
+ * The label comes from the block, and the value comes from the entry. A value entry whose count differs from
+ * the block names no value for some statistic, thus it refuses.
+ */
+function figureStatistics(block, values) {
+    const declared = block.statistics ?? [];
+    if (declared.length === 0)
+        return ok([]);
+    if (values === undefined || values.length !== declared.length) {
+        return err(missingPart(block.id, `The chart declares ${declared.length} statistics, and its value entry carries ${values?.length ?? 0}.`));
+    }
+    return ok(declared.map((statistic, index) => ({
+        label: statistic.label,
+        value: values[index].value,
+        text: statisticText(values[index].value, statistic.value.locator.column, statistic.value.unit),
+    })));
+}
+/** The resolved track of one block, or `undefined` for a block that declares none. An entry with no track refuses. */
+function figureTrack(block, value) {
+    const declared = block.track;
+    if (declared === undefined)
+        return ok(undefined);
+    if (value === undefined) {
+        return err(missingPart(block.id, "The chart declares a track, and its value entry carries no track."));
+    }
+    return ok({
+        rows: value.rows,
+        ...(value.columns !== undefined ? { columns: value.columns } : {}),
+        start: declared.start,
+        end: declared.end,
+        label: declared.label,
+        ...(declared.length !== undefined ? { length: declared.length } : {}),
+        labels: declared.binding.columnLabels,
+        meanings: declared.binding.columnMeanings,
+    });
+}
+/**
+ * The resolved tree of each axis of one block, or `undefined` for a block that declares none. An entry that
+ * carries no tree for a declared axis refuses.
+ */
+function figureTrees(block, values) {
+    const declared = block.trees;
+    if (declared === undefined)
+        return ok(undefined);
+    const trees = {};
+    for (const axis of ["x", "y"]) {
+        const tree = declared[axis];
+        if (tree === undefined)
+            continue;
+        const value = values?.[axis];
+        if (value === undefined) {
+            return err(missingPart(block.id, `The chart declares a tree of ${axis}, and its value entry carries no tree of ${axis}.`));
+        }
+        trees[axis] = {
+            rows: value.rows,
+            ...(value.columns !== undefined ? { columns: value.columns } : {}),
+            parent: tree.parent,
+            child: tree.child,
+            height: tree.height,
+            labels: tree.binding.columnLabels,
+            meanings: tree.binding.columnMeanings,
+        };
+    }
+    return ok(trees);
+}
+/** The two stacked forms. Each one draws the facet panels of its own rule. */
+const STACKED_FORMS = new Set(["stacked-bar", "normalized-bar"]);
+/** The chart types that draw bars, and thus read an orientation. */
+const BAR_FORMS = new Set(["bar", "stacked-bar", "normalized-bar"]);
+/** The chart types that draw a continuous color, a size, an interval, and a facet. */
+const COLOR_TYPES = new Set(["scatter", "bar"]);
+const SIZE_TYPES = new Set(["scatter"]);
+const INTERVAL_TYPES = new Set(["scatter", "bar"]);
+const FACET_TYPES = new Set(["scatter", "line", "bar", "stacked-bar", "normalized-bar"]);
+/**
+ * The chart types whose `x` categories can sort by a column. A line and a scatter sort `x` and `y` where the
+ * inferred axis draws categories, and the axis inference refuses the order on a value axis.
+ */
+const ORDERED_X_TYPES = new Set(["bar", "stacked-bar", "normalized-bar", "box", "violin", "line", "scatter"]);
+const ORDERED_Y_TYPES = new Set(["line", "scatter"]);
+/** The chart types that take a focus with or without a group, and the ones that take it over a group alone. */
+const FOCUS_TYPES = new Set(["bar", "stacked-bar", "normalized-bar", "radar"]);
+const GROUPED_FOCUS_TYPES = new Set(["scatter", "line", "box", "violin"]);
+/** The channels of the quick path that never draw a category axis, thus never take an order. */
+const UNORDERED_CHANNELS = ["group", "value", "color", "size", "low", "high", "facet"];
+/** The refusal of a color beside a group. One chart colors by one channel. */
+const COLOR_BESIDE_GROUP = 'A "color" channel beside a "group" channel is a fault, because one chart colors by one channel.';
+/** The refusal of a focus beside a color. One chart colors by one rule. */
+const FOCUS_BESIDE_COLOR = 'A focus beside a "color" channel is a fault, because one chart colors by one rule.';
+/** The refusal of a transform on a facet. A panel names one category of the raw column. */
+const FACET_TRANSFORM = 'The "facet" channel reads categories, thus it takes no transform.';
+/**
+ * The fault of a quick path whose type cannot draw one of its channels, or `undefined` for a sound one.
+ *
+ * Each rule depends on the chart type, thus the grammar admits the channel and the render states the fault.
+ * A silent drop would teach the author a channel that does nothing.
+ */
+function quickPathFault(chartType, encoding, focus) {
+    if (encoding.color !== undefined && !COLOR_TYPES.has(chartType)) {
+        return `The ${chartType} chart takes no "color" channel. A continuous color is legal on a scatter and a bar.`;
+    }
+    if (encoding.color !== undefined && encoding.group !== undefined) {
+        return COLOR_BESIDE_GROUP;
+    }
+    if (encoding.size !== undefined && !SIZE_TYPES.has(chartType)) {
+        return `The ${chartType} chart takes no "size" channel. A size is legal on a scatter alone.`;
+    }
+    if ((encoding.low !== undefined || encoding.high !== undefined) && !INTERVAL_TYPES.has(chartType)) {
+        return `The ${chartType} chart takes no interval. The "low" and "high" channels are legal on a bar and a scatter.`;
+    }
+    if (encoding.facet !== undefined && !FACET_TYPES.has(chartType)) {
+        return `The ${chartType} chart takes no "facet" channel. A facet is legal on a scatter, a line, a bar, and the two stacked forms.`;
+    }
+    for (const name of UNORDERED_CHANNELS) {
+        const channel = encoding[name];
+        if (channel !== undefined && channelOrder(channel) !== undefined) {
+            return `The "${name}" channel draws no category axis, thus it takes no "orderBy".`;
+        }
+    }
+    if (encoding.x !== undefined && channelOrder(encoding.x) !== undefined && !ORDERED_X_TYPES.has(chartType)) {
+        return `The "x" channel of the ${chartType} chart draws no category axis, thus it takes no "orderBy".`;
+    }
+    if (encoding.y !== undefined && channelOrder(encoding.y) !== undefined && !ORDERED_Y_TYPES.has(chartType)) {
+        return `The "y" channel of the ${chartType} chart draws no category axis, thus it takes no "orderBy".`;
+    }
+    if (focus === undefined) {
+        return undefined;
+    }
+    if (encoding.color !== undefined) {
+        return FOCUS_BESIDE_COLOR;
+    }
+    if (FOCUS_TYPES.has(chartType)) {
+        return undefined;
+    }
+    if (GROUPED_FOCUS_TYPES.has(chartType)) {
+        return encoding.group !== undefined ? undefined : `The ${chartType} chart reads a focus over its "group" categories, and it names no "group" channel.`;
+    }
+    return `The ${chartType} chart takes no focus. A focus is legal on a bar, the two stacked forms, a radar, and a grouped scatter, line, box, or violin.`;
+}
+/** True when a quick path names a point or a wide channel, thus it derives through a one-series composition. */
+function routesThroughComposition(encoding) {
+    return (encoding.label !== undefined ||
+        encoding.color !== undefined ||
+        encoding.size !== undefined ||
+        encoding.low !== undefined ||
+        encoding.high !== undefined ||
+        encoding.facet !== undefined);
 }
 /** Dispatch to the per-type derivation. Each type holds one fixed rule. */
 function deriveBase(block, rows, columns) {
     switch (block.chartType) {
         case "bar":
-            return deriveBar(block, rows, columns);
+            return deriveBar(block, rows, columns, "bar");
         case "line":
             return deriveLine(block, rows, columns);
         case "scatter":
@@ -318,36 +702,28 @@ function deriveBase(block, rows, columns) {
             return deriveHistogram(block, rows, columns);
         case "box":
             return deriveBox(block, rows, columns);
-        case "heatmap":
-            return deriveHeatmap(block, rows, columns);
         case "pie":
             return derivePie(block, rows, columns);
+        case "violin":
+            return deriveViolin(block, rows, columns);
+        case "stacked-bar":
+            return deriveBar(block, rows, columns, "stacked");
+        case "normalized-bar":
+            return deriveBar(block, rows, columns, "normalized");
+        case "radar":
+            return deriveRadar(block, rows, columns);
     }
 }
-/** Expand one preset over its two demanded channels, then derive the composition that it gives. */
-function derivePreset(blockId, preset, encoding, rows, columns, labels, thresholds, collector) {
-    const x = requireChannel(blockId, preset, encoding, "x");
-    if (x.isErr())
-        return err(x.error);
-    const y = requireChannel(blockId, preset, encoding, "y");
-    if (y.isErr())
-        return err(y.error);
-    const expansion = expandPreset(preset, x.value, y.value, encoding, thresholds);
-    return deriveComposition(blockId, expansion.composition, rows, columns, labels, {
-        preset: presetAxisTitles(preset, x.value),
-        classification: expansion.classification,
-        collector,
-    });
-}
 /** The quick-path types that map onto one series form. A point of such a chart can carry a name. */
 const LABELED_FORMS = { bar: "bar", line: "line", scatter: "scatter" };
 /**
- * Derive a quick path that names its points, as a composition of one series.
+ * Derive a quick path that names its points or carries a wide channel, as a composition of one series.
  *
  * A histogram bins its rows, a box summarizes them, and a heatmap and a pie both address a pair or a
- * category. None of the four draws one point for one row, thus none of them can carry a per-row name.
+ * category. None of the four draws one point for one row, thus none of them can carry a per-row name. The
+ * caller refused each wide channel on a type that cannot draw it, thus the three forms here carry them all.
  */
-function deriveLabeled(blockId, chartType, encoding, rows, columns, labels, orientation, collector) {
+function deriveAsComposition(blockId, chartType, encoding, rows, columns, labels, orientation, extras) {
     const form = LABELED_FORMS[chartType];
     if (form === undefined) {
         return err(problem(blockId, `The ${chartType} chart draws no point for one row, thus it takes no "label" channel.`));
@@ -367,14 +743,19 @@ function deriveLabeled(blockId, chartType, encoding, rows, columns, labels, orie
                     y: y.value,
                     ...(encoding.group !== undefined ? { group: encoding.group } : {}),
                     ...(encoding.label !== undefined ? { label: encoding.label } : {}),
+                    ...(encoding.color !== undefined ? { color: encoding.color } : {}),
+                    ...(encoding.size !== undefined ? { size: encoding.size } : {}),
+                    ...(encoding.low !== undefined ? { low: encoding.low } : {}),
+                    ...(encoding.high !== undefined ? { high: encoding.high } : {}),
                 },
                 // The caller refused an orientation on every type but the bar, thus the form here is a bar
                 // wherever one arrives. The arrangement crosses onto the series, and no name channel loses it.
                 ...(orientation !== undefined ? { orientation } : {}),
             },
         ],
+        ...(encoding.facet !== undefined ? { facet: encoding.facet } : {}),
     };
-    return deriveComposition(blockId, composition, rows, columns, labels, { collector });
+    return deriveComposition(blockId, composition, rows, columns, labels, extras);
 }
 /**
  * Resolve the quick path of a base chart type: the plain column of each channel, and the rows that the
@@ -410,7 +791,26 @@ function resolveQuickPath(blockId, chartType, encoding, rows, columns, labels, o
         resolved[channel] = name;
         derived.push({ column, name, transform });
     }
-    const block = { id: blockId, chartType, encoding: resolved, labels, orientation };
+    const orders = {};
+    for (const axis of ["x", "y"]) {
+        const declared = encoding[axis];
+        const order = declared === undefined ? undefined : channelOrder(declared);
+        if (order === undefined)
+            continue;
+        if (rows.length > 0 && !columnPresent(order.by, rows, columns)) {
+            return err(problem(blockId, `The column "${order.by}" is absent from every row.`));
+        }
+        orders[axis] = order;
+    }
+    const block = {
+        id: blockId,
+        chartType,
+        encoding: resolved,
+        orders,
+        labels: withTransformedLabels(labels, derived),
+        meanings: undefined,
+        orientation,
+    };
     return ok({ block, rows: derived.length === 0 ? rows : deriveTransformedRows(rows, derived) });
 }
 /** The four channels of the quick path, in one fixed order. */
@@ -438,7 +838,6 @@ function deriveTransformedRows(rows, derived) {
     }
     return out;
 }
-// ── The per-type derivations ────────────────────────────────────────────────
 /**
  * A category axis, a value axis, and one bar series per group with the pairs of the two channels.
  *
@@ -451,8 +850,11 @@ function deriveTransformedRows(rows, derived) {
  * interval of each axis, and it turns an x label alone, thus a long name on y reads level and none of them
  * drops. The same arrangement inverts that axis and contains its labels, for the reasons that
  * `HORIZONTAL_CATEGORY_AXIS` and `LABEL_CONTAINING_GRID` give.
+ *
+ * The two stacked modes read the same axes, and they demand a group channel, because each one draws the
+ * parts of a category.
  */
-function deriveBar(block, rows, columns) {
+function deriveBar(block, rows, columns, mode) {
     const xResult = requireColumn(block, rows, columns, "x");
     if (xResult.isErr())
         return err(xResult.error);
@@ -461,54 +863,196 @@ function deriveBar(block, rows, columns) {
         return err(yResult.error);
     const x = xResult.value;
     const y = yResult.value;
+    const ordered = orderQuickCategories(block.id, rows, x, block.orders.x);
+    if (ordered.isErr())
+        return err(ordered.error);
+    const categories = ordered.value;
     const horizontal = block.orientation === "horizontal";
-    const categories = firstAppearance(rows.map((row) => row[x]));
-    const series = groupedSeries(rows, block.encoding.group, (groupRows, name) => ({
-        type: "bar",
-        ...(name !== undefined ? { name: categoryName(name) } : {}),
-        ...nullCategoryStyle(name),
-        barGap: 0,
-        data: groupRows.map((row) => (horizontal ? [row[y], row[x]] : [row[x], row[y]])),
-    }));
+    let series;
+    if (mode === "bar") {
+        const group = block.encoding.group;
+        const focused = focusSet(block.id, block.focus, rows.length, group === undefined ? categories : firstAppearance(rows.map((row) => row[group])));
+        if (focused.isErr())
+            return err(focused.error);
+        const focus = focused.value;
+        const bars = groupedSeries(rows, group, (groupRows, name) => ({
+            type: "bar",
+            ...(name !== undefined ? { name: categoryName(name) } : {}),
+            ...categoryStyle(name, focus),
+            barGap: 0,
+            barCategoryGap: BAR_CATEGORY_GAP,
+            data: groupRows.map((row) => {
+                const pair = horizontal ? [row[y], categoryCell(row[x])] : [categoryCell(row[x]), row[y]];
+                // A bar with no group reads the focus over its own categories, thus each item carries its color.
+                const color = group === undefined ? focusColor(focus, row[x]) : undefined;
+                return color === undefined ? pair : { value: pair, itemStyle: { color } };
+            }),
+        }));
+        series = withValueLabels(bars, horizontal, (cell) => valueLabelText(y, cell, block.meanings));
+    }
+    else {
+        if (block.facet !== undefined) {
+            return deriveStackedFacets(block, rows, columns, x, y, categories, mode === "normalized", block.facet);
+        }
+        const stacked = stackedSeries(block, rows, columns, x, y, categories, mode === "normalized");
+        if (stacked.isErr())
+            return err(stacked.error);
+        series = stacked.value;
+    }
+    const valueAxis = { type: "value", ...(mode === "normalized" ? { min: 0, max: 1 } : {}), ...labelRoom(series, horizontal) };
     if (horizontal) {
         return ok({
-            xAxis: { type: "value", ...xAxisName(axisTitle(block.labels, y)) },
-            yAxis: { ...HORIZONTAL_CATEGORY_AXIS, data: categories, name: axisTitle(block.labels, x) },
+            xAxis: { ...valueAxis, ...xAxisName(axisTitle(block.labels, y)) },
+            yAxis: { ...HORIZONTAL_CATEGORY_AXIS, data: categories, ...axisNameFields("y", categoryAxisTitle(block.labels, x)) },
             series,
             grid: { ...LABEL_CONTAINING_GRID },
         });
     }
     return ok({
-        xAxis: { type: "category", data: categories, ...xAxisName(axisTitle(block.labels, x)) },
-        yAxis: { type: "value", name: axisTitle(block.labels, y) },
+        xAxis: { type: "category", data: categories, ...axisNameFields("x", categoryAxisTitle(block.labels, x)) },
+        yAxis: { ...valueAxis, ...yAxisName(axisTitle(block.labels, y)) },
         series,
     });
 }
+/**
+ * The group series of a stacked bar, or of a normalized bar.
+ *
+ * Each series holds one value for each category, in category order, thus the chart runtime stacks the parts
+ * of one category by place. An absent pair holds `null`, and the stack skips it. A repeated pair is a
+ * refusal, because a sum of two rows is an aggregate that no cell gives.
+ *
+ * A normalized bar states the share of each part in the total of its category. The share is a named
+ * summary. A negative part has no share, thus it refuses and names its row. A category whose total is zero
+ * has no share either, thus it draws no bar.
+ *
+ * The stacked forms carry no value label, because the label of one part overlaps the next part.
+ */
+function stackedSeries(block, rows, columns, x, y, categories, normalized, tableGroups) {
+    const groupResult = requireColumn(block, rows, columns, "group");
+    if (groupResult.isErr())
+        return err(groupResult.error);
+    const group = groupResult.value;
+    const groups = tableGroups ?? firstAppearance(rows.map((row) => row[group]));
+    const bound = slotFault(block.id, categories.length, groups.length);
+    if (bound !== undefined)
+        return err(bound);
+    const focused = focusSet(block.id, block.focus, rows.length, groups);
+    if (focused.isErr())
+        return err(focused.error);
+    const parts = new Map();
+    const totals = new Map();
+    for (const [index, row] of rows.entries()) {
+        const key = pairKey(row[x], row[group]);
+        if (parts.has(key)) {
+            return err(problem(block.id, `The ${block.chartType} chart holds the pair (${String(row[x])}, ${String(row[group])}) more than one time.`));
+        }
+        const value = toNumber(row[y]);
+        if (normalized && value !== null && value < 0) {
+            return err(problem(block.id, `The row ${index + 1} holds the negative part ${value}. A share reads parts that are not negative.`));
+        }
+        parts.set(key, value);
+        const categoryKey = cellKey(row[x]);
+        totals.set(categoryKey, (totals.get(categoryKey) ?? 0) + (value ?? 0));
+    }
+    return ok(groups.map((name) => ({
+        type: "bar",
+        name: categoryName(name),
+        ...categoryStyle(name, focused.value),
+        stack: STACK_NAME,
+        data: categories.map((category) => {
+            const part = parts.get(pairKey(category, name)) ?? null;
+            if (!normalized || part === null)
+                return part;
+            const total = totals.get(cellKey(category)) ?? 0;
+            return total === 0 ? null : part / total;
+        }),
+    })));
+}
+/** The stack name of the stacked forms. Each group series names the same stack, thus the parts stack. */
+const STACK_NAME = "total";
+/**
+ * The panels of a faceted stacked form: one panel for each value of the facet column, in first-appearance
+ * order, laid out as the panels of a faceted composition.
+ *
+ * Each panel stacks the parts of its own rows, thus a pair of a category and a group repeats across panels and
+ * never inside one. Each panel lists every category and every group of the table, in one order, thus a group
+ * keeps its color and its place in the stack in each panel. The value axis of every panel reads one range: the
+ * shares of a normalized bar run from 0 to 1, and a stacked bar runs over the largest total of each side of
+ * zero in any panel. The rows stay inline, because the base rule collects no page-side build.
+ */
+function deriveStackedFacets(block, rows, columns, x, y, categories, normalized, facet) {
+    if (rows.length > 0 && !columnPresent(facet, rows, columns)) {
+        return err(problem(block.id, `The column "${facet}" is absent from every row.`));
+    }
+    const groupResult = requireColumn(block, rows, columns, "group");
+    if (groupResult.isErr())
+        return err(groupResult.error);
+    const group = groupResult.value;
+    const groups = firstAppearance(rows.map((row) => row[group]));
+    const names = firstAppearance(rows.map((row) => row[facet]));
+    if (names.length > FACET_PANEL_LIMIT) {
+        return err(problem(block.id, `The facet splits the table into ${names.length} panels. A facet holds ${FACET_PANEL_LIMIT} panels at most, thus a table of fewer groups serves the reader.`));
+    }
+    const series = [];
+    let low = 0;
+    let high = 0;
+    for (const [place, name] of names.entries()) {
+        const panelRows = rows.filter((row) => row[facet] === name);
+        const panel = stackedSeries(block, panelRows, columns, x, y, categories, normalized, groups);
+        if (panel.isErr())
+            return err(panel.error);
+        for (const entry of panel.value) {
+            series.push({ ...entry, stack: `${STACK_NAME}-${place}`, xAxisIndex: place, yAxisIndex: place });
+        }
+        for (const [index] of categories.entries()) {
+            let positive = 0;
+            let negative = 0;
+            for (const entry of panel.value) {
+                // `stackedSeries` gives each series one part or null for each category, in category order.
+                const part = toNumber(entry.data[index]);
+                if (part === null)
+                    continue;
+                if (part > 0)
+                    positive += part;
+                else
+                    negative += part;
+            }
+            high = Math.max(high, positive);
+            low = Math.min(low, negative);
+        }
+    }
+    const [min, max] = normalized ? [0, 1] : roundExtent(low, high);
+    const valueAxis = { type: "value", min, max };
+    const horizontal = block.orientation === "horizontal";
+    const categoryTitle = categoryAxisTitle(block.labels, x);
+    const shared = horizontal
+        ? {
+            xAxis: { ...valueAxis, ...xAxisName(axisTitle(block.labels, y)) },
+            yAxis: { ...HORIZONTAL_CATEGORY_AXIS, data: categories, ...axisNameFields("y", categoryTitle) },
+        }
+        : {
+            xAxis: { type: "category", data: categories, ...axisNameFields("x", categoryTitle) },
+            yAxis: { ...valueAxis, ...yAxisName(axisTitle(block.labels, y)) },
+        };
+    // A table with no row still draws one empty panel, thus the chart keeps its container.
+    const layout = facetLayout(names.length > 0 ? names : [undefined], shared, legendOf(groups.map((name) => categoryName(name))), 0);
+    return ok({ grid: layout.grid, xAxis: layout.xAxis, yAxis: layout.yAxis, series, graphic: layout.graphic, legend: layout.legend });
+}
 /** Per-column axis inference, and one line series per group whose data sorts by x. */
 function deriveLine(block, rows, columns) {
-    const xResult = requireColumn(block, rows, columns, "x");
-    if (xResult.isErr())
-        return err(xResult.error);
-    const yResult = requireColumn(block, rows, columns, "y");
-    if (yResult.isErr())
-        return err(yResult.error);
-    const x = xResult.value;
-    const y = yResult.value;
-    const series = groupedSeries(rows, block.encoding.group, (groupRows, name) => ({
-        type: "line",
-        ...(name !== undefined ? { name: categoryName(name) } : {}),
-        ...nullCategoryStyle(name),
-        showSymbol: false,
-        data: sortByX(groupRows.map((row) => [row[x], row[y]])),
-    }));
-    return ok({
-        xAxis: inferAxis(rows, x, "x", axisTitle(block.labels, x)),
-        yAxis: inferAxis(rows, y, "y", axisTitle(block.labels, y)),
-        series,
-    });
+    return derivePointForm(block, rows, columns, "line");
 }
 /** The same axis inference as a line chart, with no sort and the large-render flags. */
 function deriveScatter(block, rows, columns) {
+    return derivePointForm(block, rows, columns, "scatter");
+}
+/**
+ * The base rule of a line and of a scatter: two inferred axes, and one series per group.
+ *
+ * A line sorts its pairs by x, because a line that zigzags states an order that no column holds. A scatter
+ * keeps the row order, and it takes the large-render path of the chart runtime.
+ */
+function derivePointForm(block, rows, columns, form) {
     const xResult = requireColumn(block, rows, columns, "x");
     if (xResult.isErr())
         return err(xResult.error);
@@ -517,29 +1061,36 @@ function deriveScatter(block, rows, columns) {
         return err(yResult.error);
     const x = xResult.value;
     const y = yResult.value;
-    const series = groupedSeries(rows, block.encoding.group, (groupRows, name) => ({
-        type: "scatter",
+    const group = block.encoding.group;
+    const focused = focusSet(block.id, block.focus, rows.length, group === undefined ? [] : firstAppearance(rows.map((row) => row[group])));
+    if (focused.isErr())
+        return err(focused.error);
+    const xAxis = orderedAxis(block.id, rows, x, "x", axisTitles(block.labels, x), block.orders.x, namesCategories(block.meanings, x));
+    if (xAxis.isErr())
+        return err(xAxis.error);
+    const yAxis = orderedAxis(block.id, rows, y, "y", axisTitles(block.labels, y), block.orders.y, namesCategories(block.meanings, y));
+    if (yAxis.isErr())
+        return err(yAxis.error);
+    // A line runs along its x axis. An ordered category axis sets that order, and every other axis reads the cells.
+    const places = block.orders.x !== undefined ? categoryPlaces(xAxis.value) : undefined;
+    const xText = xAxis.value.type === "category";
+    const yText = yAxis.value.type === "category";
+    const pairOf = (row) => [xText ? categoryCell(row[x]) : row[x], yText ? categoryCell(row[y]) : row[y]];
+    const series = groupedSeries(rows, group, (groupRows, name) => ({
+        type: form,
         ...(name !== undefined ? { name: categoryName(name) } : {}),
-        ...nullCategoryStyle(name),
-        large: true,
-        largeThreshold: 2000,
-        data: groupRows.map((row) => [row[x], row[y]]),
+        ...categoryStyle(name, focused.value),
+        ...(form === "line" ? { showSymbol: false } : { large: true, largeThreshold: 2000 }),
+        data: form === "line" ? sortByX(groupRows.map(pairOf), places) : groupRows.map(pairOf),
     }));
-    return ok({
-        xAxis: inferAxis(rows, x, "x", axisTitle(block.labels, x)),
-        yAxis: inferAxis(rows, y, "y", axisTitle(block.labels, y)),
-        series,
-    });
+    return ok({ xAxis: xAxis.value, yAxis: yAxis.value, series });
 }
 /**
- * The x axis of a histogram.
- *
- * The axis carries a bin range and not the cells of the column, thus it stays bare where the author names
- * nothing. A declared label names the quantity that the bins measure, and the axis then carries it.
+ * The x axis of a histogram. The axis carries the bin range of the column, and a value axis always names its
+ * quantity: the declared label of the column, or the raw column name.
  */
 function histogramXAxis(labels, column) {
-    const label = declaredForColumn(labels, column);
-    return { type: "value", scale: true, ...(label !== undefined ? xAxisName(label) : {}) };
+    return { type: "value", scale: true, ...xAxisName(axisTitle(labels, column)) };
 }
 /** Equal-width bins over the global range. Each group shares the same edges. */
 function deriveHistogram(block, rows, columns) {
@@ -577,7 +1128,13 @@ function deriveHistogram(block, rows, columns) {
         series,
     });
 }
-/** A five-number summary per category, plus a paired scatter series for the outliers. */
+/**
+ * A five-number summary per category, plus a paired scatter series for the outliers.
+ *
+ * A slot of fewer than five values holds no box, thus it draws its median as a short line, and its points
+ * show each value where the chart draws points. A grouped box draws its points on the hidden slot axis, each
+ * point inside the slot of its group.
+ */
 function deriveBox(block, rows, columns) {
     const xResult = requireColumn(block, rows, columns, "x");
     if (xResult.isErr())
@@ -587,21 +1144,53 @@ function deriveBox(block, rows, columns) {
         return err(yResult.error);
     const x = xResult.value;
     const y = yResult.value;
-    const categories = firstAppearance(rows.map((row) => row[x]));
-    const groups = splitGroups(rows, block.encoding.group);
+    const ordered = orderQuickCategories(block.id, rows, x, block.orders.x);
+    if (ordered.isErr())
+        return err(ordered.error);
+    const categories = ordered.value;
+    const groupColumn = block.encoding.group;
+    const groups = groupColumn === undefined ? [{ name: undefined }] : firstAppearance(rows.map((row) => row[groupColumn])).map((name) => ({ name }));
+    const bound = slotFault(block.id, categories.length, groups.length);
+    if (bound !== undefined)
+        return err(bound);
+    const focused = focusSet(block.id, block.focus, rows.length, groups.flatMap((group) => (group.name === undefined ? [] : [group.name])));
+    if (focused.isErr())
+        return err(focused.error);
     const series = [];
-    for (const group of groups) {
+    const buckets = slotBuckets(rows, x, y, groupColumn);
+    const valuesOf = groups.map((group) => categories.map((category) => buckets.get(slotKey(group.name, category)) ?? []));
+    const pointed = drawsDistributionPoints(valuesOf.flat());
+    // The axis jitter centers each point on its category and not on its slot, thus a grouped box places its
+    // points on the slot axis.
+    const grouped = groups.length > 1;
+    const points = [];
+    const slotted = [];
+    for (const [place, group] of groups.entries()) {
+        const color = focusColor(focused.value, group.name);
+        const slot = boxSlot(place, groups.length);
         const boxData = [];
         const outliers = [];
+        const slotPointList = [];
+        const medians = [];
         for (let index = 0; index < categories.length; index++) {
-            const values = numericColumn(group.rows.filter((row) => row[x] === categories[index]), y);
-            // A category with fewer than five values renders as an empty box.
-            if (values.length < 5) {
+            const values = valuesOf[place][index];
+            if (pointed && grouped)
+                slotPointList.push(...slotPoints(values, index, slot));
+            else if (pointed) {
+                for (const value of values)
+                    points.push([index, value]);
+            }
+            if (values.length < BOX_MIN_VALUES) {
                 boxData.push("-");
+                if (values.length > 0)
+                    medians.push(medianLine(values, index, slot));
                 continue;
             }
             const summary = boxSummary(values);
             boxData.push(summary.box);
+            // The points of a category already draw each outlier.
+            if (pointed)
+                continue;
             for (const outlier of summary.outliers) {
                 outliers.push([index, outlier]);
             }
@@ -609,192 +1198,1121 @@ function deriveBox(block, rows, columns) {
         series.push({
             type: "boxplot",
             ...(group.name !== undefined ? { name: categoryName(group.name) } : {}),
+            // A box draws its median in the border color, thus a focus colors the border and never the fill.
+            ...(color !== undefined ? { itemStyle: { borderColor: color } } : {}),
             data: boxData,
         });
-        // The outlier scatter pairs with its box series, thus it only appears when an outlier exists.
+        // The outlier scatter pairs with its box series, thus it only appears when an outlier exists. A box with
+        // no group takes no palette slot by name, thus its outliers take the ink of the points.
         if (outliers.length > 0) {
+            const outlierColor = color ?? (group.name === undefined ? CHART_INK : undefined);
             series.push({
                 type: "scatter",
                 ...(group.name !== undefined ? { name: categoryName(group.name) } : {}),
+                ...(outlierColor !== undefined ? { itemStyle: { color: outlierColor } } : {}),
                 symbolSize: 4,
                 data: outliers,
             });
         }
+        const onSlots = slotSeries(group.name === undefined ? undefined : categoryName(group.name), slotPointList, medians, grouped ? color : CHART_INK);
+        if (onSlots !== undefined)
+            slotted.push(onSlots);
+    }
+    const pointName = groups[0]?.name;
+    if (points.length > 0)
+        series.push(pointSeries(points, pointName === undefined ? undefined : categoryName(pointName)));
+    series.push(...slotted);
+    const categoryAxis = {
+        type: "category",
+        data: categories,
+        ...axisNameFields("x", categoryAxisTitle(block.labels, x)),
+        ...(points.length > 0 ? JITTERED_AXIS : {}),
+    };
+    return ok({
+        xAxis: slotted.length > 0 ? [categoryAxis, slotAxis(categories.length)] : categoryAxis,
+        yAxis: { type: "value", ...yAxisName(axisTitle(block.labels, y)) },
+        series,
+    });
+}
+/** The fewest values of a slot that draw a box. */
+const BOX_MIN_VALUES = 5;
+/** The share of each box slot that the chart runtime leaves as the gap between two boxes. */
+const BOX_GAP_SHARE = 0.3;
+/**
+ * The slot of one box of a grouped box chart, as the chart runtime lays out its boxes: the boxes of one category
+ * share 80 percent of the band, and a gap of 30 percent of one share sits between two boxes.
+ */
+function boxSlot(place, count) {
+    const gap = (GROUP_SPAN / count) * BOX_GAP_SHARE;
+    const width = (GROUP_SPAN - gap * (count - 1)) / count;
+    return { center: roundFraction(width / 2 - GROUP_SPAN / 2 + place * (gap + width)), width: roundFraction(width) };
+}
+/** The slot of one violin of a grouped violin chart: the slot of a grouped bar. */
+function violinSlot(place, count) {
+    return { center: slotOffset(place, count), width: roundFraction(GROUP_SPAN / count) };
+}
+/** A fraction of a band, rounded to keep a float residue out of the option. */
+function roundFraction(value) {
+    return Math.round(value * 1e6) / 1e6;
+}
+/**
+ * The hidden value axis over the category bands of a box or a violin. The value `i` sits at the center of the
+ * category `i`, as on the category axis, thus a point or a median line states its place inside a slot.
+ */
+function slotAxis(count) {
+    return { type: "value", min: -0.5, max: count - 0.5, show: false };
+}
+/** The part of its slot that the points of one slot spread over, and the part that a median line spans. */
+const SLOT_POINT_SPREAD = 0.7;
+const MEDIAN_LINE_SPAN = 0.5;
+/**
+ * The step of the spread of the points of one slot: the golden ratio conjugate. The places of the successive
+ * points fill the slot evenly and never repeat, and the same values give the same places.
+ */
+const SPREAD_STEP = 0.6180339887;
+/** The stroke width in pixels of the median line of a thin slot. */
+const MEDIAN_LINE_WIDTH_PX = 2;
+/** The points of one slot as `[band place, value]`, each value at its place across the slot, in row order. */
+function slotPoints(values, index, slot) {
+    return values.map((value, place) => {
+        const spread = ((((place + 0.5) * SPREAD_STEP) % 1) - 0.5) * SLOT_POINT_SPREAD * slot.width;
+        return [roundFraction(index + slot.center + spread), value];
+    });
+}
+/** The median line of one slot that draws no shape: a short line across the middle of the slot at the median. */
+function medianLine(values, index, slot) {
+    const median = quantileType7([...values].sort((a, b) => a - b), 0.5);
+    const half = (MEDIAN_LINE_SPAN * slot.width) / 2;
+    return [{ coord: [roundFraction(index + slot.center - half), median] }, { coord: [roundFraction(index + slot.center + half), median] }];
+}
+/**
+ * The series of one group on the slot axis: its points, and the median line of each slot that draws no shape.
+ * A group with neither gives no series.
+ *
+ * A group takes the color of its name, as its box or its violin does, thus a thin slot reads as its group. A
+ * chart with no group draws in the ink. The median line takes the color of its series.
+ */
+function slotSeries(name, points, medians, color) {
+    if (points.length === 0 && medians.length === 0)
+        return undefined;
+    return {
+        ...pointSeries(points, name),
+        itemStyle: { ...(color !== undefined ? { color } : {}), opacity: DISTRIBUTION_POINT_OPACITY },
+        xAxisIndex: 1,
+        ...(medians.length > 0
+            ? {
+                markLine: {
+                    silent: true,
+                    symbol: "none",
+                    label: { show: false },
+                    lineStyle: { width: MEDIAN_LINE_WIDTH_PX, type: "solid", opacity: 1 },
+                    data: medians.map((line) => [...line]),
+                },
+            }
+            : {}),
+    };
+}
+/**
+ * The count of values up to which one category of a box or a violin draws each value as a point. A summary
+ * of a few values hides them, and past the count the points paint one band over the shape.
+ */
+const DISTRIBUTION_POINT_LIMIT = 200;
+/**
+ * True when a box or a violin draws its points: each category holds `DISTRIBUTION_POINT_LIMIT` values or
+ * fewer. One chart draws the points on every category or on none, thus no category reads as a summary alone
+ * beside a category that shows each value.
+ */
+function drawsDistributionPoints(categoryValues) {
+    return categoryValues.every((values) => values.length <= DISTRIBUTION_POINT_LIMIT);
+}
+/** The symbol size and the opacity of each point over a box or a violin. The shape stays readable under them. */
+const DISTRIBUTION_POINT_SIZE = 3;
+const DISTRIBUTION_POINT_OPACITY = 0.6;
+/**
+ * The category axis of a box or a violin with points: the chart runtime spreads the points of each category
+ * across its band. `jitterOverlap: false` moves a point aside only where it overlaps an earlier one, thus a
+ * point stays at its value and the spread shows the density.
+ */
+const JITTERED_AXIS = { jitter: 24, jitterOverlap: false, jitterMargin: 0 };
+/** The points over a box or a violin: one small point in the ink for each value, as `[category, value]`. */
+function pointSeries(points, name) {
+    return {
+        type: "scatter",
+        ...(name !== undefined ? { name } : {}),
+        silent: true,
+        symbolSize: DISTRIBUTION_POINT_SIZE,
+        itemStyle: { color: CHART_INK, opacity: DISTRIBUTION_POINT_OPACITY },
+        z: 5,
+        data: points,
+    };
+}
+/** One slice per group category, in first-appearance order. A repeated category refuses. */
+function derivePie(block, rows, columns) {
+    for (const channel of ["group", "value"]) {
+        if (block.encoding[channel] === undefined) {
+            // An author reaches for `x` on a pie as on a bar, thus the refusal names the two channels of a slice.
+            return err(problem(block.id, `The pie chart reads no "x" and no "y". It names its slices with the "group" column and sizes them with the "value" column. Give a column for the "${channel}" channel.`));
+        }
+    }
+    const groupResult = requireColumn(block, rows, columns, "group");
+    if (groupResult.isErr())
+        return err(groupResult.error);
+    const valueResult = requireColumn(block, rows, columns, "value");
+    if (valueResult.isErr())
+        return err(valueResult.error);
+    const groupColumn = groupResult.value;
+    const valueColumn = valueResult.value;
+    const seen = new Set();
+    const data = [];
+    for (const row of rows) {
+        const name = String(row[groupColumn]);
+        if (seen.has(name)) {
+            return err(problem(block.id, `The pie holds the category "${name}" more than one time.`));
+        }
+        seen.add(name);
+        const numeric = toNumber(row[valueColumn]);
+        data.push({ name, value: numeric === null ? row[valueColumn] : numeric });
+    }
+    return ok({
+        series: [{ type: "pie", radius: "55%", data }],
+    });
+}
+/**
+ * One violin for each category and group: the Gaussian density of the values, and the inner mark of the
+ * quartiles and the median.
+ *
+ * The outline is a custom series with the `outline` renderer, and the inner mark is a custom series with the
+ * `interval` renderer. The half-width at each grid point is the density over the largest density of the
+ * chart, times the half of one group slot. Thus the widest violin of the chart fills its slot, and each other
+ * violin reads against it. A group channel draws one violin for each group, offset inside the band as the
+ * grouped bar is.
+ *
+ * A category with fewer than five values, or with a bandwidth of zero, holds no density worth a shape, thus
+ * it draws its median as a short line, and its points show each value where the chart draws points. A grouped
+ * violin draws its points on the hidden slot axis, each point inside the slot of its group.
+ */
+function deriveViolin(block, rows, columns) {
+    const xResult = requireColumn(block, rows, columns, "x");
+    if (xResult.isErr())
+        return err(xResult.error);
+    const yResult = requireColumn(block, rows, columns, "y");
+    if (yResult.isErr())
+        return err(yResult.error);
+    const x = xResult.value;
+    const y = yResult.value;
+    const ordered = orderQuickCategories(block.id, rows, x, block.orders.x);
+    if (ordered.isErr())
+        return err(ordered.error);
+    const categories = ordered.value;
+    const groupColumn = block.encoding.group;
+    const groups = groupColumn === undefined ? [{ name: undefined }] : firstAppearance(rows.map((row) => row[groupColumn])).map((name) => ({ name }));
+    const bound = slotFault(block.id, categories.length, groups.length);
+    if (bound !== undefined)
+        return err(bound);
+    const named = groups.flatMap((group) => (group.name === undefined ? [] : [group.name]));
+    const focused = focusSet(block.id, block.focus, rows.length, named);
+    if (focused.isErr())
+        return err(focused.error);
+    const buckets = slotBuckets(rows, x, y, groupColumn);
+    const shapes = groups.map((group) => categories.flatMap((category, index) => {
+        const shape = violinShape(buckets.get(slotKey(group.name, category)) ?? []);
+        return shape === undefined ? [] : [{ ...shape, category: index }];
+    }));
+    let largest = 0;
+    for (const shape of shapes.flat()) {
+        for (const density of shape.densities)
+            largest = Math.max(largest, density);
+    }
+    const valuesOf = groups.map((group) => categories.map((category) => buckets.get(slotKey(group.name, category)) ?? []));
+    const pointed = drawsDistributionPoints(valuesOf.flat());
+    // The axis jitter centers each point on its category and not on its slot, thus a grouped violin places its
+    // points on the slot axis.
+    const grouped = groups.length > 1;
+    const slotted = [];
+    const series = [];
+    const legend = [];
+    for (const [place, group] of groups.entries()) {
+        const name = group.name !== undefined ? categoryName(group.name) : axisTitle(block.labels, y);
+        const offset = slotOffset(place, groups.length);
+        const slot = violinSlot(place, groups.length);
+        const shaped = new Set(shapes[place].map((shape) => shape.category));
+        const medians = valuesOf[place].flatMap((values, index) => (shaped.has(index) || values.length === 0 ? [] : [medianLine(values, index, slot)]));
+        const slotPointList = pointed && grouped ? valuesOf[place].flatMap((values, index) => slotPoints(values, index, slot)) : [];
+        const color = focusColor(focused.value, group.name);
+        const onSlots = slotSeries(name, slotPointList, medians, grouped ? color : CHART_INK);
+        if (onSlots !== undefined)
+            slotted.push(onSlots);
+        const halfWidth = VIOLIN_HALF_WIDTH / groups.length;
+        series.push({
+            type: "custom",
+            name,
+            renderItem: OUTLINE_RENDERER,
+            silent: true,
+            encode: { x: 0, y: [1, 2] },
+            ...(color !== undefined ? { itemStyle: { color } } : nullCategoryStyle(group.name)),
+            data: shapes[place].map((shape) => [
+                shape.category,
+                shape.grid[0],
+                shape.grid[shape.grid.length - 1],
+                offset,
+                ...shape.grid.flatMap((value, point) => [roundWidth(largest > 0 ? (shape.densities[point] / largest) * halfWidth : 0), value]),
+            ]),
+        });
+        series.push({
+            type: "custom",
+            name,
+            renderItem: INTERVAL_RENDERER,
+            silent: true,
+            encode: { x: 0, y: [1, 2, 3] },
+            data: shapes[place].map((shape) => [shape.category, shape.median, shape.q1, shape.q3, 1, offset, 1]),
+        });
+        legend.push(name);
+    }
+    const points = [];
+    if (pointed && !grouped) {
+        for (const [index, values] of (valuesOf[0] ?? []).entries()) {
+            for (const value of values)
+                points.push([index, value]);
+        }
     }
+    if (points.length > 0)
+        series.push(pointSeries(points, legend[0]));
+    series.push(...slotted);
+    const categoryAxis = {
+        type: "category",
+        data: categories,
+        ...axisNameFields("x", categoryAxisTitle(block.labels, x)),
+        ...(points.length > 0 ? JITTERED_AXIS : {}),
+    };
     return ok({
-        xAxis: { type: "category", data: categories, ...xAxisName(axisTitle(block.labels, x)) },
-        yAxis: { type: "value", name: axisTitle(block.labels, y) },
+        xAxis: slotted.length > 0 ? [categoryAxis, slotAxis(categories.length)] : categoryAxis,
+        yAxis: { type: "value", scale: true, ...yAxisName(axisTitle(block.labels, y)) },
         series,
+        legend: legendOf(legend),
     });
 }
-/** A dense grid over every pair of x and y categories, with a viridis `visualMap`. */
-function deriveHeatmap(block, rows, columns) {
+/**
+ * One polygon for each group over the categories of `x` as the indicators.
+ *
+ * The indicator bound is the largest `y` value of the table, thus each polygon reads against one scale. A
+ * repeated pair is a refusal, because a radar plots one cell for each pair and never a sum. An absent pair
+ * holds `null`, and the chart runtime leaves a gap there. Each indicator runs from zero at the center, and the
+ * chart runtime draws a negative value past the center on the far side, thus a negative value refuses and
+ * names its row.
+ */
+function deriveRadar(block, rows, columns) {
     const xResult = requireColumn(block, rows, columns, "x");
     if (xResult.isErr())
         return err(xResult.error);
     const yResult = requireColumn(block, rows, columns, "y");
     if (yResult.isErr())
         return err(yResult.error);
-    const valueResult = requireColumn(block, rows, columns, "value");
-    if (valueResult.isErr())
-        return err(valueResult.error);
+    const groupResult = requireColumn(block, rows, columns, "group");
+    if (groupResult.isErr())
+        return err(groupResult.error);
     const x = xResult.value;
     const y = yResult.value;
-    const valueColumn = valueResult.value;
-    const xCategories = firstAppearance(rows.map((row) => row[x]));
-    const yCategories = firstAppearance(rows.map((row) => row[y]));
+    const group = groupResult.value;
+    const categories = firstAppearance(rows.map((row) => row[x]));
+    const groups = firstAppearance(rows.map((row) => row[group]));
+    const bound = slotFault(block.id, categories.length, groups.length);
+    if (bound !== undefined)
+        return err(bound);
+    const focused = focusSet(block.id, block.focus, rows.length, groups);
+    if (focused.isErr())
+        return err(focused.error);
     const cells = new Map();
-    for (const row of rows) {
-        const key = pairKey(row[x], row[y]);
+    let largest;
+    for (const [index, row] of rows.entries()) {
+        const key = pairKey(row[x], row[group]);
         if (cells.has(key)) {
-            return err(problem(block.id, `The heatmap holds the pair (${String(row[x])}, ${String(row[y])}) more than one time.`));
+            return err(problem(block.id, `The radar holds the pair (${String(row[x])}, ${String(row[group])}) more than one time.`));
         }
-        cells.set(key, toNumber(row[valueColumn]));
-    }
-    const data = [];
-    const finite = [];
-    for (let xi = 0; xi < xCategories.length; xi++) {
-        for (let yi = 0; yi < yCategories.length; yi++) {
-            const stored = cells.get(pairKey(xCategories[xi], yCategories[yi]));
-            const value = stored === undefined ? null : stored;
-            data.push([xi, yi, value]);
-            if (value !== null)
-                finite.push(value);
+        const value = toNumber(row[y]);
+        if (value !== null && value < 0) {
+            return err(problem(block.id, `The row ${index + 1} holds the negative value ${value}. A radar measures each indicator from zero at its center.`));
         }
+        cells.set(key, value);
+        if (value !== null)
+            largest = largest === undefined ? value : Math.max(largest, value);
+    }
+    if (rows.length > 0 && (largest === undefined || largest <= 0)) {
+        // The largest value bounds each indicator. A bound of zero or less draws no polygon that a reader can read.
+        return err(problem(block.id, 'The radar holds no positive "y" value, thus its indicators have no bound.'));
     }
-    const min = finite.length > 0 ? Math.min(...finite) : 0;
-    const max = finite.length > 0 ? Math.max(...finite) : 1;
+    const names = groups.map((name) => categoryName(name));
     return ok({
-        xAxis: { type: "category", data: xCategories.map(String), ...xAxisName(axisTitle(block.labels, x)), splitArea: { show: true } },
-        yAxis: { type: "category", data: yCategories.map(String), name: axisTitle(block.labels, y), splitArea: { show: true } },
-        visualMap: {
-            type: "continuous",
-            min,
-            max,
-            calculable: true,
-            orient: "horizontal",
-            left: "center",
-            bottom: 0,
-            inRange: { color: [...VIRIDIS] },
+        radar: {
+            indicator: categories.map((category) => ({ name: String(category), max: largest ?? 1 })),
+            radius: RADAR_RADIUS,
         },
-        series: [{ type: "heatmap", data }],
+        series: [
+            {
+                type: "radar",
+                data: groups.map((name, index) => ({
+                    name: names[index],
+                    value: categories.map((category) => cells.get(pairKey(category, name)) ?? null),
+                    ...categoryStyle(name, focused.value),
+                })),
+            },
+        ],
+        legend: legendOf(names),
     });
 }
-/** One slice per group category, in first-appearance order. A repeated category refuses. */
-function derivePie(block, rows, columns) {
-    const groupResult = requireColumn(block, rows, columns, "group");
-    if (groupResult.isErr())
-        return err(groupResult.error);
-    const valueResult = requireColumn(block, rows, columns, "value");
-    if (valueResult.isErr())
-        return err(valueResult.error);
-    const groupColumn = groupResult.value;
-    const valueColumn = valueResult.value;
-    const seen = new Set();
-    const data = [];
+/** The numeric `y` values of each slot in row order, keyed by `slotKey`, in one pass over the rows. */
+function slotBuckets(rows, x, y, groupColumn) {
+    const buckets = new Map();
     for (const row of rows) {
-        const name = String(row[groupColumn]);
-        if (seen.has(name)) {
-            return err(problem(block.id, `The pie holds the category "${name}" more than one time.`));
+        const value = toNumber(row[y]);
+        if (value === null)
+            continue;
+        const key = slotKey(groupColumn === undefined ? undefined : row[groupColumn], row[x]);
+        const bucket = buckets.get(key);
+        if (bucket === undefined)
+            buckets.set(key, [value]);
+        else
+            bucket.push(value);
+    }
+    return buckets;
+}
+/** The key of one slot: a group value and a category value. Each cell keeps its type, as a pair key does. */
+function slotKey(group, category) {
+    return JSON.stringify([group === undefined ? null : cellKey(group), category === undefined ? null : cellKey(category)]);
+}
+/**
+ * The refusal of a chart whose categories and groups give more slots than the bound, or `undefined` for a chart
+ * inside the bound.
+ *
+ * A stacked form, a radar, a violin, a box, and a heatmap each lay out one slot for each pair of a category and a
+ * group. A sparse table of many categories and many groups gives a grid that no reader reads and that the
+ * memory of the render cannot hold, thus the render refuses it before it builds one slot.
+ */
+function slotFault(blockId, categories, groups) {
+    const slots = categories * groups;
+    if (slots <= CHART_SLOT_LIMIT)
+        return undefined;
+    return problem(blockId, `The chart holds ${categories} categories and ${groups} groups, thus ${slots} slots. A chart holds ${CHART_SLOT_LIMIT} slots at most, thus a table of fewer categories or fewer groups serves the reader.`);
+}
+/** The radius of a radar. The legend and the indicator names sit outside it. */
+const RADAR_RADIUS = "62%";
+/** The tier of one row count. The two counts are constants of the design source. */
+function scatterDensity(rowCount) {
+    if (rowCount > SCATTER_CROWD_ROWS)
+        return "crowd";
+    if (rowCount > SCATTER_HOVER_ROWS)
+        return "hover";
+    return "normal";
+}
+/** The point count from which the scatter renderer takes its large path. */
+const LARGE_SCATTER_THRESHOLD = 2000;
+/** The opacity of the band that an `area` series draws between its two bounds. */
+const BAND_OPACITY = 0.25;
+/** The forms whose data runs along the x axis. A line that zigzags states an order that no column holds. */
+const SORTED_FORMS = new Set(["line", "area", "step"]);
+/**
+ * The tooltip of a composition whose points carry no name.
+ *
+ * `{a}` is the series name, and `{c}` is the value of the item. The text is a static template of the
+ * chart runtime, thus the option carries no function and the inline JSON stays a pure value.
+ */
+const PLAIN_TOOLTIP = { trigger: "item", formatter: "{a}: {c}" };
+/** The tooltip of a composition whose points carry a name. `{b}` is the name of the item. */
+const NAMED_TOOLTIP = { trigger: "item", formatter: "{b}<br/>{a}: {c}" };
+/**
+ * The label of one named point. `{b}` is the name of the item, thus the label needs no function.
+ *
+ * A page-side series build writes the same member onto a flagged point, thus one constant answers for the
+ * inline form and the payload form alike.
+ */
+export const POINT_LABEL = { show: true, formatter: "{b}" };
+/**
+ * The member of the option that carries the data source.
+ *
+ * The chart runtime reads no member of this name, and the page bootstrap removes it before it sets the
+ * option. The name leads with two underscores, thus no reader mistakes it for a field of the runtime.
+ */
+export const CHART_SOURCE_MEMBER = "__reportData";
+function deriveComposition(blockId, composition, rows, columns, labels, extras = {}) {
+    const { preset, classification, collector } = extras;
+    if (composition.series.length > 1 && composition.series.some(isHorizontalBar)) {
+        // A horizontal bar reads its categories up the y axis, and every other form reads a value there.
+        // The two share no honest axis pair on one grid, thus the mix refuses instead of plotting a lie.
+        return err(problem(blockId, "A horizontal bar plots its categories on the y axis, thus it shares no axis pair with another series."));
+    }
+    const fault = compositionFault(composition, extras.focus);
+    if (fault !== undefined) {
+        return err(problem(blockId, fault));
+    }
+    const resolved = [];
+    for (const declared of composition.series) {
+        const series = resolveSeries(blockId, declared, rows, columns);
+        if (series.isErr())
+            return err(series.error);
+        resolved.push(series.value);
+    }
+    if (resolved.length === 0) {
+        // The schema holds a composition to one series at least. The guard states the same rule for a
+        // value that reaches the renderer without a parse, because the axes come from the first series.
+        return err(problem(blockId, "The composition carries no series."));
+    }
+    const annotations = composition.annotations ?? [];
+    const labeled = pointLabelRows(blockId, annotations, rows, columns, plottedRows(resolved, rows.length));
+    if (labeled.isErr())
+        return err(labeled.error);
+    const focused = focusSet(blockId, extras.focus, rows.length, compositionCategories(resolved, rows.length));
+    if (focused.isErr())
+        return err(focused.error);
+    if (collector !== undefined && classification !== undefined) {
+        // The page splits the rows against the same cuts, thus the rule rides beside the descriptors. A rule
+        // that reads a column of its own needs that column in the payload.
+        collector.rule = classification.rule;
+        if (classification.rule.kind === "ma" && !collector.columns.includes(classification.rule.column)) {
+            collector.failed = true;
+        }
+    }
+    // A figure titles the transform that it applies itself with its semantic title, thus only an authored
+    // transform takes the label of its column inside the transform.
+    const channels = resolved.flatMap((entry) => [entry.x, entry.y, entry.y0, entry.color, entry.size, entry.low, entry.high].flatMap((channel) => channel ?? []));
+    const context = {
+        blockId,
+        rows,
+        labels: preset === undefined ? withTransformedLabels(labels, channels) : labels,
+        meanings: extras.meanings,
+        preset,
+        classification,
+        collector,
+        focus: focused.value,
+        labeled: labeled.value,
+        density: scatterDensity(rows.length),
+        annotations,
+        // The axes come from the first series, thus its order sorts the shared x axis of every series.
+        orderedX: resolved[0].x.order !== undefined,
+        colorOnTop: extras.colorOnTop === true,
+    };
+    const first = resolved[0];
+    const axes = compositionAxes(context, first, composition.axes);
+    if (axes.isErr())
+        return err(axes.error);
+    const plotted = resolved.map((entry) => plottedSeries(entry, axes.value, extras.meanings));
+    if (composition.facet !== undefined) {
+        return deriveFacets(context, composition.facet, columns, plotted, axes.value);
+    }
+    const emitted = composePanel(context, plotted, undefined, axes.value, BAND_STACK_PREFIX);
+    if (emitted.isErr())
+        return err(emitted.error);
+    const named = resolved.some((entry) => entry.label !== undefined) || labeled.value.size > 0;
+    const maps = visualMaps(context, plotted, emitted.value);
+    const horizontal = isHorizontalBar(first.declared);
+    const series = labeledSeries(context, emitted.value, horizontal);
+    const room = first.declared.form === "bar" ? labelRoom(series, horizontal) : {};
+    const colored = emitted.value.some((entry) => entry.entry?.color !== undefined);
+    const grid = {
+        // A horizontal bar draws its category names as y labels, thus the grid must hold them.
+        ...(isHorizontalBar(first.declared) ? LABEL_CONTAINING_GRID : {}),
+        // A continuous color draws its scale at the right edge, thus the grid leaves that band free.
+        ...(colored ? { right: COLOR_SCALE_GRID_RIGHT } : {}),
+    };
+    return ok({
+        tooltip: named ? { ...NAMED_TOOLTIP } : { ...PLAIN_TOOLTIP },
+        xAxis: horizontal ? { ...axes.value.xAxis, ...room } : axes.value.xAxis,
+        yAxis: horizontal ? axes.value.yAxis : { ...axes.value.yAxis, ...room },
+        series,
+        ...(maps.length > 0 ? { visualMap: maps } : {}),
+        ...(emitted.value.some((entry) => entry.auxiliary) ? { legend: legendOf(drawnNames(emitted.value)) } : {}),
+        ...(Object.keys(grid).length > 0 ? { grid } : {}),
+    });
+}
+/** The stack prefix of a band. A facet panel adds its own place, thus two panels never stack each other. */
+const BAND_STACK_PREFIX = "band-";
+/** The right margin of a grid beside a continuous color scale. */
+const COLOR_SCALE_GRID_RIGHT = `${COLOR_SCALE_BAND_PCT}%`;
+/**
+ * The fault of a composition whose forms cannot draw one of their channels, or `undefined` for a sound one.
+ *
+ * Each rule depends on the form, thus the grammar admits the channel and the render states the fault. A
+ * silent drop would teach the author a channel that does nothing.
+ */
+function compositionFault(composition, focus) {
+    for (const series of composition.series) {
+        const form = series.form;
+        const encoding = series.encoding;
+        if (encoding.color !== undefined && form !== "scatter" && form !== "bar") {
+            return `The ${form} series takes no "color" channel. A continuous color is legal on a scatter and a bar.`;
+        }
+        if (encoding.color !== undefined && encoding.group !== undefined) {
+            return COLOR_BESIDE_GROUP;
+        }
+        if (encoding.size !== undefined && form !== "scatter") {
+            return `The ${form} series takes no "size" channel. A size is legal on a scatter alone.`;
+        }
+        if ((encoding.low === undefined) !== (encoding.high === undefined)) {
+            return 'An interval has two bounds, thus a series gives "low" and "high" together.';
+        }
+        if (encoding.low !== undefined && form !== "scatter" && form !== "bar") {
+            return `The ${form} series takes no interval. The "low" and "high" channels are legal on a bar and a scatter.`;
+        }
+        for (const name of ["y0", "group", "color", "size", "low", "high"]) {
+            const channel = encoding[name];
+            if (channel !== undefined && channelOrder(channel) !== undefined) {
+                return `The "${name}" channel draws no category axis, thus it takes no "orderBy".`;
+            }
+        }
+    }
+    for (const [place, series] of composition.series.entries()) {
+        if (place === 0)
+            continue;
+        for (const name of ["x", "y"]) {
+            if (channelOrder(series.encoding[name]) !== undefined) {
+                return `The series ${place + 1} sorts its "${name}" channel with "orderBy", and the axes of a composition read the first series alone. State the order on the first series.`;
+            }
+        }
+    }
+    for (const member of ["color", "size"]) {
+        const keys = new Set(composition.series.flatMap((series) => {
+            const channel = series.encoding[member];
+            return channel === undefined ? [] : [`${channelColumn(channel)}:${channelTransform(channel) ?? ""}`];
+        }));
+        if (keys.size > 1) {
+            return `Two series name two different "${member}" columns. A chart reads one "${member}" channel on one scale, thus each series names the same column.`;
+        }
+    }
+    const facet = composition.facet;
+    if (facet !== undefined) {
+        if (channelOrder(facet) !== undefined) {
+            return 'The "facet" channel draws no category axis, thus it takes no "orderBy".';
+        }
+        if (channelTransform(facet) !== undefined) {
+            return FACET_TRANSFORM;
+        }
+        const lead = composition.series[0]?.form;
+        if (lead !== undefined && lead !== "scatter" && lead !== "line" && lead !== "bar") {
+            return `A facet is legal on a scatter, a line, and a bar, thus the first series of a faceted composition takes one of those forms, and not the ${lead}.`;
+        }
+    }
+    if (focus !== undefined && composition.series.some((series) => series.encoding.color !== undefined)) {
+        return FOCUS_BESIDE_COLOR;
+    }
+    const banded = focus === undefined
+        ? undefined
+        : composition.series.find((series) => (series.form === "area" || series.form === "step") && series.encoding.group !== undefined);
+    if (banded !== undefined) {
+        return `A focus is legal on a grouped scatter, line, or bar series, and never on the grouped ${banded.form} series.`;
+    }
+    return undefined;
+}
+/**
+ * The categories that a focus of one composition can name: the values of each group channel, and the `x`
+ * values of each bar series that splits by no group.
+ */
+function compositionCategories(resolved, rowCount) {
+    const categories = [];
+    for (const entry of resolved) {
+        const channel = entry.group ?? (entry.declared.form === "bar" ? entry.x : undefined);
+        if (channel === undefined)
+            continue;
+        for (let index = 0; index < rowCount; index += 1) {
+            const value = channel.values[index];
+            if (value !== null)
+                categories.push(value);
+        }
+    }
+    return categories;
+}
+/**
+ * The runtime series of one panel: each declared series over each of its splits, restricted to the rows of
+ * the panel, with the interval of each series after it and the marks on one carrier.
+ *
+ * `members` holds the rows of a facet panel, and it is absent for a chart of one panel. The bars of one panel
+ * sit side by side, thus each bar split takes its own slot of the category band and its interval takes the
+ * offset of that slot.
+ */
+function composePanel(context, resolved, members, axes, stackPrefix) {
+    const plan = [];
+    for (const entry of resolved) {
+        for (const split of splitSeries(context.rows, entry, context.classification)) {
+            plan.push({ entry, split: members === undefined ? split : { ...split, indices: split.indices.filter((index) => members.has(index)) } });
+        }
+    }
+    const bars = plan.filter((item) => item.entry.declared.form === "bar" && item.entry.y0 === undefined);
+    const barPlaces = new Map(bars.map((item, place) => [item, place]));
+    const emitted = [];
+    for (const item of plan) {
+        const place = barPlaces.get(item);
+        const offset = place !== undefined ? slotOffset(place, bars.length) : 0;
+        const built = buildSeries(context, item.entry, item.split, `${stackPrefix}${emitted.length}`, axes, offset);
+        if (built.isErr())
+            return err(built.error);
+        emitted.push(...built.value);
+    }
+    const marks = markMembers(context.annotations);
+    const target = markCarrier(emitted);
+    if (Object.keys(marks).length > 0 && target >= 0) {
+        emitted[target] = { ...emitted[target], option: { ...emitted[target].option, ...marks } };
+    }
+    return ok(emitted);
+}
+/** The option of each emitted series, with the value label of each bar of a small bar chart. */
+function labeledSeries(context, emitted, horizontal) {
+    return withValueLabels(emitted.map((entry) => entry.option), horizontal, (cell, index) => {
+        const value = emitted[index].entry?.y;
+        return value === undefined ? String(cell) : valueLabelText(value.transformed ? value.name : value.column, cell, context.meanings);
+    }, (index) => emitted[index].entry?.low === undefined);
+}
+/** The names of the drawn series, in series order. An auxiliary series names no entry of its own. */
+function drawnNames(emitted) {
+    return emitted.filter((entry) => !entry.auxiliary).map((entry) => String(entry.option.name));
+}
+/**
+ * The visual maps of one composition: one map over the continuous color, and one map over the symbol size
+ * for each place that the size takes in an item.
+ *
+ * Each map names the series that carry its dimension, thus no map reads an interval item. A color always sits
+ * at dimension 2, thus one color map covers every colored series. A size sits at dimension 2 or 3, and the
+ * size maps of the two dimensions share one range. Each scale reads the drawn points of its series, thus the
+ * panels of a facet share one scale. The size map shows no scale,
+ * because the size reads as a relative weight of each point.
+ */
+function visualMaps(context, resolved, emitted) {
+    const colored = [];
+    const sizedByDimension = new Map();
+    for (const [index, entry] of emitted.entries()) {
+        const declared = entry.entry;
+        if (entry.auxiliary || declared === undefined)
+            continue;
+        if (declared.color !== undefined)
+            colored.push(index);
+        if (declared.size !== undefined) {
+            const dimension = declared.color !== undefined ? 3 : 2;
+            const sized = sizedByDimension.get(dimension);
+            if (sized === undefined)
+                sizedByDimension.set(dimension, [index]);
+            else
+                sized.push(index);
+        }
+    }
+    const maps = [];
+    const colorChannel = resolved.find((entry) => entry.color !== undefined)?.color;
+    if (colored.length > 0 && colorChannel !== undefined) {
+        const scale = continuousScale(drawnMembers(emitted, colored, 2));
+        const column = colorChannel.transformed ? colorChannel.name : colorChannel.column;
+        maps.push({
+            type: "continuous",
+            seriesIndex: colored,
+            dimension: 2,
+            ...colorScale(scale, axisTitle(context.labels, colorChannel.name), column, declaredForColumn(context.meanings, column)),
+        });
+    }
+    // A size column can sit at dimension 2 of one series and at dimension 3 of another. Each map names one
+    // dimension, and every map reads one range over the drawn points of every sized series, thus one value
+    // draws at one size in each series.
+    const sizes = [...sizedByDimension].flatMap(([dimension, seriesIndex]) => drawnMembers(emitted, seriesIndex, dimension));
+    for (const [dimension, seriesIndex] of sizedByDimension) {
+        maps.push({
+            type: "continuous",
+            show: false,
+            seriesIndex,
+            dimension,
+            min: sizes.length > 0 ? lowest(sizes) : 0,
+            max: sizes.length > 0 ? highest(sizes) : 1,
+            inRange: { symbolSize: [...SIZE_CHANNEL_RANGE_PX] },
+        });
+    }
+    return maps;
+}
+/**
+ * The members at one dimension of each item that some series draw. A row whose point drops gives no item,
+ * thus a scale reads the drawn points alone and a dropped row never widens it.
+ */
+function drawnMembers(emitted, seriesIndex, dimension) {
+    const members = [];
+    for (const index of seriesIndex) {
+        const data = emitted[index].option.data;
+        if (!Array.isArray(data))
+            continue;
+        for (const item of data) {
+            const value = Array.isArray(item) ? item : typeof item === "object" && item !== null ? item.value : undefined;
+            const member = Array.isArray(value) ? toNumber(value[dimension]) : null;
+            if (member !== null)
+                members.push(member);
+        }
+    }
+    return members;
+}
+/** The smallest of some values, read in one pass. */
+function lowest(values) {
+    let min = values[0];
+    for (const value of values)
+        if (value < min)
+            min = value;
+    return min;
+}
+/** The largest of some values, read in one pass. */
+function highest(values) {
+    let max = values[0];
+    for (const value of values)
+        if (value > max)
+            max = value;
+    return max;
+}
+/**
+ * True when the interval of one series lies along the x axis.
+ *
+ * The interval sits on the value axis. For a bar it is the value axis of the orientation. For a scatter it is
+ * the axis that draws no category, and the y axis when both axes draw values.
+ */
+function intervalAlongX(entry, axes) {
+    if (entry.declared.form === "bar") {
+        return isHorizontalBar(entry.declared);
+    }
+    return axes.yAxis.type === "category" && axes.xAxis.type !== "category";
+}
+/** The place of each category of one axis, keyed by the text of the category, or `undefined` for a value axis. */
+function categoryPlaces(axis) {
+    if (axis.type !== "category" || !Array.isArray(axis.data))
+        return undefined;
+    return new Map(axis.data.map((category, place) => [String(category), place]));
+}
+/**
+ * The interval series of one runtime series: one custom series with the `interval` renderer, after the series
+ * that it annotates.
+ *
+ * Each item leads with its anchor and its value, then the two bounds, the axis, the slot offset, and the mark
+ * kind. The anchor of a category axis is the place of the category, because the chart runtime rounds a
+ * category coordinate. A bound on the wrong side of its value states an interval that the evidence cannot
+ * hold, thus it refuses and names the row.
+ *
+ * The series carries the name of the series that it annotates. Thus it takes the palette slot of that name,
+ * and it adds no legend entry of its own.
+ */
+function intervalSeries(blockId, entry, name, points, axes, offset) {
+    const xCategories = categoryPlaces(axes.xAxis);
+    const yCategories = categoryPlaces(axes.yAxis);
+    if (entry.declared.form === "scatter" && xCategories !== undefined && yCategories !== undefined) {
+        return err(problem(blockId, "An interval lies along the value axis, and both axes of this scatter draw categories."));
+    }
+    const alongX = intervalAlongX(entry, axes);
+    const horizontal = isHorizontalBar(entry.declared);
+    const items = [];
+    for (const point of points) {
+        const renderedX = horizontal ? point.y : point.x;
+        const renderedY = horizontal ? point.x : point.y;
+        const value = toNumber(alongX ? renderedX : renderedY);
+        const across = alongX ? renderedY : renderedX;
+        const places = alongX ? yCategories : xCategories;
+        const anchor = places !== undefined ? places.get(String(across)) : toNumber(across);
+        const low = point.low;
+        const high = point.high;
+        if (value === null || anchor === undefined || anchor === null || low === undefined || high === undefined)
+            continue;
+        if (low > value || high < value) {
+            const detail = `The row ${point.index + 1} holds the interval from ${low} to ${high} around the plotted value ${value}. ` +
+                'The "low" bound sits at or under the value, and the "high" bound sits at or over it.';
+            return err(problem(blockId, detail));
+        }
+        items.push(alongX ? [value, anchor, low, high, 0, offset, 0] : [anchor, value, low, high, 1, offset, 0]);
+    }
+    return ok({
+        type: "custom",
+        name,
+        renderItem: INTERVAL_RENDERER,
+        silent: true,
+        // A bar draws at the level 2 of the runtime. The interval draws over it, thus the bar hides no whisker.
+        z: INTERVAL_Z,
+        encode: alongX ? { x: [0, 2, 3], y: 1 } : { x: 0, y: [1, 2, 3] },
+        data: items,
+    });
+}
+/** The drawing level of an interval series, over the level of a bar. */
+const INTERVAL_Z = 3;
+/**
+ * Derive a faceted composition: one panel for each value of the facet column, in first-appearance order.
+ *
+ * Each panel holds one grid, one axis pair, and its own runtime series. The panels share one axis range on
+ * each axis, computed from every row, thus the panels compare. `facetLayout` places the panels.
+ *
+ * The facet keeps its rows inline: a page-side build reads no panel, thus the collector fails.
+ */
+function deriveFacets(context, facet, columns, resolved, axes) {
+    const channel = resolveChannel(context.blockId, facet, context.rows, columns);
+    if (channel.isErr())
+        return err(channel.error);
+    if (context.collector !== undefined) {
+        context.collector.failed = true;
+    }
+    const split = splitByChannel(context.rows, channel.value);
+    if (split.length > FACET_PANEL_LIMIT) {
+        return err(problem(context.blockId, `The facet splits the table into ${split.length} panels. A facet holds ${FACET_PANEL_LIMIT} panels at most, thus a table of fewer groups serves the reader.`));
+    }
+    // A table with no row still draws one empty panel, thus the chart keeps its container.
+    const panels = split.length > 0 ? split : [{ name: undefined, indices: [] }];
+    // A panel reads the category places and the axis types alone, thus it composes before the shared ranges.
+    const emitted = [];
+    for (const [place, panel] of panels.entries()) {
+        const series = composePanel(context, resolved, new Set(panel.indices), axes, `${BAND_STACK_PREFIX}${place}-`);
+        if (series.isErr())
+            return err(series.error);
+        for (const entry of series.value) {
+            emitted.push({ ...entry, option: { ...entry.option, xAxisIndex: place, yAxisIndex: place } });
         }
-        seen.add(name);
-        const numeric = toNumber(row[valueColumn]);
-        data.push({ name, value: numeric === null ? row[valueColumn] : numeric });
     }
+    const labeledPanels = labeledSeries(context, emitted, isHorizontalBar(resolved[0].declared));
+    const labeled = resolved[0].declared.form === "bar" && Object.keys(labelRoom(labeledPanels, isHorizontalBar(resolved[0].declared))).length > 0;
+    const shared = sharedAxes(context, resolved, axes, labeled);
+    // A continuous color draws its scale at the right edge, thus the panels leave that band free.
+    const scaleBand = emitted.some((entry) => entry.entry?.color !== undefined) ? COLOR_SCALE_BAND_PCT : 0;
+    const layout = facetLayout(panels.map((panel) => panel.name), shared, legendOf(drawnNames(emitted)), scaleBand);
+    const named = resolved.some((entry) => entry.label !== undefined) || context.labeled.size > 0;
+    const maps = visualMaps(context, resolved, emitted);
     return ok({
-        series: [{ type: "pie", radius: "55%", data }],
+        tooltip: named ? { ...NAMED_TOOLTIP } : { ...PLAIN_TOOLTIP },
+        grid: layout.grid,
+        xAxis: layout.xAxis,
+        yAxis: layout.yAxis,
+        series: labeledPanels,
+        graphic: layout.graphic,
+        ...(maps.length > 0 ? { visualMap: maps } : {}),
+        legend: layout.legend,
     });
 }
-/** The tier of one row count. The two counts are constants of the design source. */
-function scatterDensity(rowCount) {
-    if (rowCount > SCATTER_CROWD_ROWS)
-        return "crowd";
-    if (rowCount > SCATTER_HOVER_ROWS)
-        return "hover";
-    return "normal";
+/**
+ * The layout of the panels of a facet, one panel for each name in order.
+ *
+ * One panel takes the full width, two panels take half each, and three or more lay out three to a row. The
+ * label of each panel is a text element at the top left of its cell, because the layout discipline strips a
+ * `title`. Each grid holds its labels and its names inside its own box, thus two panels never paint over each
+ * other. `shared` gives the axes with the one range of every panel, and `scaleBand` is the band at the right
+ * edge that a continuous color scale takes.
+ */
+function facetLayout(names, shared, legend, scaleBand) {
+    const columnCount = names.length === 1 ? 1 : names.length === 2 ? 2 : FACET_COLUMNS;
+    const rowCount = Math.ceil(names.length / columnCount);
+    const legendBand = legend.show === false ? 0 : FACET_LEGEND_BAND / rowCount;
+    const titleBand = FACET_TITLE_BAND / rowCount;
+    const rowBand = (100 - legendBand - titleBand) / rowCount;
+    const panelWidth = (100 - FACET_Y_TITLE_BAND - scaleBand - (columnCount - 1) * FACET_GUTTER) / columnCount;
+    // A panel draws no axis name, because a name narrows its panel alone. A narrow panel draws fewer ticks, and a
+    // tick label that overlaps its neighbor hides.
+    const xAxis = panelAxis(shared.xAxis, (CHART_PAGE_WIDTH_PX * panelWidth) / 100);
+    const yAxis = panelAxis(shared.yAxis);
+    const grids = [];
+    const xAxes = [];
+    const yAxes = [];
+    const graphic = [];
+    for (const [place, name] of names.entries()) {
+        const left = FACET_Y_TITLE_BAND + (place % columnCount) * (panelWidth + FACET_GUTTER);
+        const top = Math.floor(place / columnCount) * rowBand;
+        grids.push({
+            left: percent(left),
+            top: percent(top + rowBand * FACET_LABEL_BAND),
+            width: percent(panelWidth),
+            height: percent(rowBand * (1 - FACET_LABEL_BAND)),
+            outerBoundsMode: FACET_BOUNDS_MODE,
+            outerBoundsContain: "all",
+        });
+        xAxes.push({ ...xAxis, gridIndex: place });
+        yAxes.push({ ...yAxis, gridIndex: place });
+        if (name !== undefined) {
+            graphic.push({
+                type: "text",
+                left: percent(left),
+                top: percent(top + rowBand * FACET_LABEL_GAP),
+                style: { text: categoryName(name), fill: CHART_INK, fontFamily: CHART_FONT_STACK, fontSize: CHART_PAGE_TEXT_PX, fontWeight: "bold" },
+            });
+        }
+    }
+    // Each shared axis takes one title for the whole chart: the x title under the panels, and the y title
+    // turned upright in the band at the left.
+    const titleStyle = { fill: CHART_INK, fontFamily: CHART_FONT_STACK, fontSize: CHART_PAGE_TEXT_PX };
+    if (typeof shared.xAxis.name === "string") {
+        graphic.push({ type: "text", left: "center", bottom: percent(legendBand), style: { text: shared.xAxis.name, ...titleStyle } });
+    }
+    if (typeof shared.yAxis.name === "string") {
+        graphic.push({ type: "text", left: 0, top: "middle", rotation: Math.PI / 2, style: { text: shared.yAxis.name, ...titleStyle } });
+    }
+    return { grid: grids, xAxis: xAxes, yAxis: yAxes, graphic, legend };
 }
-/** The point count from which the scatter renderer takes its large path. */
-const LARGE_SCATTER_THRESHOLD = 2000;
-/** The opacity of the band that an `area` series draws between its two bounds. */
-const BAND_OPACITY = 0.25;
-/** The forms whose data runs along the x axis. A line that zigzags states an order that no column holds. */
-const SORTED_FORMS = new Set(["line", "area", "step"]);
 /**
- * The tooltip of a composition whose points carry no name.
+ * One shared axis as each panel draws it: no name and three ticks.
  *
- * `{a}` is the series name, and `{c}` is the value of the item. The text is a static template of the
- * chart runtime, thus the option carries no function and the inline JSON stays a pure value.
+ * A value label that overlaps its neighbor hides, because the next tick states the scale. A category label
+ * names its bar, thus each one prints, up to the upright labels that the panel width holds (`thinnedLabels`).
+ * A category label that does not fit its share of the panel width turns 45 degrees, and 90 degrees where a
+ * turned label still covers its neighbor. `widthPx` is the panel width on the page, and an x axis alone states it.
  */
-const PLAIN_TOOLTIP = { trigger: "item", formatter: "{a}: {c}" };
-/** The tooltip of a composition whose points carry a name. `{b}` is the name of the item. */
-const NAMED_TOOLTIP = { trigger: "item", formatter: "{b}<br/>{a}: {c}" };
+function panelAxis(axis, widthPx) {
+    const label = typeof axis.axisLabel === "object" && axis.axisLabel !== null ? axis.axisLabel : {};
+    const base = { ...withoutName(axis), splitNumber: FACET_SPLIT_NUMBER };
+    if (axis.type !== "category" || !Array.isArray(axis.data))
+        return { ...base, axisLabel: { ...label, hideOverlap: true } };
+    const turn = widthPx === undefined || label.rotate !== undefined ? undefined : categoryTurn(axis.data, widthPx);
+    return { ...base, axisLabel: { ...label, interval: 0, ...(turn !== undefined ? { rotate: turn } : {}) } };
+}
+/** The width of one character of the chart text, as a share of the text size. */
+const LABEL_CHARACTER_SHARE = 0.6;
 /**
- * The label of one named point. `{b}` is the name of the item, thus the label needs no function.
+ * The turn of the category labels of one axis at one width, or `undefined` for labels that fit level.
  *
- * A page-side series build writes the same member onto a flagged point, thus one constant answers for the
- * inline form and the payload form alike.
+ * A level label fits where its longest name fits the band of one category. A label turned 45 degrees clears
+ * its neighbor where the band, measured across the turned text, holds one line of text.
  */
-export const POINT_LABEL = { show: true, formatter: "{b}" };
+function categoryTurn(categories, widthPx) {
+    if (categories.length === 0)
+        return undefined;
+    let longest = 0;
+    for (const category of categories)
+        longest = Math.max(longest, categoryName(category).length);
+    const band = widthPx / categories.length;
+    if (longest * CHART_PAGE_TEXT_PX * LABEL_CHARACTER_SHARE <= band)
+        return undefined;
+    return band * Math.SQRT1_2 >= CHART_PAGE_TEXT_PX * LABEL_LINE_SHARE ? 45 : 90;
+}
 /**
- * The member of the option that carries the data source.
+ * One option with the upright category labels of each x axis thinned to the count that the plot width of its
+ * grid holds on the page.
  *
- * The chart runtime reads no member of this name, and the page bootstrap removes it before it sets the
- * option. The name leads with two underscores, thus no reader mistakes it for a field of the runtime.
+ * The layout discipline pins the interval of each axis to 0, and a facet panel pins it too. An axis of more
+ * upright labels than its plot holds takes the interval of `categoryInterval` in place of that 0. A thinned
+ * axis no longer names each bar, thus an option with no tooltip takes the axis tooltip, which names the
+ * category under the pointer. The export states the interval again at its own width.
  */
-export const CHART_SOURCE_MEMBER = "__reportData";
-function deriveComposition(blockId, composition, rows, columns, labels, extras = {}) {
-    const { preset, classification, collector } = extras;
-    if (composition.series.length > 1 && composition.series.some(isHorizontalBar)) {
-        // A horizontal bar reads its categories up the y axis, and every other form reads a value there.
-        // The two share no honest axis pair on one grid, thus the mix refuses instead of plotting a lie.
-        return err(problem(blockId, "A horizontal bar plots its categories on the y axis, thus it shares no axis pair with another series."));
-    }
-    const resolved = [];
-    for (const declared of composition.series) {
-        const series = resolveSeries(blockId, declared, rows, columns);
-        if (series.isErr())
-            return err(series.error);
-        resolved.push(series.value);
-    }
-    if (resolved.length === 0) {
-        // The schema holds a composition to one series at least. The guard states the same rule for a
-        // value that reaches the renderer without a parse, because the axes come from the first series.
-        return err(problem(blockId, "The composition carries no series."));
-    }
-    const annotations = composition.annotations ?? [];
-    const labeled = pointLabelRows(blockId, annotations, rows, columns, plottedRows(resolved, rows.length));
-    if (labeled.isErr())
-        return err(labeled.error);
-    if (collector !== undefined && classification !== undefined) {
-        // The page splits the rows against the same two cuts, thus the rule rides beside the descriptors.
-        collector.rule = classification.rule;
-    }
-    const density = scatterDensity(rows.length);
-    const emitted = [];
+function thinnedLabels(option) {
+    if (option.xAxis === undefined)
+        return option;
+    let thinned = false;
+    const thin = (axis) => {
+        if (typeof axis !== "object" || axis === null || Array.isArray(axis))
+            return axis;
+        const fields = axis;
+        const label = typeof fields.axisLabel === "object" && fields.axisLabel !== null ? fields.axisLabel : {};
+        if (fields.type !== "category" || !Array.isArray(fields.data) || label.rotate !== 90 || label.show === false)
+            return axis;
+        const interval = categoryInterval(fields.data.length, CHART_PAGE_TEXT_PX, pagePlotWidth(option.grid, fields));
+        if (interval === 0)
+            return axis;
+        thinned = true;
+        return { ...fields, axisLabel: { ...label, interval } };
+    };
+    const xAxis = Array.isArray(option.xAxis) ? option.xAxis.map(thin) : thin(option.xAxis);
+    return { ...option, xAxis, ...(thinned && option.tooltip === undefined ? { tooltip: { trigger: "axis" } } : {}) };
+}
+/**
+ * The plot width of the grid of one axis on the page, in pixels. A grid that states its width gives that width,
+ * as a facet panel does. Every other grid spans the page chart body less its two side margins.
+ */
+function pagePlotWidth(grid, axis) {
+    const entry = Array.isArray(grid) ? grid[typeof axis.gridIndex === "number" ? axis.gridIndex : 0] : grid;
+    const fields = typeof entry === "object" && entry !== null ? entry : {};
+    const stated = pagePx(fields.width);
+    return stated > 0 ? stated : CHART_PAGE_WIDTH_PX - pagePx(fields.left) - pagePx(fields.right);
+}
+/** One horizontal length of a grid on the page, in pixels: a percent of the page chart body, or a number of pixels. Any other value takes no room. */
+function pagePx(value) {
+    if (typeof value === "number")
+        return value;
+    return typeof value === "string" && value.endsWith("%") ? (CHART_PAGE_WIDTH_PX * Number.parseFloat(value)) / 100 : 0;
+}
+/** The outer bounds mode of each facet panel: each grid holds its labels and its names inside its own box. */
+const FACET_BOUNDS_MODE = "same";
+/** The part of one panel row that the panel label takes, over the grid, and the gap over the label. */
+const FACET_LABEL_BAND = 0.12;
+const FACET_LABEL_GAP = 0.03;
+/** The gap between two panels of one row, and the band at the left of the chart that holds the y title, in percent of the width. */
+const FACET_GUTTER = 3;
+const FACET_Y_TITLE_BAND = 5;
+/** The part of the chart height, in percent of one panel row, that the x title of a faceted chart takes. */
+const FACET_TITLE_BAND = 7;
+/** The count of ticks that a panel axis aims at. */
+const FACET_SPLIT_NUMBER = 3;
+/** The part of the chart height, in percent of one panel row, that the legend of a faceted chart takes. */
+const FACET_LEGEND_BAND = 8;
+/** One layout percentage, rounded, thus a float residue of the layout never reaches the option. */
+function percent(value) {
+    return `${Math.round(value * 1e4) / 1e4}%`;
+}
+/** One axis with no name. The shared range of a facet makes the name of each inner panel a repeat. */
+function withoutName(axis) {
+    const { name: _name, nameLocation: _location, nameGap: _gap, nameRotate: _rotate, ...rest } = axis;
+    return rest;
+}
+/**
+ * The shared axes of a facet: the axes of the whole table, with one range on each value axis.
+ *
+ * The range reads every plotted value of every row, the two bounds of an interval, the lower bound of a
+ * band, and the zero of a bar. A bar chart with value labels adds the label room. It widens to round numbers, thus the ticks of each panel land on the same
+ * values. A category axis already lists the categories of every row, and a log axis keeps the range of the
+ * chart runtime.
+ */
+function sharedAxes(context, resolved, axes, labeled) {
+    const xs = [];
+    const ys = [];
     for (const entry of resolved) {
-        for (const split of splitSeries(rows, entry, classification)) {
-            const built = buildSeries(blockId, entry, split, labeled.value, density, emitted.length, labels, preset, collector);
-            if (built.isErr())
-                return err(built.error);
-            emitted.push(...built.value);
+        const horizontal = isHorizontalBar(entry.declared);
+        const alongX = intervalAlongX(entry, axes);
+        for (let index = 0; index < context.rows.length; index += 1) {
+            const x = toNumber((horizontal ? entry.y : entry.x).values[index]);
+            const y = toNumber((horizontal ? entry.x : entry.y).values[index]);
+            if (x !== null)
+                xs.push(x);
+            if (y !== null)
+                ys.push(y);
+            const y0 = entry.y0 === undefined ? null : toNumber(entry.y0.values[index]);
+            if (y0 !== null)
+                ys.push(y0);
+            for (const bound of [entry.low, entry.high]) {
+                const value = bound === undefined ? null : toNumber(bound.values[index]);
+                if (value !== null)
+                    (alongX ? xs : ys).push(value);
+            }
         }
+        if (entry.declared.form === "bar")
+            (horizontal ? xs : ys).push(0);
     }
-    const marks = markMembers(annotations);
-    const target = markCarrier(emitted);
-    if (Object.keys(marks).length > 0 && target >= 0) {
-        emitted[target] = { ...emitted[target], option: { ...emitted[target].option, ...marks } };
-    }
-    const first = resolved[0];
-    const named = resolved.some((entry) => entry.label !== undefined) || labeled.value.size > 0;
-    const axes = compositionAxes(rows, first, composition.axes, labels, preset);
-    return ok({
-        tooltip: named ? { ...NAMED_TOOLTIP } : { ...PLAIN_TOOLTIP },
-        xAxis: axes.xAxis,
-        yAxis: axes.yAxis,
-        series: emitted.map((entry) => entry.option),
-        // A horizontal bar draws its category names as y labels, thus the grid must hold them.
-        ...(isHorizontalBar(first.declared) ? { grid: { ...LABEL_CONTAINING_GRID } } : {}),
-    });
+    // The value labels of a bar sit past the bar ends, thus the value axis of the bar takes the label room.
+    const horizontal = isHorizontalBar(resolved[0].declared);
+    return { xAxis: sharedRange(axes.xAxis, xs, labeled && horizontal), yAxis: sharedRange(axes.yAxis, ys, labeled && !horizontal) };
+}
+/**
+ * One value axis with the round range of some values. Any other axis passes through.
+ *
+ * `room` widens the range by the label room on each side that holds a value away from zero, as the value axis
+ * of a bar chart with labels does on one panel. The zero of a bar stays the end of its side.
+ */
+function sharedRange(axis, values, room) {
+    if (axis.type !== "value" || values.length === 0) {
+        return axis;
+    }
+    let low = lowest(values);
+    let high = highest(values);
+    if (room) {
+        const span = high - low;
+        if (high > 0)
+            high += span * LABEL_ROOM_SHARE;
+        if (low < 0)
+            low -= span * LABEL_ROOM_SHARE;
+    }
+    const [min, max] = roundExtent(low, high);
+    return { ...axis, min, max };
+}
+/**
+ * The range of some values, widened to multiples of a round step.
+ *
+ * The step is one, two, two and a half, five, or ten times a power of ten, near one fifth of the range. A
+ * range of one value widens by a tenth of that value on each side. The ends round to twelve significant
+ * digits, thus a float residue never reaches an axis label.
+ */
+function roundExtent(low, high) {
+    let min = low;
+    let max = high;
+    if (min === max) {
+        const pad = min === 0 ? 1 : Math.abs(min) / 10;
+        min -= pad;
+        max += pad;
+    }
+    const raw = (max - min) / 5;
+    const base = Math.pow(10, Math.floor(Math.log10(raw)));
+    const fraction = raw / base;
+    const step = (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * base;
+    return [Number((Math.floor(min / step) * step).toPrecision(12)), Number((Math.ceil(max / step) * step).toPrecision(12))];
 }
 /** Resolve each channel of one declared series against the rows. An absent column is a refusal. */
 function resolveSeries(blockId, declared, rows, columns) {
@@ -826,19 +2344,81 @@ function resolveSeries(blockId, declared, rows, columns) {
             return err(absent);
         resolved.label = rows.map((row) => row[labelColumn] ?? null);
     }
+    for (const member of ["color", "size", "low", "high"]) {
+        const declaredChannel = declared.encoding[member];
+        if (declaredChannel === undefined)
+            continue;
+        const channel = resolveChannel(blockId, declaredChannel, rows, columns);
+        if (channel.isErr())
+            return err(channel.error);
+        resolved[member] = channel.value;
+    }
     return ok(resolved);
 }
+/**
+ * One resolved series with each positional channel in the form that its axis reads. A horizontal bar draws its
+ * `x` channel on the y axis and its `y` channel on the x axis.
+ */
+function plottedSeries(entry, axes, meanings) {
+    const horizontal = isHorizontalBar(entry.declared);
+    const xAxis = horizontal ? axes.yAxis : axes.xAxis;
+    const yAxis = horizontal ? axes.xAxis : axes.yAxis;
+    return {
+        ...entry,
+        x: plottedChannel(entry.x, xAxis, meanings),
+        y: plottedChannel(entry.y, yAxis, meanings),
+        ...(entry.y0 !== undefined ? { y0: plottedChannel(entry.y0, yAxis, meanings) } : {}),
+    };
+}
+/**
+ * One plotted channel in the form that its axis reads.
+ *
+ * A channel on a category axis keeps the text of each cell, thus the cluster `"6"` of a CSV draws at the
+ * category `6`. A cell that the table types as a number gives its text, and the channel states it, because the
+ * page build reads the payload cell as it is.
+ *
+ * A table that arrives as text gives each cell as a string. A column where each cell parses as a number draws
+ * a value axis, thus each coordinate on it is the number of its cell. A column that holds a name keeps its
+ * cells as they are: a column with a cell that is not numeric, and a column that declares a name. A
+ * transformed channel gives numbers already.
+ */
+function plottedChannel(channel, axis, meanings) {
+    if (axis.type === "category") {
+        const retyped = channel.values.some((cell) => typeof cell === "number");
+        return { ...channel, values: channel.values.map((cell) => (cell === null ? null : categoryCell(cell))), ...(retyped ? { retyped: true } : {}) };
+    }
+    if (channel.transformed || channel.values.some((cell) => cell !== null && isNonNumericString(cell)))
+        return channel;
+    if (namesCategories(meanings, channel.column))
+        return channel;
+    return { ...channel, values: channel.values.map((cell) => (cell === null ? null : toNumber(cell))), numeric: true };
+}
+/**
+ * True when a column declares the meaning of a category or of an identifier, for example the cluster `01`. Each
+ * cell of such a column names a thing, thus a cell that reads as a number is still a name.
+ */
+function namesCategories(meanings, column) {
+    const meaning = declaredForColumn(meanings, column);
+    return meaning === "category" || meaning === "identifier";
+}
 /** Resolve one channel: its effective name, and the value that each row gives for it. */
 function resolveChannel(blockId, channel, rows, columns) {
     const column = channelColumn(channel);
     const absent = requirePresent(blockId, column, rows, columns);
     if (absent !== undefined)
         return err(absent);
+    const order = channelOrder(channel);
+    if (order !== undefined) {
+        const absentOrder = requirePresent(blockId, order.by, rows, columns);
+        if (absentOrder !== undefined)
+            return err(absentOrder);
+    }
+    const ordered = order !== undefined ? { order } : {};
     const transform = channelTransform(channel);
     if (transform === undefined) {
-        return ok({ name: column, values: rows.map((row) => row[column] ?? null), transformed: false, column });
+        return ok({ name: column, values: rows.map((row) => row[column] ?? null), transformed: false, column, ...ordered });
     }
-    return ok({ name: transformedName(transform, column), values: transformColumn(rows, column, transform), transformed: true, column, transform });
+    return ok({ name: transformedName(transform, column), values: transformColumn(rows, column, transform), transformed: true, column, transform, ...ordered });
 }
 /** The refusal for a column that no row holds, or `undefined` when the column is present. */
 function requirePresent(blockId, column, rows, columns) {
@@ -875,7 +2455,7 @@ function splitByClassification(rows, entry, classification) {
     }));
     const byName = new Map(splits.map((split) => [String(split.name), split]));
     for (let index = 0; index < rows.length; index += 1) {
-        const category = classification.categoryOf(toNumber(entry.x.values[index]), toNumber(entry.y.values[index]));
+        const category = classification.categoryOf(toNumber(entry.x.values[index]), toNumber(entry.y.values[index]), index);
         if (category === undefined)
             continue;
         byName.get(category)?.indices.push(index);
@@ -915,40 +2495,72 @@ function splitByChannel(rows, group) {
  *
  * A series of the null category takes the muted chart color, thus it recedes behind the categories that
  * carry a finding. A preset classification states its null category itself, and a group channel of an
- * agent-derived column answers through the null-token test. Every other series takes no color of its own,
- * and the theme palette assigns one by the series order.
+ * agent-derived column answers through the null-token test. A focus replaces both rules: the named group
+ * takes the focus color, and every other group takes the muted color. A bar with no group reads the focus
+ * over its own categories, one item at a time. Every other series takes no color of its own, and the theme
+ * palette assigns one by the series order.
  *
  * A band draws two stacked line series, and no preset emits a band. Thus the null-category color never
  * reaches one, and neither half of a band reports as muted.
+ *
+ * A series with an interval gives its interval series after it, at the slot offset of the series.
  */
-function buildSeries(blockId, entry, split, labeled, density, emittedCount, labels, preset, collector) {
+function buildSeries(context, entry, split, stack, axes, offset) {
     const form = entry.declared.form;
+    const collector = context.collector;
     const points = collectPoints(entry, split.indices);
+    // A line runs along its x axis. An ordered category axis sets that order, and every other axis reads the cells.
+    const places = context.orderedX ? categoryPlaces(axes.xAxis) : undefined;
+    const rises = context.colorOnTop && entry.color !== undefined && !SORTED_FORMS.has(form);
     if (SORTED_FORMS.has(form)) {
-        points.sort((a, b) => compareCell(a.x, b.x));
+        points.sort((a, b) => compareAlong(a.x, b.x, places));
+    }
+    else if (rises) {
+        points.sort((a, b) => (a.color ?? 0) - (b.color ?? 0));
     }
-    const name = seriesName(entry, split.name, labels, preset?.y);
+    const name = seriesName(entry, split.name, context.labels, context.preset?.y);
     if (entry.y0 !== undefined) {
         if (collector !== undefined) {
             // A band draws two stacked series over one row set, and the upper one holds a difference that no
             // cell of the table gives. Thus no descriptor states it, and the chart keeps its inline data.
             collector.failed = true;
         }
-        const band = bandSeries(blockId, entry, name, points, `band-${emittedCount}`);
+        const band = bandSeries(context.blockId, entry, name, points, stack);
         if (band.isErr())
             return err(band.error);
         return ok([
-            { option: band.value[0], carriesMarks: false, muted: false, empty: points.length === 0 },
-            { option: band.value[1], carriesMarks: true, muted: false, empty: points.length === 0 },
+            { option: band.value[0], carriesMarks: false, muted: false, empty: points.length === 0, auxiliary: false, entry },
+            { option: band.value[1], carriesMarks: true, muted: false, empty: points.length === 0, auxiliary: false, entry },
         ]);
     }
-    const muted = split.muted ?? isNullCategory(split.name);
-    const { data, itemObjects } = seriesData(entry, points, labeled, isHorizontalBar(entry.declared));
-    const option = { type: runtimeType(form), name, ...seriesItemStyle(muted, form, density), ...formOptions(form, density, itemObjects), data };
+    const focus = context.focus;
+    const seriesFocus = entry.group !== undefined ? focusColor(focus, split.name) : undefined;
+    const itemFocus = focus !== undefined && entry.group === undefined && form === "bar" ? (point) => focusColor(focus, point.x) : undefined;
+    const color = seriesFocus ?? ((split.muted ?? isNullCategory(split.name)) ? MUTED_CHART_COLOR : undefined);
+    const { data, itemObjects } = seriesData(entry, points, context.labeled, isHorizontalBar(entry.declared), itemFocus);
+    // A color or a size reads one member of each item, and the large path of the runtime draws one fill.
+    const perPoint = itemObjects || entry.color !== undefined || entry.size !== undefined;
+    const option = { type: runtimeType(form), name, ...seriesItemStyle(color, form, context.density), ...formOptions(form, context.density, perPoint), data };
+    if (collector !== undefined) {
+        collectSource(collector, entry, split, context.labeled, form, rises);
+        if (itemFocus !== undefined || (places !== undefined && SORTED_FORMS.has(form))) {
+            // A page-side build writes no per-item color, and it sorts a line by the cells and never by an axis
+            // order. Thus such a series keeps its rows inline.
+            collector.failed = true;
+        }
+    }
+    const drawn = { option, carriesMarks: true, muted: color === MUTED_CHART_COLOR, empty: data.length === 0, auxiliary: false, entry };
+    if (entry.low === undefined || entry.high === undefined) {
+        return ok([drawn]);
+    }
     if (collector !== undefined) {
-        collectSource(collector, entry, split, labeled, form);
+        // A page-side build draws no interval, thus a chart with one keeps its inline data.
+        collector.failed = true;
     }
-    return ok([{ option, carriesMarks: true, muted, empty: data.length === 0 }]);
+    const interval = intervalSeries(context.blockId, entry, name, points, axes, offset);
+    if (interval.isErr())
+        return err(interval.error);
+    return ok([drawn, { option: interval.value, carriesMarks: false, muted: false, empty: points.length === 0, auxiliary: true }]);
 }
 /**
  * Collect the page-side build of one runtime series.
@@ -959,7 +2571,7 @@ function buildSeries(blockId, entry, split, labeled, density, emittedCount, labe
  * The flags name the rows of this split alone. Thus a page-side build tests one small list for each series,
  * and a split by a group channel or by a classification carries the labels of the rows that it holds.
  */
-function collectSource(collector, entry, split, labeled, form) {
+function collectSource(collector, entry, split, labeled, form, rises) {
     const x = columnSource(collector, entry.x);
     const y = columnSource(collector, entry.y);
     const group = entry.group === undefined ? undefined : columnSource(collector, entry.group);
@@ -969,36 +2581,50 @@ function collectSource(collector, entry, split, labeled, form) {
         collector.failed = true;
         return;
     }
+    const color = entry.color === undefined ? undefined : columnSource(collector, entry.color);
+    const size = entry.size === undefined ? undefined : columnSource(collector, entry.size);
+    if ((entry.color !== undefined && color === undefined) || (entry.size !== undefined && size === undefined)) {
+        collector.failed = true;
+        return;
+    }
     const flags = split.indices.filter((index) => labeled.has(index));
     collector.series.push({
         x,
         y,
+        ...(color !== undefined ? { color } : {}),
+        ...(size !== undefined ? { size } : {}),
         ...(group !== undefined ? { group } : {}),
         ...(split.category === undefined && split.name !== undefined ? { value: split.name } : {}),
         ...(split.category !== undefined ? { category: split.category } : {}),
         ...(label !== undefined ? { label } : {}),
         ...(flags.length > 0 ? { flags } : {}),
         ...(SORTED_FORMS.has(form) ? { sort: true } : {}),
+        ...(rises ? { rise: true } : {}),
         ...(isHorizontalBar(entry.declared) ? { swap: true } : {}),
     });
 }
-/** The payload column of one resolved channel, or `undefined` when the payload holds no such column. */
+/**
+ * The payload column of one resolved channel, or `undefined` when the payload holds no such column or when the
+ * page cannot build the cells of the channel from it.
+ */
 function columnSource(collector, channel) {
     const column = collector.columns.indexOf(channel.column);
-    if (column < 0) {
+    if (column < 0 || channel.retyped === true) {
         return undefined;
     }
-    return channel.transform === undefined ? { column } : { column, transform: channel.transform };
+    if (channel.transform !== undefined)
+        return { column, transform: channel.transform };
+    return channel.numeric === true ? { column, numeric: true } : { column };
 }
 /**
- * The item style of one runtime series: the muted color, and the opacity of a crowd.
+ * The item style of one runtime series: its own color, and the opacity of a crowd.
  *
  * One member owns the item style, thus a muted crowd keeps both fields. A series that states neither emits
  * no item style, and the theme answers for it.
  */
-function seriesItemStyle(muted, form, density) {
+function seriesItemStyle(color, form, density) {
     const fields = {
-        ...(muted ? { color: MUTED_CHART_COLOR } : {}),
+        ...(color !== undefined ? { color } : {}),
         ...(form === "scatter" && density === "crowd" ? { opacity: SCATTER_CROWD_OPACITY } : {}),
     };
     return Object.keys(fields).length > 0 ? { itemStyle: fields } : {};
@@ -1020,7 +2646,10 @@ function markCarrier(emitted) {
     const colored = emitted.findIndex((entry) => entry.carriesMarks && !entry.muted);
     return colored >= 0 ? colored : emitted.findIndex((entry) => entry.carriesMarks);
 }
-/** The points of one group. A row whose channel gives no value drops, and no substitute value appears. */
+/**
+ * The points of one group. A row whose channel gives no value drops, and no substitute value appears. A wide
+ * channel reads a number, thus a row whose color, size, or bound is not numeric drops too.
+ */
 function collectPoints(entry, indices) {
     const points = [];
     for (const index of indices) {
@@ -1028,17 +2657,32 @@ function collectPoints(entry, indices) {
         const y = entry.y.values[index];
         if (x === null || y === null)
             continue;
-        if (entry.y0 === undefined) {
-            points.push({ index, x, y });
-            continue;
+        const point = { index, x, y };
+        if (entry.y0 !== undefined) {
+            const y0 = entry.y0.values[index];
+            if (y0 === null)
+                continue;
+            point.y0 = y0;
         }
-        const y0 = entry.y0.values[index];
-        if (y0 === null)
-            continue;
-        points.push({ index, x, y, y0 });
+        let complete = true;
+        for (const member of WIDE_MEMBERS) {
+            const channel = entry[member];
+            if (channel === undefined)
+                continue;
+            const value = toNumber(channel.values[index]);
+            if (value === null) {
+                complete = false;
+                break;
+            }
+            point[member] = value;
+        }
+        if (complete)
+            points.push(point);
     }
     return points;
 }
+/** The numeric channels of a point, in the order that an item holds them. */
+const WIDE_MEMBERS = ["color", "size", "low", "high"];
 /**
  * The name of one runtime series.
  *
@@ -1070,15 +2714,21 @@ function seriesName(entry, group, labels, preset) {
  * value, and the category follows. The name of a point still reads the category channel, because the name
  * of a bar is what it counts and not how much it counts.
  */
-function seriesData(entry, points, labeled, horizontal) {
+function seriesData(entry, points, labeled, horizontal, itemColor) {
     const data = [];
     let itemObjects = false;
     for (const point of points) {
         const pair = horizontal ? [point.y, point.x] : [point.x, point.y];
+        // A continuous color and a size each read one member after the pair, thus a visual map names it.
+        if (point.color !== undefined)
+            pair.push(point.color);
+        if (point.size !== undefined)
+            pair.push(point.size);
         const label = entry.label?.[point.index];
         const named = label !== undefined && label !== null;
         const marked = labeled.has(point.index);
-        if (!named && !marked) {
+        const color = itemColor?.(point);
+        if (!named && !marked && color === undefined) {
             data.push(pair);
             continue;
         }
@@ -1087,7 +2737,8 @@ function seriesData(entry, points, labeled, horizontal) {
             value: pair,
             // A marked point of a series with no label channel takes the x cell as its name. Thus the
             // `{b}` of the label template and of the tooltip names a cell of the row, and never nothing.
-            name: named ? String(label) : String(point.x),
+            ...(named || marked ? { name: named ? String(label) : String(point.x) } : {}),
+            ...(color !== undefined ? { itemStyle: { color } } : {}),
             ...(marked ? { label: { ...POINT_LABEL } } : {}),
         });
     }
@@ -1138,13 +2789,17 @@ function runtimeType(form) {
             return "line";
     }
 }
-/** The fields that one form adds to its runtime series. A scatter reads the density ladder here. */
-function formOptions(form, density, itemObjects) {
+/**
+ * The fields that one form adds to its runtime series. A scatter reads the density ladder here.
+ *
+ * `perPoint` states that an item carries a style of its own: a name, a label, a color, or a size.
+ */
+function formOptions(form, density, perPoint) {
     switch (form) {
         case "bar":
             // The base bar rule puts the bars of one category side by side with no gap between them. A bar
             // of either path then reads the same.
-            return { barGap: 0 };
+            return { barGap: 0, barCategoryGap: BAR_CATEGORY_GAP };
         case "line":
             return { showSymbol: false };
         case "step":
@@ -1154,9 +2809,9 @@ function formOptions(form, density, itemObjects) {
         case "scatter":
             return {
                 ...(density === "normal" ? {} : { symbolSize: density === "crowd" ? SCATTER_CROWD_SYMBOL_SIZE : SCATTER_HOVER_SYMBOL_SIZE }),
-                // The large path draws a simplified point, and it drops a per-item style. Thus a series
-                // whose items carry a name or a label keeps the normal path.
-                ...(itemObjects ? {} : { large: true, largeThreshold: LARGE_SCATTER_THRESHOLD }),
+                // The large path draws a simplified point in one fill, and it drops a per-item style. Thus a
+                // series whose items carry a name, a label, a color, or a size keeps the normal path.
+                ...(perPoint ? {} : { large: true, largeThreshold: LARGE_SCATTER_THRESHOLD }),
             };
     }
 }
@@ -1176,6 +2831,9 @@ function plottedRows(resolved, rowCount) {
                 continue;
             if (entry.group !== undefined && entry.group.values[index] === null)
                 continue;
+            // A wide channel reads a number, and a row whose cell is not numeric draws no point.
+            if (WIDE_MEMBERS.some((member) => entry[member] !== undefined && toNumber(entry[member].values[index]) === null))
+                continue;
             plotted.add(index);
             break;
         }
@@ -1225,19 +2883,15 @@ function topRows(rows, column, order, n, plotted) {
  * The mark members of the annotations.
  *
  * A reference line and a reference band both carry a declared constant, thus each one rides as static
- * data of a mark member and nothing here reads a cell.
- *
- * A guide on the x axis runs up the plot. Its end sits at the top, inside the band of the y-axis title, thus
- * its label takes the position at the axis. A guide on the y axis runs across, and its end sits at the right
- * edge, where the label already reads clear.
+ * data of a mark member and nothing here reads a cell. Each line takes the guide style of the figure rules:
+ * a thin gray dash, with its label inside the plot at the far end of the line.
  */
 function markMembers(annotations) {
     const lines = [];
     const areas = [];
     for (const annotation of annotations) {
         if (annotation.kind === "reference-line") {
-            const position = annotation.axis === "x" ? VERTICAL_LABEL_POSITION : undefined;
-            lines.push({ [axisKey(annotation.axis)]: annotation.value, ...markLabel(annotation.label, position) });
+            lines.push(guideLine(annotation.axis, annotation.value, annotation.label));
             continue;
         }
         if (annotation.kind === "reference-band") {
@@ -1249,7 +2903,7 @@ function markMembers(annotations) {
         }
     }
     return {
-        ...(lines.length > 0 ? { markLine: { silent: true, symbol: "none", data: lines } } : {}),
+        ...(lines.length > 0 ? { markLine: guideMarkLine(lines) } : {}),
         ...(areas.length > 0 ? { markArea: { silent: true, data: areas } } : {}),
     };
 }
@@ -1280,17 +2934,26 @@ function axisKey(axis) {
  * the value axis of a horizontal bar. A declared column label and a preset title both follow their own
  * column, thus each one lands on whichever axis draws that column.
  */
-function compositionAxes(rows, first, axes, labels, preset) {
-    if (isHorizontalBar(first.declared)) {
-        return {
-            xAxis: compositionAxis(rows, first.y, "x", axes?.x, labels, preset?.y),
-            yAxis: barCategoryAxis(rows, first.x, "y", axes?.y, labels, preset?.x),
-        };
-    }
-    return {
-        xAxis: compositionXAxis(rows, first, axes?.x, labels, preset?.x),
-        yAxis: compositionAxis(rows, first.y, "y", axes?.y, labels, preset?.y),
-    };
+function compositionAxes(context, first, axes) {
+    const preset = context.preset;
+    const horizontal = isHorizontalBar(first.declared);
+    const xAxis = horizontal ? compositionAxis(context, first.y, "x", axes?.x, preset?.y) : compositionXAxis(context, first, axes?.x, preset?.x);
+    if (xAxis.isErr())
+        return err(xAxis.error);
+    const yAxis = horizontal ? barCategoryAxis(context, first.x, "y", axes?.y, preset?.x) : compositionAxis(context, first.y, "y", axes?.y, preset?.y);
+    if (yAxis.isErr())
+        return err(yAxis.error);
+    if (first.declared.form !== "bar") {
+        return ok({ xAxis: xAxis.value, yAxis: yAxis.value });
+    }
+    // A bar measures from zero. A fitted value axis would cut the zero off, and a bar would draw a height that
+    // no cell holds. Thus the value axis of a bar keeps zero in its range.
+    return ok(horizontal ? { xAxis: unscaled(xAxis.value), yAxis: yAxis.value } : { xAxis: xAxis.value, yAxis: unscaled(yAxis.value) });
+}
+/** One axis with no fitted range. A value axis then holds zero, as the chart runtime draws it by default. */
+function unscaled(axis) {
+    const { scale: _scale, ...rest } = axis;
+    return rest;
 }
 /**
  * The x axis of a composition whose bars stand up, or of any other form.
@@ -1298,30 +2961,31 @@ function compositionAxes(rows, first, axes, labels, preset) {
  * A bar takes a category axis, and every other form takes the inferred axis. A declared scale is the one
  * exception, because the author asked for a numeric axis and a category axis has no scale.
  */
-function compositionXAxis(rows, first, declared, labels, preset) {
+function compositionXAxis(context, first, declared, preset) {
     if (first.declared.form !== "bar" || declared?.scale !== undefined) {
-        return compositionAxis(rows, first.x, "x", declared, labels, preset);
+        return compositionAxis(context, first.x, "x", declared, preset);
     }
-    return barCategoryAxis(rows, first.x, "x", declared, labels, preset);
+    return barCategoryAxis(context, first.x, "x", declared, preset);
 }
 /**
  * The category axis of a composition bar, on whichever axis it renders.
  *
  * A bar counts its categories. The base bar rule lists the values of the category channel in
- * first-appearance order, thus a bar of either path draws the same axis. A declared scale asks for a
- * numeric axis, and a category axis has no scale, thus such an axis falls to the inferred one.
+ * first-appearance order, thus a bar of either path draws the same axis. A channel that declares an order
+ * sorts the list. A declared scale asks for a numeric axis, and a category axis has no scale, thus such an
+ * axis falls to the inferred one.
  *
  * A category axis on y inverts, thus the first row of the table reads at the top of the plot.
  */
-function barCategoryAxis(rows, channel, axis, declared, labels, preset) {
+function barCategoryAxis(context, channel, axis, declared, preset) {
     if (declared?.scale !== undefined) {
-        return compositionAxis(rows, channel, axis, declared, labels, preset);
+        return compositionAxis(context, channel, axis, declared, preset);
     }
-    const categories = firstAppearance(channel.values.filter((value) => value !== null));
-    const title = declared?.title ?? axisTitle(labels, channel.name, preset);
+    const ordered = orderChannel(context, channel, firstAppearance(channel.values.filter((value) => value !== null)));
+    if (ordered.isErr())
+        return err(ordered.error);
     const typeFields = axis === "x" ? { type: "category" } : { ...HORIZONTAL_CATEGORY_AXIS };
-    const nameFields = axis === "x" ? xAxisName(title) : { name: title };
-    return { ...typeFields, data: categories, ...nameFields };
+    return ok({ ...typeFields, data: ordered.value, ...axisNameFields(axis, categoryAxisTitle(context.labels, channel.name, declared?.title)) });
 }
 /**
  * The axis of one composition channel.
@@ -1330,21 +2994,35 @@ function barCategoryAxis(rows, channel, axis, declared, labels, preset) {
  * then the semantic title of the preset, and the raw column name answers last. A declared `log` scale maps
  * onto the logarithmic axis type. A transformed channel gives a number for each point that survives it,
  * thus its axis is a value axis and the cells of the untransformed column decide nothing.
+ *
+ * A channel that declares an order sorts the categories of an inferred category axis. On a value axis the
+ * order sorts nothing, thus it refuses.
  */
-function compositionAxis(rows, channel, axis, declared, labels, preset) {
-    const title = declared?.title ?? axisTitle(labels, channel.name, preset);
-    const nameFields = axis === "x" ? xAxisName(title) : { name: title };
-    if (declared?.scale === "log") {
-        return { type: "log", ...nameFields };
+function compositionAxis(context, channel, axis, declared, preset) {
+    const titles = {
+        value: declared?.title ?? axisTitle(context.labels, channel.name, preset),
+        category: categoryAxisTitle(context.labels, channel.name, declared?.title),
+    };
+    const base = declared?.scale === "log"
+        ? { type: "log", ...axisNameFields(axis, titles.value) }
+        : channel.transformed
+            ? { type: "value", scale: true, ...axisNameFields(axis, titles.value) }
+            : inferAxis(context.rows, channel.name, axis, titles, namesCategories(context.meanings, channel.column));
+    if (channel.order === undefined) {
+        return ok(base);
+    }
+    if (base.type !== "category") {
+        return err(problem(context.blockId, valueAxisOrderFault(channel.column)));
     }
-    const base = channel.transformed ? { type: "value", scale: true } : inferAxis(rows, channel.name, axis, title);
-    return { ...base, ...nameFields };
+    const ordered = orderChannel(context, channel, base.data);
+    return ordered.map((data) => ({ ...base, data }));
 }
-// ── The shared building blocks ──────────────────────────────────────────────
-/** A typed `invalid-chart-input` problem that names the block and the cause. */
-function problem(blockId, detail) {
-    return { blockId, kind: "invalid-chart-input", detail };
+/** Sort the categories of one composition channel by its order, or keep them where it declares none. */
+function orderChannel(context, channel, categories) {
+    const order = channel.order;
+    return orderCategories(context.blockId, context.rows.length, (index) => channel.values[index], categories, order, (index) => (order === undefined ? undefined : context.rows[index][order.by]));
 }
+// ── The shared building blocks ──────────────────────────────────────────────
 /**
  * Resolve one demanded channel to its column name.
  *
@@ -1384,121 +3062,199 @@ function transformedName(transform, column) {
     return `${transform}(${column})`;
 }
 /**
- * The transformed value of one column, one entry for each row. A row with no usable cell gives `null`.
- *
- * The page-side series build holds the twin of this function, because a chart that reads the payload
- * transforms its columns in the browser. A shared test vector runs the two over one set of cells, thus the
- * two cannot give different numbers in silence.
+ * One cell as a category axis reads it. The chart runtime reads a number on a category axis as the place of a
+ * category and never as its name, thus a number gives its text and the point draws at its own category.
  */
-export function transformColumn(rows, column, transform) {
-    if (transform === "rank") {
-        return rankColumn(rows, column);
+function categoryCell(cell) {
+    return typeof cell === "number" ? String(cell) : cell;
+}
+/** True when the cell is a string that does not represent a finite number. */
+function isNonNumericString(cell) {
+    return typeof cell === "string" && toNumber(cell) === null;
+}
+/** The numeric cells of one column, in row order. A non-numeric cell drops. */
+function numericColumn(rows, column) {
+    const values = [];
+    for (const row of rows) {
+        const value = toNumber(row[column]);
+        if (value !== null)
+            values.push(value);
     }
-    return rows.map((row) => applyTransform(toNumber(row[column]), transform));
+    return values;
 }
 /**
- * One per-row transform.
+ * The axis of a line or a scatter column under the order of its channel.
  *
- * `log10` and `neg_log10` give no value for a cell that is not positive, thus the point drops. No
- * substitute value ever appears in its place.
+ * A category axis sorts its categories where the channel declares an order. A value axis draws no category,
+ * thus an order on it is a refusal and never a silent drop.
  */
-function applyTransform(value, transform) {
-    if (value === null)
-        return null;
-    switch (transform) {
-        case "log10":
-            return value > 0 ? Math.log10(value) : null;
-        case "neg_log10":
-            return value > 0 ? -Math.log10(value) : null;
-        case "abs":
-            return Math.abs(value);
+function orderedAxis(blockId, rows, column, axis, titles, order, categorical) {
+    const inferred = inferAxis(rows, column, axis, titles, categorical);
+    if (order === undefined) {
+        return ok(inferred);
     }
+    if (inferred.type !== "category") {
+        return err(problem(blockId, valueAxisOrderFault(column)));
+    }
+    const sorted = orderCategories(blockId, rows.length, (index) => String(rows[index][column]), inferred.data, order, (index) => rows[index][order.by]);
+    return sorted.map((data) => ({ ...inferred, data }));
+}
+/** The refusal of an order on a channel whose axis draws values. */
+function valueAxisOrderFault(column) {
+    return `The column "${column}" draws a value axis, thus its channel takes no "orderBy". An order sorts the categories of a category axis.`;
 }
 /**
- * The competition rank of each cell of one column, over the ascending order of the column.
+ * The set of the focus values, checked against the categories of the chart, or `undefined` for a chart that
+ * declares no focus.
  *
- * The smallest value takes the place 1, and a tie shares its place. Thus the place after a tie of two
- * skips one number, which is what a competition rank states. A cell with no number takes no place, and
- * its point drops. The rank reads the column alone, thus the same rows give the same places.
+ * A focus value that no category holds names a finding that the chart does not draw, thus it refuses. A
+ * chart with no row draws no category at all, and its empty container stands as every empty chart does.
  */
-function rankColumn(rows, column) {
-    const values = rows.map((row) => toNumber(row[column]));
-    const counts = new Map();
-    for (const value of values) {
-        if (value !== null)
-            counts.set(value, (counts.get(value) ?? 0) + 1);
-    }
-    const places = new Map();
-    let place = 1;
-    for (const value of [...counts.keys()].sort((a, b) => a - b)) {
-        places.set(value, place);
-        place += counts.get(value) ?? 0;
+function focusSet(blockId, focus, rowCount, categories) {
+    if (focus === undefined) {
+        return ok(undefined);
+    }
+    if (rowCount > 0) {
+        const held = new Set(categories.flatMap((category) => (category === null || category === undefined ? [] : [String(category)])));
+        for (const value of focus) {
+            if (!held.has(value)) {
+                return err(problem(blockId, `The focus names "${value}", which no category of the chart holds.`));
+            }
+        }
     }
-    return values.map((value) => (value === null ? null : (places.get(value) ?? null)));
+    return ok(new Set(focus));
 }
-/** True when the column exists in the declared header, or in one row at least. */
-function columnPresent(column, rows, columns) {
-    if (columns !== undefined && columns.includes(column))
-        return true;
-    for (const row of rows) {
-        if (Object.prototype.hasOwnProperty.call(row, column))
-            return true;
-    }
-    return false;
+/**
+ * Give each bar of a small bar chart a value label.
+ *
+ * The count of bars reads across the series, and a chart past the bound labels nothing. A stacked part
+ * carries no label, because its label overlaps the next part. A series that `labelable` refuses carries none
+ * either: the whisker of an interval stands where the label would stand. An item that already carries a
+ * label keeps it, thus the point name of an annotation wins. The label text is a static string, thus the option carries
+ * no function and the plotted value stays the cell.
+ */
+function withValueLabels(series, horizontal, textOf, labelable = () => true) {
+    const labeled = (entry) => entry.type === "bar" && entry.stack === undefined && Array.isArray(entry.data);
+    let count = 0;
+    for (const entry of series) {
+        if (labeled(entry))
+            count += entry.data.length;
+    }
+    if (count === 0 || count > BAR_VALUE_LABEL_LIMIT) {
+        return [...series];
+    }
+    return series.map((entry, index) => {
+        if (!labeled(entry) || !labelable(index))
+            return entry;
+        const data = entry.data.map((item) => {
+            // A bar item is a pair or an object whose value is the pair, thus the two forms read one field.
+            const fields = typeof item === "object" && item !== null && !Array.isArray(item) ? item : { value: item };
+            if (fields.label !== undefined || !Array.isArray(fields.value))
+                return item;
+            const cell = fields.value[horizontal ? 0 : 1];
+            return { ...fields, label: { show: true, position: labelPosition(cell, horizontal), formatter: textOf(cell, index) } };
+        });
+        return { ...entry, data };
+    });
 }
-/** Convert one cell to a finite number, or `null` when it is absent or not numeric. */
-function toNumber(cell) {
-    if (typeof cell === "number")
-        return Number.isFinite(cell) ? cell : null;
-    if (typeof cell === "string") {
-        const trimmed = cell.trim();
-        if (trimmed === "")
-            return null;
-        const parsed = Number(trimmed);
-        return Number.isFinite(parsed) ? parsed : null;
+/** The part of the value range that a labeled bar chart adds at an end of its value axis. */
+const LABEL_ROOM_PCT = 15;
+const LABEL_ROOM_SHARE = LABEL_ROOM_PCT / 100;
+const LABEL_AXIS_ROOM = `${LABEL_ROOM_PCT}%`;
+/**
+ * The room of a value axis whose bars carry value labels, or no field for any other axis.
+ *
+ * A label sits past the end of its bar. The end of the longest bar lies at the end of the axis, thus without
+ * room its label would stand over the category labels or past the plot. The room pads only the end of each side
+ * that holds a labeled bar: the chart runtime widens the range before it adds the zero of a bar, thus a pad on a
+ * side with no bar would draw a range under zero that no bar reaches.
+ */
+function labelRoom(series, horizontal) {
+    let negative = false;
+    let positive = false;
+    for (const entry of series) {
+        if (entry.type !== "bar" || !Array.isArray(entry.data))
+            continue;
+        for (const item of entry.data) {
+            if (typeof item !== "object" || item === null || Array.isArray(item) || item.label === undefined)
+                continue;
+            const value = item.value;
+            // The sign rule of `labelPosition`: a bar under zero puts its label at its lower end.
+            if ((toNumber(Array.isArray(value) ? value[horizontal ? 0 : 1] : null) ?? 0) < 0)
+                negative = true;
+            else
+                positive = true;
+        }
     }
-    return null;
+    return negative || positive ? { boundaryGap: [negative ? LABEL_AXIS_ROOM : 0, positive ? LABEL_AXIS_ROOM : 0] } : {};
 }
-/** True when the cell is a string that does not represent a finite number. */
-function isNonNumericString(cell) {
-    return typeof cell === "string" && toNumber(cell) === null;
+/**
+ * The place of the value label of one bar: past the end of the bar, away from the zero line. A negative bar
+ * grows down or to the left, thus its label sits under it or at its left.
+ */
+function labelPosition(cell, horizontal) {
+    const negative = (toNumber(cell) ?? 0) < 0;
+    if (horizontal)
+        return negative ? "left" : "right";
+    return negative ? "bottom" : "top";
 }
-/** The distinct values in first-appearance order. */
-function firstAppearance(values) {
-    const seen = new Set();
-    const order = [];
-    for (const value of values) {
-        if (!seen.has(value)) {
-            seen.add(value);
-            order.push(value);
-        }
-    }
-    return order;
+/**
+ * The value label of one bar: the shown form of the number helper, for the column and the meaning that the
+ * bound table declares. A card and a label of one page then read one number one way.
+ */
+function valueLabelText(column, cell, meanings) {
+    return formatNumberCell(cell, selectNumberKind(column, cell, declaredForColumn(meanings, column))).text;
 }
-/** The numeric cells of one column, in row order. A non-numeric cell drops. */
-function numericColumn(rows, column) {
-    const values = [];
-    for (const row of rows) {
-        const value = toNumber(row[column]);
-        if (value !== null)
-            values.push(value);
-    }
-    return values;
+/**
+ * The legend of a chart that states its own entries: the names of the drawn series, shown at the bottom
+ * where two or more of them exist, and hidden where one exists.
+ *
+ * An auxiliary series carries the name of the series that it annotates, thus it adds no entry of its own.
+ */
+function legendOf(names) {
+    const unique = firstAppearance(names);
+    return unique.length >= 2 ? { bottom: 0, data: unique } : { show: false };
+}
+/**
+ * The offset of one group slot inside a category band, as a fraction of the band.
+ *
+ * The chart runtime draws the bars of one category over 80 percent of the band, one equal slot for each
+ * group. The offset is the center of the slot of `place`. The rounding keeps a float residue out of the
+ * option, thus two slots of one chart read as two clean fractions.
+ */
+function slotOffset(place, count) {
+    if (count <= 1)
+        return 0;
+    return Math.round((((place + 0.5) * GROUP_SPAN) / count - GROUP_SPAN / 2) * 1e6) / 1e6;
 }
+/** The part of one category band that the group slots cover. Each bar series states the matching gap. */
+const GROUP_SPAN = 0.8;
 /**
- * The axis for a line or a scatter column. A column with any non-numeric string cell is a category axis
- * with its distinct values as strings. Any other column is a value axis with `scale: true`.
+ * The category gap of each bar series: the part of one band that the bars leave free.
  *
- * The `axis` argument names the channel that the column feeds. An x column takes the centered name, and a
- * y column keeps the default name placement. The `title` argument names the axis, thus the column decides
- * the axis type and the title decides the text.
+ * The chart runtime computes a gap from the count of the bar series when a series states none, and the slot
+ * offset of an interval reads a fixed span. Thus each bar states the gap that matches `GROUP_SPAN`, and an
+ * interval sits over the center of its own bar.
  */
-function inferAxis(rows, column, axis, title) {
-    const nameFields = axis === "x" ? xAxisName(title) : { name: title };
-    if (rows.some((row) => isNonNumericString(row[column]))) {
-        return { type: "category", data: firstAppearance(rows.map((row) => row[column])).map(String), ...nameFields };
+const BAR_CATEGORY_GAP = "20%";
+/** The two titles of the axis of one quick-path column: its value title, and its declared label alone. */
+function axisTitles(labels, column) {
+    return { value: axisTitle(labels, column), category: categoryAxisTitle(labels, column) };
+}
+/**
+ * The axis for a line or a scatter column. A column that `categorical` marks as a name, and a column with any
+ * non-numeric string cell, is a category axis with its distinct values as strings. Any other column is a value
+ * axis with `scale: true`.
+ *
+ * The `axis` argument names the channel that the column feeds, and the helper of the figure rules places the
+ * name. The column decides the axis type, and the type decides the title: a value axis always names its
+ * quantity, and a category axis names a declared title alone.
+ */
+function inferAxis(rows, column, axis, titles, categorical) {
+    if (categorical || rows.some((row) => isNonNumericString(row[column]))) {
+        return { type: "category", data: firstAppearance(rows.map((row) => row[column])).map(String), ...axisNameFields(axis, titles.category) };
     }
-    return { type: "value", scale: true, ...nameFields };
+    return { type: "value", scale: true, ...axisNameFields(axis, titles.value) };
 }
 /**
  * Build one series per group, in first-appearance order of the group values. A chart with no group
@@ -1514,42 +3270,18 @@ function groupedSeries(rows, groupCol, make) {
     }
     return series;
 }
-/** The row groups in first-appearance order, or one unnamed group when there is no group column. */
-function splitGroups(rows, groupCol) {
-    if (groupCol === undefined) {
-        return [{ name: undefined, rows }];
-    }
-    return firstAppearance(rows.map((row) => row[groupCol])).map((name) => ({
-        name,
-        rows: rows.filter((row) => row[groupCol] === name),
-    }));
-}
-/** Sort `[x, y]` pairs by x. Two numbers compare numerically, and any other pair compares as text. */
-function sortByX(pairs) {
-    return [...pairs].sort((a, b) => compareCell(a[0], b[0]));
-}
 /**
- * Compare two cells for a sort by x, and for a rank rule.
- *
- * A pair that both hold a finite number compares by that number. A text-backed table gives each cell as a
- * string, thus a code-unit order would put `"10"` between `"1"` and `"2"` and a time axis would run out of
- * order. Any other pair compares by the code-unit order of the string form.
- *
- * The comparison never calls `localeCompare`, thus the order stays the same on every host.
+ * Sort `[x, y]` pairs by x. Two numbers compare numerically, and any other pair compares as text. Where an
+ * ordered category axis gives the place of each category, the pairs follow those places.
  */
-function compareCell(a, b) {
-    const leftNumber = toNumber(a);
-    const rightNumber = toNumber(b);
-    if (leftNumber !== null && rightNumber !== null) {
-        return leftNumber - rightNumber;
-    }
-    const left = String(a);
-    const right = String(b);
-    if (left < right)
-        return -1;
-    if (left > right)
-        return 1;
-    return 0;
+function sortByX(pairs, places) {
+    return [...pairs].sort((a, b) => compareAlong(a[0], b[0], places));
+}
+/** Compare two x cells along an ordered category axis, or by the compare of a sort where no axis order applies. */
+function compareAlong(a, b, places) {
+    if (places === undefined)
+        return compareCell(a, b);
+    return (places.get(String(a)) ?? 0) - (places.get(String(b)) ?? 0);
 }
 /**
  * A stable key for one `(x, y)` pair. The key carries the type of each cell, thus the number `1` and the
@@ -1558,6 +3290,10 @@ function compareCell(a, b) {
 function pairKey(xCell, yCell) {
     return `${typeof xCell}:${String(xCell)}${typeof yCell}:${String(yCell)}`;
 }
+/** A stable key for one cell. The key carries the type of the cell, exactly as a pair key does. */
+function cellKey(cell) {
+    return `${typeof cell}:${String(cell)}`;
+}
 // ── The histogram math ──────────────────────────────────────────────────────
 /**
  * The bin edges over the global range. The bin count is the larger of the Sturges count and the
@@ -1665,6 +3401,69 @@ function boxSummary(values) {
     }
     return { box: [whiskerLow, q1, median, q3, whiskerHigh], outliers };
 }
+// ── The violin math ─────────────────────────────────────────────────────────
+/** The half-width of the widest violin of a chart, as a fraction of one category band. */
+const VIOLIN_HALF_WIDTH = 0.4;
+/** The count of values under which a category draws no violin, exactly as it draws no box. */
+const VIOLIN_MIN_VALUES = 5;
+/**
+ * The Gaussian kernel density of one category on the fixed grid, or `undefined` for a category that draws
+ * nothing.
+ *
+ * The bandwidth is the Silverman rule, `0.9 * min(sd, IQR / 1.34) * n^(-1/5)`, with the sample standard
+ * deviation and the type-7 quartiles of the box rule. A category whose quartiles are equal reads the
+ * standard deviation alone, thus a tied middle with spread tails still draws. The grid holds 64 points
+ * from the minimum to the maximum, and the last point pins to the maximum, thus a float drift cannot move
+ * the end of the outline.
+ */
+function violinShape(values) {
+    const n = values.length;
+    if (n < VIOLIN_MIN_VALUES)
+        return undefined;
+    const sorted = [...values].sort((a, b) => a - b);
+    const q1 = quantileType7(sorted, 0.25);
+    const median = quantileType7(sorted, 0.5);
+    const q3 = quantileType7(sorted, 0.75);
+    let sum = 0;
+    for (const value of sorted)
+        sum += value;
+    const mean = sum / n;
+    let squares = 0;
+    for (const value of sorted)
+        squares += (value - mean) * (value - mean);
+    const sd = Math.sqrt(squares / (n - 1));
+    const iqr = q3 - q1;
+    const spread = iqr > 0 ? Math.min(sd, iqr / 1.34) : sd;
+    const bandwidth = 0.9 * spread * Math.pow(n, -1 / 5);
+    if (!(bandwidth > 0))
+        return undefined;
+    const min = sorted[0];
+    const max = sorted[n - 1];
+    const grid = [];
+    for (let point = 0; point < VIOLIN_GRID_POINTS; point += 1) {
+        grid.push(min + (point * (max - min)) / (VIOLIN_GRID_POINTS - 1));
+    }
+    grid[VIOLIN_GRID_POINTS - 1] = max;
+    const norm = 1 / (n * bandwidth * Math.sqrt(2 * Math.PI));
+    const densities = grid.map((at) => {
+        let total = 0;
+        for (const value of sorted) {
+            const z = (at - value) / bandwidth;
+            total += Math.exp(-0.5 * z * z);
+        }
+        return total * norm;
+    });
+    return { grid, densities, q1, median, q3 };
+}
+/**
+ * Round one half-width of an outline to four decimals of a band.
+ *
+ * The density reads `Math.exp`, whose last bit can differ between two engines. Four decimals of a band lies
+ * far under one pixel, thus the rounding costs no shape and one table gives one option on every host.
+ */
+function roundWidth(width) {
+    return Math.round(width * 1e4) / 1e4;
+}
 /**
  * The type-7 quantile of a sorted array. The index is `p * (n - 1)`, and the value interpolates
  * linearly between the `floor` and the `ceil` of that index.