@sophistry/charts 0.0.0-stage → 0.1.0

package/dist/multiview/pair-plot.d.ts

@@ -0,0 +1,153 @@
+/**
+ * A scatter-plot matrix: every pair of variables against each other, with
+ * each variable's distribution on the diagonal. One `chart` per panel in
+ * one group: columns share x, rows share y.
+ */
+import type { SceneNode } from "@sophistry/core";
+import type { BandKey, Point } from "@sophistry/core/geometry";
+import type { Channel } from "../data/channels.js";
+import type { ChartAxisOptions, ChartColorOptions } from "../frame/types.js";
+import type { FacetSpace } from "./facet.js";
+/**
+ * An off-diagonal panel of a {@link pairPlot}, as `offDiagonal` receives it.
+ *
+ * @category Charts
+ */
+export interface PairPanel<T> {
+    /** Every row. */
+    data: readonly T[];
+    /** The variable on this panel's x axis (its column's). */
+    x: string;
+    /** The variable on its y axis (its row's). */
+    y: string;
+    /** Grid row, from the top. */
+    row: number;
+    /** Grid column, from the left. */
+    column: number;
+}
+/**
+ * Props for {@link pairPlot}.
+ *
+ * @category Charts
+ */
+export interface PairPlotProps<T> {
+    /** The rows. */
+    data: readonly T[];
+    /** The numeric fields to pair, in order: the matrix's rows (top to bottom) and columns (left to right). */
+    variables: readonly string[];
+    /** A variable's title under its column and beside its row. Defaults to its name. */
+    variableLabels?: Partial<Record<string, string>>;
+    /** Splits the points and the diagonal's densities by category, one colour each, keyed by one legend. */
+    series?: Channel<T, BandKey>;
+    /** The points' identity channel, as `scatter`'s `key`. */
+    key?: Channel<T, BandKey>;
+    /** Width of the matrix of plots (a legend fits inside; see `autosize`). */
+    width: number;
+    /** Height of the matrix of plots. */
+    height: number;
+    /** Centre of the matrix. Defaults to the origin. */
+    center?: Point;
+    /**
+     * Space between neighbouring panels.
+     * @default 0.35
+     */
+    gap?: number;
+    /** Relative column widths, left to right (one per variable), as `facet`'s `widths`. */
+    widths?: readonly number[];
+    /** Relative row heights, top to bottom, as `facet`'s `heights`. */
+    heights?: readonly number[];
+    /**
+     * `"free"` sizes each column and row by its variable's range (or per axis), so one unit is one
+     * length across the matrix. As `facet`'s `space`; `widths`/`heights` win.
+     * @default "fixed"
+     */
+    space?: FacetSpace;
+    /**
+     * What the diagonal draws: `"density"` (one curve per series), `"histogram"` (bins of the whole
+     * sample), or `false` for nothing.
+     * @default "density"
+     */
+    diag?: "density" | "histogram" | false;
+    /** Histogram diagonal: how many bins. */
+    binCount?: number;
+    /**
+     * Draw only the lower triangle and the diagonal. Read once, at creation.
+     * @default false
+     */
+    corner?: boolean;
+    /**
+     * Marker radius.
+     * @default 0.05
+     */
+    radius?: number;
+    /**
+     * Draws an off-diagonal panel's layers instead of the default scatter: a function returning
+     * layer nodes, called when the panel is made and when `data` changes. A plain value prop; the
+     * bindings pass it through untouched.
+     */
+    offDiagonal?: (panel: PairPanel<T>) => readonly SceneNode[];
+    /** Every panel's axes (tick options, `nice`, `zero`, ...). */
+    axis?: ChartAxisOptions;
+    grid?: boolean | "x" | "y";
+    /**
+     * As `chart`'s `autosize`, over the whole matrix.
+     * @default "fit"
+     */
+    autosize?: "fit" | "pad" | "contain";
+    color?: ChartColorOptions;
+    /**
+     * One legend: on the right (`true`, `"right"`) or in a row over the matrix (`"top"`).
+     * On the right by default when `series` is given.
+     */
+    legend?: boolean | "right" | "top";
+    legendTitle?: string;
+    legendFontSize?: number;
+    title?: string;
+    titleFontSize?: number;
+    /**
+     * Font size of the variables' titles.
+     * @default 0.3
+     */
+    labelFontSize?: number;
+    /**
+     * Reveal, 0..1: every panel's frame, then the data (see `stagger`), then the legend.
+     * @see https://sophistry.dev/guides/chart-animation/#reveals
+     */
+    progress?: number;
+    /**
+     * Fraction of the data reveal spent staggering panels in reading order, 0..0.95.
+     * @default 0
+     */
+    stagger?: number;
+    zIndex?: number;
+    visible?: boolean;
+}
+/**
+ * A pair plot (scatter-plot matrix): panel (row `i`, column `j`) plots `variables[j]` against
+ * `variables[i]`, and the diagonal shows each variable's distribution. Columns share x scales
+ * and rows share y scales, so a point lines up across the matrix; a `series` is one colour
+ * everywhere with one legend.
+ *
+ * @example
+ * ```ts
+ * import { pairPlot } from "@sophistry/charts";
+ *
+ * const flowers = [
+ * 	{ kind: "iris", petal: 1.4, sepal: 5.1, width: 3.5 },
+ * 	{ kind: "iris", petal: 1.3, sepal: 4.9, width: 3 },
+ * 	{ kind: "lily", petal: 4.7, sepal: 7, width: 3.2 },
+ * 	{ kind: "lily", petal: 4.5, sepal: 6.4, width: 3.2 },
+ * ];
+ * pairPlot.create({
+ * 	data: flowers,
+ * 	variables: ["petal", "sepal", "width"],
+ * 	series: "kind",
+ * 	width: 6,
+ * 	height: 6,
+ * });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#multiple-views
+ * @category Charts
+ */
+export declare const pairPlot: import("@sophistry/core").Definition<PairPlotProps<any>, import("@sophistry/core/internal").CompositeNode<PairPlotProps<any>>, keyof PairPlotProps<any>>;

