@sophistry/charts 0.0.0-stage → 0.1.0

package/dist/multiview/chart-zoom.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Wheel, pinch, drag, box and keyboard zoom for a `chart`, as a writer of
+ * the same range tracks `chartLink` and `rangeBrush` use. Zooming works in
+ * drawn positions, so log, reversed and band axes all zoom correctly.
+ */
+import type { BrushCell } from "./brush.js";
+import type { BrushAxisOption } from "./chart-link.js";
+export type { ChartZoomBox } from "./brush.js";
+/**
+ * Props for {@link chartZoom}.
+ *
+ * @category Charts
+ */
+export interface ChartZoomProps {
+    /** The x range's two ends, `[from, to]`: the tracks the chart's `xRange` reads. */
+    x?: readonly [BrushCell, BrushCell];
+    /** The y range's two ends. Only the axes given (`x`, `y` or both) zoom and pan. */
+    y?: readonly [BrushCell, BrushCell];
+    /**
+     * How far the view may go, in data units: `[min, max]` per axis (or one pair for both). `0`,
+     * Home and a double tap return to them. Defaults to unbounded (a band axis is bounded by its
+     * categories).
+     */
+    bounds?: BrushAxisOption<readonly [number, number]>;
+    /**
+     * The narrowest range a zoom in reaches, in data units (or per axis). Defaults to none (one
+     * category on a band axis).
+     */
+    minSpan?: BrushAxisOption<number>;
+    /**
+     * What a plain wheel does over the plot: `"zoom"` about the cursor, `"pan"`, or `false` to
+     * leave it to the page. A trackpad pinch always zooms unless `false`.
+     * @default "zoom"
+     */
+    wheel?: "zoom" | "pan" | false;
+    /**
+     * Drag on the plot to pan, two fingers to pinch-zoom.
+     * @default true
+     */
+    pan?: boolean;
+    /**
+     * What a plain drag on the plot does: `"pan"` or `"box"` (draw a rectangle to zoom into).
+     * Shift-drag does the other. Escape cancels a box, Backspace steps back out of the last one.
+     * @default "pan"
+     */
+    dragMode?: ChartZoomDragMode;
+    /**
+     * Called when the toolbar chooses a drag mode. With it, `dragMode` is controlled; without it,
+     * the toolbar keeps its own choice.
+     */
+    onDragModeChange?: (mode: ChartZoomDragMode) => void;
+    /**
+     * Whether box zoom is available at all.
+     * @default true
+     */
+    boxZoom?: boolean;
+    /**
+     * A mode toolbar in a plot corner: Pan and Box set the drag mode, Reset returns to `bounds`.
+     * `true` for the defaults, or options.
+     * @default false
+     */
+    toolbar?: boolean | ChartZoomToolbarOptions;
+    /**
+     * On a band axis, settle drags, pinches, boxes and keys on whole categories (the wheel stays
+     * continuous). Defaults to true on a band axis.
+     */
+    snap?: boolean;
+    /**
+     * Multiplies the wheel's zoom.
+     * @default 1
+     */
+    zoomSpeed?: number;
+    /**
+     * Fraction of the view an arrow key pans (Shift: a fifth of it).
+     * @default 0.1
+     */
+    step?: number;
+    /**
+     * How much `+` and `-` zoom per press.
+     * @default 1.25
+     */
+    zoomStep?: number;
+    /** Take no input; the tracks still drive the chart. */
+    disabled?: boolean;
+    /**
+     * Accessible name of the plot as a zoomable control.
+     * @default "zoomable plot"
+     */
+    label?: string;
+    /** Paint order of the (invisible) gesture surface; keep it under the marks you want to hover. */
+    zIndex?: number;
+}
+/**
+ * What a plain drag on a {@link chartZoom} plot does: pan, or draw a box to
+ * zoom into.
+ *
+ * @category Charts
+ */
+export type ChartZoomDragMode = "pan" | "box";
+/**
+ * Options for {@link ChartZoomProps.toolbar}.
+ *
+ * @category Charts
+ */
+export interface ChartZoomToolbarOptions {
+    /**
+     * The plot corner the toolbar sits in.
+     * @default "top-right"
+     */
+    corner?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    /**
+     * The buttons' text size.
+     * @default 0.24
+     */
+    fontSize?: number;
+}
+/**
+ * Zoom and pan for the `chart` it is in, by writing the range tracks the chart reads:
+ * wheel, drag, pinch, box zoom and keyboard (arrows pan, `+`/`-` zoom, `0` resets). It holds
+ * no state, so linked charts, a `rangeBrush` on the same tracks, and animations all stay
+ * in sync. Marks with tooltips drawn after it still answer hover. Which axes zoom (`x`, `y`)
+ * is read on every gesture.
+ *
+ * @example
+ * ```ts
+ * import { derive, track } from "@sophistry/core";
+ * import { chart, chartZoom, linePlot } from "@sophistry/charts";
+ *
+ * const data = Array.from({ length: 60 }, (_, i) => Math.sin(i / 5));
+ * const from = track(0);
+ * const to = track(10);
+ * chart.create({
+ * 	width: 8,
+ * 	height: 3,
+ * 	xRange: derive([from, to], (a, b) => [a, b]),
+ * 	clip: true,
+ * 	children: [chartZoom.create({ x: [from, to], bounds: [0, 59] }), linePlot.create({ data })],
+ * });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#multiple-views
+ * @category Charts
+ */
+export declare const chartZoom: import("@sophistry/core").Definition<ChartZoomProps, import("@sophistry/core/internal").CompositeNode<ChartZoomProps>, keyof ChartZoomProps>;