package/dist/multiview/panels.d.ts

@@ -0,0 +1,22 @@
+/**
+ * What the grid presets (`pairPlot`, `jointPlot`) share: a panel is a
+ * `chart` inside a plain `group` that provides its group scope. Internal.
+ */
+import type { CompositeContext, ContainerNode, SceneNode } from "@sophistry/core";
+import type { SideRoom } from "../math/facet.js";
+import type { ChartGroup, ChartGroupScope } from "./chart-group.js";
+/** A panel's nodes: the wrapper providing its scope, and its chart. */
+export interface PanelNodes {
+    wrapper: ContainerNode;
+    plot: SceneNode;
+}
+/** Makes a panel: a chart with `children`, inside a group providing `scope`. */
+export declare function makePanel(scope: ChartGroupScope, children: readonly SceneNode[]): PanelNodes;
+/**
+ * The room kept free around a preset's grid of plots, inside its
+ * footprint, by `autosize`: none (`"pad"`), the right-hand guides
+ * (`"fit"`), or every side (`"contain"`).
+ */
+export declare function outerRoom(autosize: "fit" | "pad" | "contain" | undefined, panels: SideRoom, own: SideRoom, contained?: SideRoom): SideRoom;
+/** Watches a preset's group: reruns its update when a panel published something new. */
+export declare function watchGroup<P>(ctx: CompositeContext<P>, group: ChartGroup, reason: Parameters<CompositeContext<P>["invalidate"]>[0]): void;

package/dist/multiview/parallel-coordinates.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Parallel coordinates: numeric variables side by side as vertical axes,
+ * each datum a polyline through its value on every axis.
+ *
+ * The lines are one path batch (one item per drawn datum, its own stroke;
+ * hover and taps resolve per item). A line's partial reveal is its item's
+ * `progress`, traced by arc length. The axes are
+ * core `numberLine`s and labels.
+ */
+import type { ColorInput } from "@sophistry/core/color";
+import type { Point, Range } from "@sophistry/core/geometry";
+import type { Channel, ColorChannel } from "../data/channels.js";
+import type { TooltipSpec } from "../tooltip.js";
+/**
+ * One axis of a {@link parallelCoordinates} chart.
+ *
+ * @category Charts
+ */
+export interface ParallelAxis<T> {
+    /** The value each datum takes on this axis; non-finite values break the datum's line. */
+    value: Channel<T, number>;
+    /** Written above the axis. */
+    label?: string;
+    /** `[min, max, step?]` in data units. Omitted, fitted to the data. */
+    range?: Range;
+}
+/** @category Charts */
+export interface ParallelCoordinatesProps<T> {
+    /** One polyline per datum. */
+    data: readonly T[];
+    /** One vertical axis per entry, evenly spaced left to right. */
+    axes: readonly ParallelAxis<T>[];
+    /** Distance from the first axis to the last. */
+    width: number;
+    /** Height of each axis. */
+    height: number;
+    /** Centre of the chart. Defaults to the origin. */
+    center?: Point;
+    /** One colour for every line, or `(d, i) => colour`. Wins over `colors`. */
+    color?: ColorChannel<T>;
+    /** Colours cycled across the lines by index. Defaults to the theme's categorical colours. */
+    colors?: readonly ColorInput[];
+    /**
+     * Line width.
+     * @default 0.025
+     */
+    strokeWidth?: number;
+    /**
+     * Line opacity, 0..1, so dense bundles read darker.
+     * @default 0.6
+     */
+    opacity?: number;
+    /**
+     * Font size of the axis labels.
+     * @default 0.24
+     */
+    axisLabelFontSize?: number;
+    /**
+     * Font size of the tick numbers.
+     * @default 0.18
+     */
+    tickFontSize?: number;
+    /**
+     * Reveal, 0..1: the axes draw first, then every line draws left to right across them.
+     * @default 1
+     * @see https://sophistry.dev/guides/chart-animation/#reveals
+     */
+    progress?: number;
+    /**
+     * Fraction of the line reveal spent staggering one datum after the next, 0..0.95.
+     * @default 0
+     */
+    stagger?: number;
+    /** Hover tooltip: `true` lists the datum's value on each axis, or `(d, i) => string`. */
+    tooltip?: TooltipSpec<T>;
+    zIndex?: number;
+    visible?: boolean;
+}
+/**
+ * Parallel coordinates: numeric variables side by side as vertical axes, each datum a
+ * polyline through its value on every axis, for spotting clusters and trade-offs across many
+ * dimensions. Sized by `width` and `height`; needs no `chart`. See {@link parallelLines}
+ * for the geometry alone. The lines are one path batch.
+ *
+ * @example
+ * ```ts
+ * import { parallelCoordinates } from "@sophistry/charts";
+ *
+ * const cars = [
+ * 	{ mpg: 30, hp: 95, weight: 1100 },
+ * 	{ mpg: 22, hp: 150, weight: 1500 },
+ * 	{ mpg: 15, hp: 240, weight: 1900 },
+ * ];
+ * parallelCoordinates.create({
+ * 	data: cars,
+ * 	axes: [
+ * 		{ value: "mpg", label: "mpg" },
+ * 		{ value: "hp", label: "hp" },
+ * 		{ value: "weight", label: "weight" },
+ * 	],
+ * 	width: 8,
+ * 	height: 4,
+ * });
+ * ```
+ *
+ * @see https://sophistry.dev/reference/chart-catalogue/#lines-scatter-and-error-bars
+ * @category Charts
+ */
+export declare const parallelCoordinates: import("@sophistry/core").Definition<ParallelCoordinatesProps<any>, import("@sophistry/core/internal").CompositeNode<ParallelCoordinatesProps<any>>, keyof ParallelCoordinatesProps<any>>;