package/dist/multiview/facet.d.ts

@@ -0,0 +1,238 @@
+/**
+ * Small multiples: one `chart` per category, laid out in a grid, sharing
+ * scales, one colour scale and one legend.
+ *
+ * Each panel is a `chart` inside a plain `group` that provides the panel's
+ * {@link ChartGroupScope} (its share keys and grid place); the panels and
+ * the facet meet in one {@link ChartGroup}. The facet watches the group, so
+ * a panel whose guide room or axis span changed lays the grid out again in
+ * the same commit.
+ */
+import type { SceneNode } from "@sophistry/core";
+import type { BandKey, Point, Range, RangeTransition } from "@sophistry/core/geometry";
+import type { Channel } from "../data/channels.js";
+import type { ChartAxisOptions, ChartColorOptions, ChartSizeLegendOptions, ChartXAxisOptions, ChartYAxisOptions } from "../frame/types.js";
+import type { LayersReveal } from "../props.js";
+/**
+ * How a {@link facet}'s panels share their axes, for both axes or per axis: `"shared"` panels
+ * fit one range (numbers on the outer panels only), `"independent"` each fit their own; x may
+ * be `"column"` (shared down each column) and y `"row"` (shared along each row). `size` sets
+ * whether sized marks (`scatter`'s `size`) share one size scale; it is `"shared"` by default.
+ *
+ * @category Charts
+ */
+export type FacetScales = "shared" | "independent" | {
+    x?: "shared" | "independent" | "column";
+    y?: "shared" | "independent" | "row";
+    size?: "shared" | "independent";
+};
+/**
+ * How a {@link facet} sizes its panels along an axis: `"fixed"` (equal, or by
+ * `widths`/`heights`) or `"free"` (by the length of the panels' ranges). For both axes or per axis.
+ *
+ * @category Charts
+ */
+export type FacetSpace = "fixed" | "free" | {
+    x?: "fixed" | "free";
+    y?: "fixed" | "free";
+};
+/**
+ * One panel of a {@link facet}, as its `panel` builder receives it.
+ *
+ * @category Charts
+ */
+export interface FacetPanel<T> {
+    /** The rows of `data` in this panel. */
+    readonly data: T[];
+    /** The rows of `to` in this panel (empty when `to` has none here); undefined without `to`. */
+    readonly to: T[] | undefined;
+    /** The panel's `row` category, when faceting by rows. */
+    readonly row: BandKey | undefined;
+    /** The panel's `column` category, when faceting by columns. */
+    readonly column: BandKey | undefined;
+    /** Reading-order index (row-major). */
+    readonly index: number;
+}
+/**
+ * Props for {@link facet}.
+ *
+ * @category Charts
+ */
+export interface FacetProps<T> {
+    /** The rows, split into panels by `row` and `column`. */
+    data: readonly T[];
+    /**
+     * A keyed transition's far end, split like `data` and handed to each panel as `panel.to`.
+     * @see https://sophistry.dev/guides/chart-animation/#data-transitions
+     */
+    to?: readonly T[];
+    /** The category that picks a panel's grid row. */
+    row?: Channel<T, BandKey>;
+    /** The category that picks a panel's grid column. */
+    column?: Channel<T, BandKey>;
+    /** The row categories, in order. Defaults to the order first seen. */
+    rows?: readonly BandKey[];
+    /** The column categories, in order. Defaults to the order first seen. */
+    columns?: readonly BandKey[];
+    /**
+     * When faceting by one variable: panels per line, filling left to right, then top to bottom.
+     * Defaults to one line.
+     */
+    wrap?: number;
+    /** Width of the grid of plots (a right-hand legend fits inside; see `autosize`). */
+    width: number;
+    /** Height of the grid of plots. */
+    height: number;
+    /** Centre of the grid. Defaults to the origin. */
+    center?: Point;
+    /**
+     * How the panels share their axes; see {@link FacetScales}. Read once, at creation.
+     * @default "shared"
+     */
+    scales?: FacetScales;
+    /**
+     * Relative column widths, left to right: `[2, 1]` makes the first column twice as wide. Missing
+     * or non-positive entries count as 1. Defaults to equal columns.
+     */
+    widths?: readonly number[];
+    /** Relative row heights, top to bottom, as `widths`. */
+    heights?: readonly number[];
+    /**
+     * `"free"` sizes columns by their panels' x ranges and rows by their y ranges (or per axis), so
+     * one band or unit is equally long in every panel. Pair with `scales: { x: "column" }` for
+     * exact sizing. `widths`/`heights` win.
+     * @default "fixed"
+     */
+    space?: FacetSpace;
+    /**
+     * Space between neighbouring panels, beyond their titles and numbers. Defaults to 0.55 across,
+     * 0.25 down.
+     */
+    gap?: number | {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * As `chart`'s `autosize`, over the whole grid: `"fit"` fits legend, colour bar and right-hand
+     * numbers inside `width`; `"contain"` fits everything inside `width × height`; `"pad"` makes
+     * the grid of plots exactly `width × height`.
+     * @default "fit"
+     */
+    autosize?: "fit" | "pad" | "contain";
+    /**
+     * Each panel's title, as a function of the panel, or `false` for none. Defaults to its category
+     * (`"row · column"`, or the column only when rows are titled in the margin).
+     */
+    panelTitle?: ((panel: FacetPanel<T>) => string) | false;
+    /**
+     * Font size of the panel and row titles.
+     * @default 0.3
+     */
+    panelTitleFontSize?: number;
+    /**
+     * When faceting by `row` (without `wrap`): write each row's category once in the right margin
+     * and the column categories above the top row only. `false` titles every panel `"row ·
+     * column"`.
+     * @default true
+     */
+    marginTitles?: boolean;
+    /** A row's title in the margin. Defaults to `String(row)`. */
+    rowTitle?: (row: BandKey, index: number) => string;
+    /** Fixed x range for every panel, or a `{ from, to, t }` transition. Omitted, fitted. */
+    xRange?: Range | RangeTransition;
+    /** Fixed y range for every panel. */
+    yRange?: Range | RangeTransition;
+    /** As `chart`'s `axis`, for every panel. */
+    axis?: ChartAxisOptions;
+    /** As `chart`'s `xAxis`, for every panel. */
+    xAxis?: ChartXAxisOptions;
+    /** As `chart`'s `yAxis`, for every panel. */
+    yAxis?: ChartYAxisOptions;
+    /** As `chart`'s `grid`, for every panel. */
+    grid?: boolean | "x" | "y";
+    gridColor?: string;
+    /** As `chart`'s `clip`, for every panel. */
+    clip?: boolean;
+    /** As `chart`'s `reveal`, for every panel. */
+    reveal?: LayersReveal;
+    tip?: boolean;
+    /** The shared colour scale: order, colours and legend names. */
+    color?: ChartColorOptions;
+    /**
+     * One legend for every panel: on the right (`true`, `"right"`) or in a row over the grid
+     * (`"top"`). `false` never draws one. On the right by default whenever a layer reports a
+     * series.
+     */
+    legend?: boolean | "right" | "top";
+    legendTitle?: string;
+    legendFontSize?: number;
+    /**
+     * Size keys shared by every panel, for layers sized by value (`scatter`'s `size`), placed with
+     * the legend as `chart`'s `sizeLegend`. Drawn only while the panels share a size scale. `false`
+     * hides them; an object sets title, values and format.
+     * @default true
+     */
+    sizeLegend?: boolean | ChartSizeLegendOptions;
+    /**
+     * One colour bar for every panel, from the first value-coloured layer.
+     * @default false
+     */
+    colorbar?: boolean;
+    colorbarLabel?: string;
+    /** A title over the grid. */
+    title?: string;
+    titleFontSize?: number;
+    /** One x-axis title, centred under the grid. */
+    xLabel?: string;
+    /** One y-axis title, centred left of the grid, reading upward. */
+    yLabel?: string;
+    axisLabelFontSize?: number;
+    /**
+     * Reveal, 0..1: every panel draws its frame, then its data; the legend, size key and colour bar
+     * come last.
+     * @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;
+    /**
+     * Draws one panel's layers: called with the panel when it is
+     * made, and again when its rows change, returning the layer nodes (`scatter.create(...)`).
+     * A plain value prop: the bindings pass the function through untouched, so in Solid or React
+     * give it a function returning nodes made with the definitions' `create`.
+     */
+    panel: (panel: FacetPanel<T>) => readonly SceneNode[];
+}
+/**
+ * Small multiples: `data` split by `row` and/or `column`, one `chart` per panel whose layers
+ * `panel(info)` builds. Panels share scales by default (see `scales`), one colour scale and one
+ * legend, so they compare directly.
+ *
+ * @example
+ * ```ts
+ * import { facet, scatter } from "@sophistry/charts";
+ *
+ * const rows = [
+ * 	{ site: "coast", temp: 14, rain: 80 },
+ * 	{ site: "coast", temp: 18, rain: 60 },
+ * 	{ site: "hills", temp: 9, rain: 120 },
+ * 	{ site: "hills", temp: 13, rain: 95 },
+ * ];
+ * facet.create({
+ * 	data: rows,
+ * 	column: "site",
+ * 	width: 9,
+ * 	height: 3,
+ * 	panel: (panel) => [scatter.create({ data: panel.data, x: "temp", y: "rain" })],
+ * });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#multiple-views
+ * @category Charts
+ */
+export declare const facet: import("@sophistry/core").Definition<FacetProps<any>, import("@sophistry/core/internal").CompositeNode<FacetProps<any>>, keyof FacetProps<any>>;

package/dist/multiview/group-guides.d.ts

@@ -0,0 +1,99 @@
+/**
+ * The guides a group of panels draws once for all of them (title, outer
+ * axis titles, one legend, size keys, one colour bar) and the room they
+ * take. Internal: used by `facet`, `pairPlot` and `jointPlot`.
+ *
+ * {@link createGroupGuides} is made once in the preset's `setup`; each
+ * update calls `measure(...)` (the room, read before laying the grid out)
+ * and then `draw(...)` (the nodes, placed around the laid-out grid). Nodes
+ * are kept by role, so updates write props instead of rebuilding.
+ */
+import type { SceneNode } from "@sophistry/core";
+import type { Bounds, Point } from "@sophistry/core/geometry";
+import type { Theme } from "@sophistry/core/themes";
+import type { ChartSizeLegendOptions, RampExtent, SizeExtent } from "../frame/types.js";
+import type { SizeKeysEnds } from "../guides/size-legend.js";
+import type { SideRoom } from "../math/facet.js";
+import type { ChartGroup } from "./chart-group.js";
+/** Where a group's panels' share of `progress` ends when a legend or colour bar follows. */
+export declare const PANELS_END_WITH_GUIDES = 0.9;
+/** What a group draws once, and how. */
+export interface GroupGuideOptions {
+    title?: string;
+    titleFontSize?: number;
+    /** One title under the grid, centred. */
+    xLabel?: string;
+    /** One title left of the grid, centred and turned to read upward. */
+    yLabel?: string;
+    axisLabelFontSize?: number;
+    /** Draw the shared legend (when a layer reports a series): on the right (`true`, `"right"`) or in a row over the grid (`"top"`). */
+    legend?: boolean | "right" | "top";
+    /** How wide a top legend's row may run before it wraps: the grid's footprint. */
+    legendWidth?: number;
+    legendTitle?: string;
+    legendFontSize?: number;
+    /**
+     * Size keys for layers that size marks by value, one per distinct
+     * `sizeRange`, drawn with the legend. A key is drawn only when every
+     * panel's layers on that range share one scale. `false` (or
+     * `legend: false`) hides them; an object tunes them as `chart`'s `sizeLegend`.
+     * @default true
+     */
+    sizeLegend?: boolean | ChartSizeLegendOptions;
+    /** How tall the keys on the right may stack before the size key moves beside the legend. */
+    keysHeight?: number;
+    /** Draw one colour bar from the first value-coloured layer. */
+    colorbar?: boolean;
+    colorbarLabel?: string;
+}
+/** What `measure` works out: the room, and what `draw` places. */
+export interface GroupGuideMeasure {
+    /** The room the group's own guides take outside the panels' guides, per side. */
+    room: SideRoom;
+    /** The room above and below the grid alone (top legend, title, x title). */
+    vertical: {
+        top: number;
+        bottom: number;
+    };
+    /** Whether a legend, size key or colour bar comes last in the reveal. */
+    guided: boolean;
+    legendShown: boolean;
+    legendTop: boolean;
+    legendSize: {
+        width: number;
+        height: number;
+    } | undefined;
+    sizeKeys: readonly SizeExtent[];
+    size: SizeKeysEnds | undefined;
+    /** The legend and size key placed together, as `chart` places them. */
+    keys: {
+        width: number;
+        height: number;
+        presence: number;
+        sizeAt: Point;
+    } | undefined;
+    ramp: RampExtent | undefined;
+    labelSize: number;
+}
+/** Where `draw` places the guides. */
+export interface GroupGuidePlacement {
+    /** The box around every panel's plotting area. */
+    plots: Bounds;
+    /** The room the panels' own guides take around that box. */
+    panelRoom: SideRoom;
+    /** The box the axis titles centre on, when not all of `plots` (a joint plot's main panel). */
+    labelBox?: Bounds;
+    frameProgress: number;
+    legendProgress: number;
+    zIndex?: number;
+    visible?: boolean;
+}
+/** A group's guides: measure, then draw. */
+export interface GroupGuides {
+    measure(group: ChartGroup, options: GroupGuideOptions, theme: Theme): GroupGuideMeasure;
+    draw(group: ChartGroup, options: GroupGuideOptions, measured: GroupGuideMeasure, at: GroupGuidePlacement, theme: Theme): SceneNode[];
+    /** Disposes the nodes it keeps. */
+    dispose(): void;
+}
+/** Makes a group's guides. Call once, in the preset's `setup`. */
+export declare function createGroupGuides(): GroupGuides;

package/dist/multiview/index.d.ts

@@ -0,0 +1,17 @@
+/** Family barrel: multiview. Owned by its family; re-exported from the package entry. */
+export type { BrushAxis, BrushCell, ChartZoomBox } from "./brush.js";
+export { boxBrushDrags, brushDrags, brushWheel, chartZoomActions, chartZoomDrag, } from "./brush.js";
+export type { ChartGroup, ChartGroupOptions, ChartGroupScope, ChartPanel, GroupMember, GroupPanel, PanelKeys, PanelPlace, PanelRoom, PanelState, } from "./chart-group.js";
+export { chartGroupContext, chartPanel, createChartGroup, } from "./chart-group.js";
+export type { BrushAxisOption, ChartLinkProps, RangeBrushProps, } from "./chart-link.js";
+export { brushedCategories, chartLink, rangeBrush } from "./chart-link.js";
+export type { ChartZoomDragMode, ChartZoomProps, ChartZoomToolbarOptions, } from "./chart-zoom.js";
+export { chartZoom } from "./chart-zoom.js";
+export type { FacetPanel, FacetProps, FacetScales, FacetSpace, } from "./facet.js";
+export { facet } from "./facet.js";
+export type { JointPlotProps } from "./joint-plot.js";
+export { jointPlot } from "./joint-plot.js";
+export type { PairPanel, PairPlotProps } from "./pair-plot.js";
+export { pairPlot } from "./pair-plot.js";
+export type { ParallelAxis, ParallelCoordinatesProps, } from "./parallel-coordinates.js";
+export { parallelCoordinates } from "./parallel-coordinates.js";

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

@@ -0,0 +1,114 @@
+/**
+ * A scatter with each variable's distribution along its edge, as three
+ * linked `chart`s in one group: the marginals follow the scatter's fit
+ * without adding their tails to it.
+ */
+import type { SceneNode } from "@sophistry/core";
+import type { BandKey, Point, Range, RangeTransition } from "@sophistry/core/geometry";
+import type { Channel } from "../data/channels.js";
+import type { ChartColorOptions, ChartXAxisOptions, ChartYAxisOptions } from "../frame/types.js";
+/**
+ * Props for {@link jointPlot}.
+ *
+ * @category Charts
+ */
+export interface JointPlotProps<T> {
+    /** One point per datum. */
+    data: readonly T[];
+    /** The horizontal variable. */
+    x: Channel<T, number>;
+    /** The vertical variable. */
+    y: Channel<T, number>;
+    /** Splits the points and the marginal densities by category, one colour each. */
+    series?: Channel<T, BandKey>;
+    /** The scatter's identity channel, as `scatter`'s `key`. */
+    key?: Channel<T, BandKey>;
+    /** Width of the main plot and its right marginal (a legend fits inside; see `autosize`). */
+    width: number;
+    /** Height of the main plot and its top marginal. */
+    height: number;
+    /** Centre of the figure. Defaults to the origin. */
+    center?: Point;
+    /**
+     * How much larger the main plot is than a marginal, along their shared axis.
+     * @default 5
+     */
+    ratio?: number;
+    /**
+     * Gap between the main plot and each marginal.
+     * @default 0.15
+     */
+    space?: number;
+    /**
+     * What the marginals draw: `"density"` (split by `series`, normalised together) or
+     * `"histogram"` (bins of the whole sample).
+     * @default "density"
+     */
+    marginal?: "density" | "histogram";
+    /** Histogram marginals: how many bins. Defaults to `histogramBins`' rule. */
+    binCount?: number;
+    /**
+     * Density marginals: normalise all series together, so each curve's area is its share of the
+     * sample.
+     * @default true
+     */
+    commonNorm?: boolean;
+    /** Marker radius. Defaults to `scatter`'s. */
+    radius?: number;
+    /** Fixed x range, shared by the scatter and the top marginal. Omitted, fitted to the points. */
+    xRange?: Range | RangeTransition;
+    /** Fixed y range, shared by the scatter and the right marginal. */
+    yRange?: Range | RangeTransition;
+    /** The main plot's x axis. */
+    xAxis?: ChartXAxisOptions;
+    /** The main plot's y axis. */
+    yAxis?: ChartYAxisOptions;
+    /** The main plot's grid. */
+    grid?: boolean | "x" | "y";
+    /**
+     * As `chart`'s `autosize`, over the whole figure.
+     * @default "fit"
+     */
+    autosize?: "fit" | "pad" | "contain";
+    color?: ChartColorOptions;
+    /**
+     * One legend: on the right (`true`, `"right"`) or in a row over the figure (`"top"`).
+     * On the right by default when `series` is given.
+     */
+    legend?: boolean | "right" | "top";
+    legendTitle?: string;
+    legendFontSize?: number;
+    title?: string;
+    titleFontSize?: number;
+    /** The x variable's title, centred under the main plot. */
+    xLabel?: string;
+    /** The y variable's title, centred left of the main plot, reading upward. */
+    yLabel?: string;
+    axisLabelFontSize?: number;
+    /**
+     * Reveal, 0..1: every frame, then the points and both marginals together, then the legend.
+     * @see https://sophistry.dev/guides/chart-animation/#reveals
+     */
+    progress?: number;
+    zIndex?: number;
+    visible?: boolean;
+    /** More layers on the main plot (a regression line, annotations). */
+    children?: readonly SceneNode[];
+}
+/**
+ * A joint plot: a scatter of `x` against `y` with each variable's distribution along the
+ * matching edge (`x`'s above, `y`'s on the right). The marginals share the scatter's scales,
+ * and a `series` is one colour in all three panels with one legend.
+ *
+ * @example
+ * ```ts
+ * import { jointPlot } from "@sophistry/charts";
+ *
+ * const points = Array.from({ length: 100 }, (_, i) => ({ x: Math.sin(i), y: Math.cos(i * 1.3), g: i % 2 ? "a" : "b" }));
+ * jointPlot.create({ data: points, x: "x", y: "y", series: "g", width: 7, height: 6 });
+ * ```
+ *
+ * @see https://sophistry.dev/guides/charts/#multiple-views
+ * @category Charts
+ */
+export declare const jointPlot: import("@sophistry/core").Definition<JointPlotProps<any>, import("@sophistry/core/internal").CompositeNode<JointPlotProps<any>>, keyof JointPlotProps<any>>;