package/dist/points/event-plot.d.ts

@@ -0,0 +1,67 @@
+/**
+ * `eventPlot`: an event raster, one row of vertical ticks per sequence. One
+ * `line` instances node for every tick of every row (see
+ * `segment-marks.ts`), keyed `"row:tick"`.
+ */
+import type { ColorInput } from "@sophistry/core/color";
+import type { Channel, ColorChannel } from "../data/channels.js";
+/**
+ * Props of {@link eventPlot}.
+ *
+ * @category Charts
+ */
+export interface EventPlotProps<T = unknown> {
+    /** One row per datum (a spike train, a subject, ...). */
+    data: readonly T[];
+    /**
+     * The row's event positions along x, in data units. Defaults to the datum when `data` is
+     * `number[][]`. Empty rows are fine; non-finite entries are skipped.
+     */
+    events?: Channel<T, readonly number[]>;
+    /**
+     * Vertical spacing between rows, in data units: row `i` is centred on `y = i * lineOffset`.
+     * @default 1
+     */
+    lineOffset?: number;
+    /**
+     * Length of each tick in data units, centred on its row.
+     * @default 0.8
+     */
+    lineLength?: number;
+    /** One colour for every row, or `(d, i) => colour`. Wins over `colors`. */
+    color?: ColorChannel<T>;
+    /** Colours cycled across rows by index. Defaults to the theme's categorical colours. */
+    colors?: readonly ColorInput[];
+    /** Line width. */
+    strokeWidth?: number;
+    opacity?: number;
+    /**
+     * Reveal, 0..1: each tick draws from its low end.
+     * @default 1
+     */
+    progress?: number;
+    /**
+     * Fraction of the reveal spent staggering the ticks left to right across every row, 0..0.95, so
+     * the raster fills in as the events happened.
+     * @default 0
+     */
+    stagger?: number;
+    zIndex?: number;
+    visible?: boolean;
+}
+/**
+ * An event raster: one row of vertical ticks per sequence (spike trains, say), each tick at an
+ * event's x. Row 0 is at `y = 0`, so give the axes a y range like `[-1, data.length]`. One
+ * instances node.
+ *
+ * @example
+ * ```ts
+ * import { chart, eventPlot } from "@sophistry/charts";
+ *
+ * chart.create({ width: 8, height: 4, yRange: [-1, 3], children: [eventPlot.create({ data: [[1, 2.5], [0.5, 3], [2]] })] });
+ * ```
+ *
+ * @see https://sophistry.dev/reference/chart-catalogue/#distributions
+ * @category Charts
+ */
+export declare const eventPlot: import("@sophistry/core").Definition<EventPlotProps<any>, import("@sophistry/core/internal").CompositeNode<EventPlotProps<any>>, keyof EventPlotProps<any>>;

package/dist/points/index.d.ts

@@ -0,0 +1,19 @@
+/** Family barrel: per-datum point marks. Re-exported from the package entry. */
+export type { EventPlotProps } from "./event-plot.js";
+export { eventPlot } from "./event-plot.js";
+export type { LabelsProps } from "./labels.js";
+export { labels } from "./labels.js";
+export type { LinksProps, SegmentStyleProps, VectorsProps } from "./links.js";
+export { links, vectors } from "./links.js";
+export type { RectsProps } from "./rects.js";
+export { rects } from "./rects.js";
+export type { RugProps } from "./rug.js";
+export { rug } from "./rug.js";
+export type { ScatterProps, ScatterTrailOptions } from "./scatter.js";
+export { scatter } from "./scatter.js";
+export type { StemProps } from "./stem.js";
+export { stem } from "./stem.js";
+export type { BeeswarmProps, DotDistributionProps, StripProps, } from "./strip.js";
+export { beeswarm, strip } from "./strip.js";
+export type { TickBaseProps, TickXProps, TickYProps } from "./ticks.js";
+export { tickX, tickY } from "./ticks.js";

package/dist/points/labels.d.ts

@@ -0,0 +1,70 @@
+/**
+ * `labels`: text at data positions.
+ *
+ * One `label` node per datum, kept by key: the core has no batched text
+ * (a text spec is one string with its own measured box), and a label beside
+ * its point (`direction`) is placed by that box. Labels annotate a few
+ * points, not thousands, so this is the one point mark that stays per datum.
+ */
+import type { Vec2 } from "@sophistry/core";
+import type { BandKey } from "@sophistry/core/geometry";
+import type { Channel, ColorChannel, PositionValue } from "../data/channels.js";
+import type { KeyedTransitionProps, RevealProps } from "../props.js";
+/**
+ * Props of {@link labels}.
+ *
+ * @category Charts
+ */
+export interface LabelsProps<T = unknown> extends KeyedTransitionProps<T>, RevealProps {
+    /** One label per datum. */
+    data: readonly T[];
+    /** X position: a number in data units (a `Date` reads as epoch ms) or a category on a band axis. Defaults to the index when `data` is `number[]`. */
+    x?: Channel<T, BandKey | PositionValue>;
+    /** Y position: a number in data units or a category on a band axis. Defaults to the datum when `data` is `number[]`. */
+    y?: Channel<T, BandKey | PositionValue>;
+    /** The text. Defaults to the datum, as a number, when `data` is `number[]`. */
+    text?: Channel<T, string>;
+    /** Which side of the point the text sits on (`UP`, `RIGHT`, `UR`, ...), `gap` away. Omitted, the text is centred on the point. */
+    direction?: Vec2;
+    /**
+     * Gap between the point and the text when `direction` is set.
+     * @default 0.18
+     */
+    gap?: number;
+    /**
+     * Font size.
+     * @default 0.26
+     */
+    fontSize?: number;
+    /** Text colour, constant or `(d, i) => colour`. Defaults to the theme foreground. */
+    color?: ColorChannel<T>;
+    opacity?: number;
+    /**
+     * Reveal, 0..1: each label fades in, over the end of the data phase.
+     * @default 1
+     */
+    progress?: number;
+    zIndex?: number;
+    visible?: boolean;
+}
+/**
+ * Text at data positions: names on a scatter, values over a line, annotations at a peak. Each
+ * label is placed by its measured box, so `direction: UP` clears the point by the same gap
+ * for any text. One `label` node per datum (see the file header).
+ *
+ * @example
+ * ```ts
+ * import { UP } from "@sophistry/core";
+ * import { chart, labels } from "@sophistry/charts";
+ *
+ * const cities = [
+ * 	{ name: "Lima", gdp: 15, life: 76 },
+ * 	{ name: "Oslo", gdp: 80, life: 83 },
+ * ];
+ * chart.create({ width: 8, height: 4, children: [labels.create({ data: cities, x: "gdp", y: "life", text: "name", direction: UP })] });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#marks
+ * @category Charts
+ */
+export declare const labels: import("@sophistry/core").Definition<LabelsProps<any>, import("@sophistry/core/internal").CompositeNode<LabelsProps<any>>, keyof LabelsProps<any>>;

package/dist/points/links.d.ts

@@ -0,0 +1,123 @@
+/**
+ * `links` and `vectors`: straight segments between data points, optionally
+ * arrowed. One instances node per layer: `line` items, or `arrow` items
+ * (with a tip) for `arrow: true` and for every vector. Items are keyed by
+ * datum index. The reveal is each item's
+ * `progress` channel, tracing its outline.
+ */
+import type { BandKey } from "@sophistry/core/geometry";
+import type { Channel, ColorChannel, PositionValue } from "../data/channels.js";
+import type { TooltipSpec } from "../tooltip.js";
+/**
+ * Everything {@link links} and {@link vectors} share.
+ *
+ * @category Charts
+ */
+export interface SegmentStyleProps<T> {
+    /** Line colour, constant or `(d, i) => colour`. Defaults to the theme's first series colour. */
+    color?: ColorChannel<T>;
+    /** Line width. */
+    strokeWidth?: number;
+    opacity?: number;
+    /**
+     * Arrow-tip length, when there is a tip.
+     * @default 0.18
+     */
+    tipLength?: number;
+    /**
+     * Reveal, 0..1: each segment draws from its start to its end.
+     * @default 1
+     */
+    progress?: number;
+    /**
+     * Fraction of the reveal spent staggering one segment after the next, 0..0.95.
+     * @default 0
+     */
+    stagger?: number;
+    /** Hover tooltip: `true` for the segment's coordinates, or `(d, i) => string`. */
+    tooltip?: TooltipSpec<T>;
+    zIndex?: number;
+    visible?: boolean;
+}
+/**
+ * Props of {@link links}.
+ *
+ * @category Charts
+ */
+export interface LinksProps<T = unknown> extends SegmentStyleProps<T> {
+    /** One segment per datum. */
+    data: readonly T[];
+    /** Start x: a number in data units (a `Date` reads as epoch ms) or a category on a band axis. */
+    x1: Channel<T, BandKey | PositionValue>;
+    /** Start y: a number in data units or a category on a band axis. */
+    y1: Channel<T, BandKey | PositionValue>;
+    /** End x, as `x1`. */
+    x2: Channel<T, BandKey | PositionValue>;
+    /** End y, as `y1`. */
+    y2: Channel<T, BandKey | PositionValue>;
+    /**
+     * Draw an arrow tip at the end.
+     * @default false
+     */
+    arrow?: boolean;
+}
+/**
+ * Props of {@link vectors}.
+ *
+ * @category Charts
+ */
+export interface VectorsProps<T = unknown> extends SegmentStyleProps<T> {
+    /** One arrow per datum. */
+    data: readonly T[];
+    /** Tail x, in data units (a `Date` reads as epoch ms). */
+    x: Channel<T, PositionValue>;
+    /** Tail y, in data units. */
+    y: Channel<T, PositionValue>;
+    /** X component, in data units (scaled by `scale`). */
+    u: Channel<T, number>;
+    /** Y component, in data units (scaled by `scale`). */
+    v: Channel<T, number>;
+    /**
+     * Multiplies every vector before drawing, to fit long ones in.
+     * @default 1
+     */
+    scale?: number;
+}
+/**
+ * Straight segments from `(x1, y1)` to `(x2, y2)`, optionally arrowed: before/after pairs,
+ * dumbbells, migrations. Each draws in the direction of change. One instances node.
+ *
+ * @example
+ * ```ts
+ * import { chart, links } from "@sophistry/charts";
+ *
+ * const moves = [
+ * 	{ from: 0, a: 1, to: 2, b: 3 },
+ * 	{ from: 1, a: 3, to: 3, b: 0 },
+ * ];
+ * chart.create({ width: 8, height: 4, children: [links.create({ data: moves, x1: "from", y1: "a", x2: "to", y2: "b", arrow: true })] });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#marks
+ * @category Charts
+ */
+export declare const links: import("@sophistry/core").Definition<LinksProps<any>, import("@sophistry/core/internal").CompositeNode<LinksProps<any>>, keyof LinksProps<any>>;
+/**
+ * Arrows from `(x, y)` along `(u, v)`, a quiver plot for data you already have (for a sampled
+ * function, use `vectorField`). Each grows from its tail. One instances node.
+ *
+ * @example
+ * ```ts
+ * import { chart, vectors } from "@sophistry/charts";
+ *
+ * const wind = [
+ * 	{ x: 0, y: 0, u: 1, v: 0.5 },
+ * 	{ x: 1, y: 0, u: 0.8, v: 1 },
+ * ];
+ * chart.create({ width: 8, height: 4, children: [vectors.create({ data: wind, x: "x", y: "y", u: "u", v: "v", scale: 0.5 })] });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#marks
+ * @category Charts
+ */
+export declare const vectors: import("@sophistry/core").Definition<VectorsProps<any>, import("@sophistry/core/internal").CompositeNode<VectorsProps<any>>, keyof VectorsProps<any>>;

package/dist/points/rects.d.ts

@@ -0,0 +1,80 @@
+/**
+ * `rects`: rectangles in data space from `x1`/`x2`/`y1`/`y2`; a pair left
+ * out spans the plot that way. One `rect` instances node per layer.
+ *
+ * Each rectangle reveals by tracing its outline while its
+ * fill comes up (the item's `progress` channel: its reveal and presence).
+ */
+import type { ColorInput } from "@sophistry/core/color";
+import type { MarkTransition } from "../batch.js";
+import type { Channel, ColorChannel, PositionValue } from "../data/channels.js";
+import type { KeyedTransitionProps, RevealProps } from "../props.js";
+import type { TooltipSpec } from "../tooltip.js";
+/**
+ * Props of {@link rects}.
+ *
+ * @category Charts
+ */
+export interface RectsProps<T = unknown> extends KeyedTransitionProps<T>, RevealProps {
+    /** One rectangle per datum. */
+    data: readonly T[];
+    /** Left edge, in data units (a `Date` reads as epoch ms). With `x2` also omitted, the rectangle spans the plot's full width. */
+    x1?: Channel<T, PositionValue>;
+    /** Right edge, in data units. */
+    x2?: Channel<T, PositionValue>;
+    /** Bottom edge, in data units. With `y2` also omitted, the rectangle spans the plot's full height. */
+    y1?: Channel<T, PositionValue>;
+    /** Top edge, in data units. */
+    y2?: Channel<T, PositionValue>;
+    /** Fill, constant or `(d, i) => colour`. Wins over `colors`. */
+    color?: ColorChannel<T>;
+    /** Colours cycled across the rectangles by index. Defaults to the theme's categorical colours. */
+    colors?: readonly ColorInput[];
+    /**
+     * Fill opacity, 0..1.
+     * @default 0.35
+     */
+    fillOpacity?: number;
+    /**
+     * Outline colour.
+     * @default "none"
+     */
+    stroke?: ColorInput;
+    strokeWidth?: number;
+    opacity?: number;
+    /**
+     * Reveal, 0..1: each rectangle traces its outline as its fill comes up.
+     * @default 1
+     */
+    progress?: number;
+    /** Hover tooltip: `(d, i) => string`. */
+    tooltip?: TooltipSpec<T>;
+    /** How rectangles move when `data` changes outside a `to` blend; see {@link MarkTransition}. */
+    transition?: MarkTransition;
+    /**
+     * Paint order; higher draws later. Behind the data by default.
+     * @default -1
+     */
+    zIndex?: number;
+    visible?: boolean;
+}
+/**
+ * Rectangles in data space from `x1`/`x2`/`y1`/`y2`. Leave out a pair and the rectangle spans
+ * the plot that way: a vertical or horizontal span (shaded recessions, a target band); with all
+ * four, a floating box. Drawn behind the data by default. One instances node.
+ *
+ * @example
+ * ```ts
+ * import { chart, rects } from "@sophistry/charts";
+ *
+ * const recessions = [
+ * 	{ start: 2001.2, end: 2001.9 },
+ * 	{ start: 2008, end: 2009.5 },
+ * ];
+ * chart.create({ width: 8, height: 4, children: [rects.create({ data: recessions, x1: "start", x2: "end" })] });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#marks
+ * @category Charts
+ */
+export declare const rects: import("@sophistry/core").Definition<RectsProps<any>, import("@sophistry/core/internal").CompositeNode<RectsProps<any>>, keyof RectsProps<any>>;