@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/plots/bar/markers.js

@@ -0,0 +1,233 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY } from '../../phases/transforms/TransformsPhase';
+import { seriesIdOf } from '../../utils/grouping';
+import { resolveGapAreaStyle } from '../utils/gaps';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import { ValueLabels } from '../../layout/styles/ValueLabels';
+const GAP_KINDS = ['start', 'middle', 'end'];
+/**
+ * Where a bar plot's bars sit, read off the state its phases leave: each
+ * processed row's category and span along the value axis, whether the series
+ * stack, and the slice of its category band each series takes when they sit
+ * side by side. Slices are fractions of the band, so they hold at any width.
+ */
+export function buildBarGeometry(state, seriesPadding) {
+    const valueAxis = PlotAxes.valueOf(state);
+    const categoryAxis = PlotAxes.categoryOf(state);
+    const domain = state.scales[valueAxis]?.domain;
+    // Bars rise from zero, or from the nearest end of a domain that leaves it out.
+    const baseline = (() => {
+        const lo = Number(domain?.[0]);
+        const hi = Number(domain?.[(domain?.length ?? 1) - 1]);
+        if (!domain || domain.length < 2 || Number.isNaN(lo) || Number.isNaN(hi))
+            return 0;
+        const [min, max] = [Math.min(lo, hi), Math.max(lo, hi)];
+        return min > 0 ? min : max < 0 ? max : 0;
+    })();
+    const { stacked, of: spanOf } = ProcessedPositions.span(state.processedData, valueAxis, baseline);
+    const position = ProcessedPositions.of(state.processedData, valueAxis);
+    const categoryOf = (row) => position[categoryAxis](row);
+    const names = [...new Set((state.groupedSeries ?? []).map((g) => g.series.name))];
+    // A lone series, or a stack, fills its whole band: there's nothing to set side by side.
+    const sideBySide = !stacked && names.length > 1;
+    const gap = Math.max(0, Math.min(1, seriesPadding));
+    /** A series' slice of the band, `undefined` while it takes the whole of it. */
+    const sliceOf = (name) => {
+        if (!sideBySide)
+            return undefined;
+        const index = names.indexOf(name);
+        const width = 1 / names.length;
+        const margin = (gap * width) / 2;
+        return {
+            start: index * width + margin,
+            end: (names.length - 1 - index) * width + margin
+        };
+    };
+    return { stacked, baseline, spanOf, categoryOf, sliceOf };
+}
+/**
+ * BarPlot's invisible `role: 'hitArea'` markers - one per hover candidate: a
+ * band across the whole plot along the value axis (full height for vertical
+ * bars, full width for horizontal ones), over its category, or its series'
+ * slice of it. The pointer needn't be over the visible bar. They drive the
+ * plot's hover when it is active.
+ */
+export function buildHitAreas(state, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+hover, ctx) {
+    const { categoryOf, sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const isHorizontal = state.axes?.isHorizontal ?? false;
+    return hover.points.map(({ row, series }) => {
+        const slice = series === undefined ? undefined : sliceOf(series);
+        return {
+            type: 'bar',
+            role: 'hitArea',
+            isHorizontal,
+            data: [row],
+            category: categoryOf(row),
+            hover: hover.active,
+            ...(slice
+                ? isHorizontal
+                    ? { insetTop: slice.start, insetBottom: slice.end }
+                    : { insetLeft: slice.start, insetRight: slice.end }
+                : {})
+        };
+    });
+}
+/**
+ * BarPlot's `styles.values` as one `'text'` marker per series, over the same
+ * processed rows its bars draw (gap rows never get a label). `anchor` places
+ * each label along its bar: past its top (`'outside'`), just inside it
+ * (`'start'`), at its base (`'end'`), or centred (`'middle'`); a stacked bar's
+ * label always sits at the middle of its own span. A grouped bar's label
+ * shifts with its series' slice of the band.
+ */
+export function buildValueLabels(labels, state, ctx) {
+    const { processedData } = state;
+    const isHorizontal = state.axes?.isHorizontal ?? false;
+    if (!processedData)
+        return [];
+    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const { font, anchor, format } = labels;
+    const valueOf = ValueLabels.valueOf(state);
+    const top = (d) => geometry.spanOf(d)?.[1] ?? 0;
+    const position = geometry.stacked
+        ? (d) => {
+            const [from, to] = geometry.spanOf(d) ?? [0, 0];
+            return (from + to) / 2;
+        }
+        : anchor === 'middle' && !isHorizontal
+            ? (d) => top(d) / 2
+            : anchor === 'end'
+                ? () => 0
+                : top;
+    // Outward from the bar's top along the value axis: up for a vertical bar, right for a horizontal one.
+    const outward = anchor === 'outside' ? 6 : anchor === 'start' ? -4 : anchor === 'end' ? 4 : 0;
+    const textAnchor = labels.textAnchor ??
+        (isHorizontal
+            ? anchor === 'outside' || anchor === 'end'
+                ? 'start'
+                : anchor === 'start'
+                    ? 'end'
+                    : 'middle'
+            : 'middle');
+    const lineAnchor = font?.lineAnchor ??
+        (isHorizontal
+            ? 'middle'
+            : anchor === 'outside' || anchor === 'end'
+                ? 'bottom'
+                : anchor === 'start'
+                    ? 'top'
+                    : 'middle');
+    const labelled = processedData.data.filter((d) => d[GAP_VALUE] === undefined && geometry.spanOf(d) !== undefined);
+    return (state.resolvedSeries ?? []).flatMap((s) => {
+        const data = labelled.filter((d) => d[SERIES_ID_KEY] === seriesIdOf(s));
+        if (data.length === 0)
+            return [];
+        return [
+            {
+                type: 'text',
+                data,
+                ...(isHorizontal
+                    ? { x: position, y: geometry.categoryOf }
+                    : { x: geometry.categoryOf, y: position }),
+                bandSlice: geometry.sliceOf(s.name),
+                text: (d) => format(Number(valueOf(d)), s.name),
+                styles: {
+                    ...font,
+                    fill: font?.fill ?? ctx.cfg.axis.color,
+                    fontSize: font?.fontSize ?? 12,
+                    dx: font?.dx ?? (isHorizontal ? outward : 0),
+                    dy: font?.dy ?? (isHorizontal ? 0 : -outward),
+                    textAnchor,
+                    lineAnchor
+                }
+            }
+        ];
+    });
+}
+/**
+ * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
+ * gap fills - drawing the rows the "transforms" phase left, prepended onto
+ * whatever the "statistics" phase already put in `state.markers`, and its
+ * value labels on top of everything.
+ */
+export function buildMarks(state, ctx) {
+    const { gapFillMaps, colorForSeries, processedData } = state;
+    const isHorizontal = state.axes?.isHorizontal ?? false;
+    const [categoryAxis, valueAxis] = isHorizontal ? ['y', 'x'] : ['x', 'y'];
+    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const { channels } = processedData;
+    const gapDefaults = getConfiguration().bar.gap;
+    // Forwarded raw when the transforms left a plain channel (a field key keeps
+    // feeding svelteplot's axis-title inference), read through the geometry otherwise.
+    const category = (channels[categoryAxis] ?? geometry.categoryOf);
+    const bottom = (row) => geometry.spanOf(row)?.[0] ?? geometry.baseline;
+    const top = (row) => geometry.spanOf(row)?.[1] ?? geometry.baseline;
+    // A gap-filled row reads its value through the processed value channel, which
+    // falls back to the filled value; a real row through its own series' one,
+    // which stays a field key whenever the plot has no transforms.
+    const valueOf = (channel) => (geometry.stacked || channel === undefined ? top : channel);
+    const gapValue = valueOf(channels[valueAxis]);
+    function makeMarker(data, slice, value, styles) {
+        if (data.length === 0)
+            return null;
+        const from = (geometry.stacked ? bottom : geometry.baseline);
+        const marker = {
+            type: 'bar',
+            role: 'segment',
+            isHorizontal,
+            data,
+            styles,
+            ...(isHorizontal
+                ? { y: category, x1: from, x2: value }
+                : { x: category, y1: from, y2: value })
+        };
+        if (slice) {
+            if (isHorizontal) {
+                marker.insetTop = slice.start;
+                marker.insetBottom = slice.end;
+            }
+            else {
+                marker.insetLeft = slice.start;
+                marker.insetRight = slice.end;
+            }
+        }
+        return marker;
+    }
+    const isReal = (row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined;
+    const segmentMarkers = [];
+    (state.processedGroups ?? []).forEach((group) => {
+        const name = group.series.name;
+        const slice = geometry.sliceOf(name);
+        const defaultColor = colorForSeries(name);
+        const disabledFill = ctx.interaction?.fillFor(name);
+        for (const seg of group.visualSegments) {
+            const marker = makeMarker(seg.data.filter(isReal), slice, valueOf(group.series[valueAxis]), {
+                fill: disabledFill?.fill ?? seg.styles.fill ?? defaultColor,
+                fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1
+            });
+            if (marker)
+                segmentMarkers.push(marker);
+        }
+        const id = seriesIdOf(group.series);
+        const fills = [...(gapFillMaps.get(id)?.values() ?? [])];
+        const seriesRows = processedData.data.filter((row) => row[SERIES_ID_KEY] === id);
+        for (const kind of GAP_KINDS) {
+            const fill = fills.find((f) => f.kind === kind);
+            if (!fill)
+                continue;
+            const base = resolveGapAreaStyle(fill.style, defaultColor, gapDefaults);
+            const rows = seriesRows.filter((row) => row[GAP_KIND] === kind && geometry.spanOf(row) !== undefined);
+            const marker = makeMarker(rows, slice, gapValue, {
+                ...base,
+                fill: disabledFill?.fill ?? base.fill,
+                fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity
+            });
+            if (marker)
+                segmentMarkers.push(marker);
+        }
+    });
+    return segmentMarkers;
+}

package/dist/plots/box/BoxSummaries.d.ts

@@ -0,0 +1,19 @@
+import type { HoverPosition } from '../../types/phases';
+import type { BoxPlotState, BoxSummaryRow } from '../../types/plots/box/state';
+/**
+ * The boxes a box plot draws, one summary row per series, category and facet
+ * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
+ * so its hover and tooltip read a box rather than every value inside it.
+ */
+export declare class BoxSummaries {
+    /** One summary per box, in the order the processed rows first reach it. */
+    static of<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): BoxSummaryRow[];
+    /** Where a box's summary sits for hover: at its category, level with its median. */
+    static position<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): HoverPosition;
+    /**
+     * How a hovered box reads by default: its series, when the plot groups its
+     * rows; its category; then its five numbers, highest first, and how many
+     * values fall past the whiskers.
+     */
+    static format<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (row: BoxSummaryRow) => string;
+}

package/dist/plots/box/BoxSummaries.js

@@ -0,0 +1,101 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { quantile } from 'd3-array';
+import { SERIES_ID_KEY, SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+import { PANEL_KEY } from '../../phases/facet/FacetPanels';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import { TooltipState } from '../../layout/tooltip/TooltipState.svelte';
+import { isGapValue } from '../utils/gaps';
+/** The whiskers reach this many interquartile ranges past the box, as svelteplot draws them. */
+const WHISKER_IQR = 1.5;
+/** A summary value as a tooltip shows it: at most two decimals. */
+const round = (value) => String(Math.round(value * 100) / 100);
+/**
+ * The boxes a box plot draws, one summary row per series, category and facet
+ * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
+ * so its hover and tooltip read a box rather than every value inside it.
+ */
+export class BoxSummaries {
+    /** One summary per box, in the order the processed rows first reach it. */
+    static of(state) {
+        const processed = state.processedData;
+        if (!processed?.data.length)
+            return [];
+        const valueAxis = PlotAxes.valueOf(state);
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const position = ProcessedPositions.of(processed, valueAxis);
+        const valueOf = position[valueAxis];
+        const categoryOf = position[categoryAxis];
+        const categoryField = processed.channels[categoryAxis];
+        const boxes = new Map();
+        for (const row of processed.data) {
+            const value = valueOf(row);
+            if (isGapValue(value))
+                continue;
+            const n = Number(value);
+            if (!Number.isFinite(n))
+                continue;
+            const key = JSON.stringify([
+                row[SERIES_ID_KEY],
+                row[PANEL_KEY] ?? null,
+                String(categoryOf(row))
+            ]);
+            const box = boxes.get(key);
+            if (box)
+                box.values.push(n);
+            else
+                boxes.set(key, { first: row, values: [n] });
+        }
+        return [...boxes.values()].map(({ first, values }) => {
+            const sorted = values.sort((a, b) => a - b);
+            const p25 = quantile(sorted, 0.25);
+            const median = quantile(sorted, 0.5);
+            const p75 = quantile(sorted, 0.75);
+            const reach = (p75 - p25) * WHISKER_IQR;
+            const inside = sorted.filter((v) => v >= p25 - reach && v <= p75 + reach);
+            const category = categoryOf(first);
+            return {
+                ...(typeof categoryField === 'string' ? { [categoryField]: category } : {}),
+                [SERIES_KEY]: first[SERIES_KEY],
+                [SERIES_ID_KEY]: first[SERIES_ID_KEY],
+                ...(first[PANEL_KEY] !== undefined ? { [PANEL_KEY]: first[PANEL_KEY] } : {}),
+                category,
+                min: inside[0] ?? p25,
+                p25,
+                median,
+                p75,
+                max: inside.at(-1) ?? p75,
+                count: sorted.length,
+                outliers: sorted.filter((v) => v < p25 - reach || v > p75 + reach)
+            };
+        });
+    }
+    /** Where a box's summary sits for hover: at its category, level with its median. */
+    static position(state) {
+        const valueAxis = PlotAxes.valueOf(state);
+        const at = {
+            [valueAxis]: (row) => row.median,
+            [PlotAxes.other(valueAxis)]: (row) => row.category
+        };
+        return at;
+    }
+    /**
+     * How a hovered box reads by default: its series, when the plot groups its
+     * rows; its category; then its five numbers, highest first, and how many
+     * values fall past the whiskers.
+     */
+    static format(state) {
+        const grouped = state.channels?.grouping !== undefined;
+        return (row) => {
+            const lines = grouped ? [String(row[SERIES_KEY])] : [];
+            lines.push(TooltipState.value(row.category));
+            lines.push(`max: ${round(row.max)}`);
+            lines.push(`p75: ${round(row.p75)}`);
+            lines.push(`median: ${round(row.median)}`);
+            lines.push(`p25: ${round(row.p25)}`);
+            lines.push(`min: ${round(row.min)}`);
+            if (row.outliers.length)
+                lines.push(`outliers: ${row.outliers.length}`);
+            return lines.join('\n');
+        };
+    }
+}

package/dist/plots/box/Plot.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../layout/plot/Plot.svelte';
+	import { buildBoxDefaults } from './defaults';
+	import type { BoxPlotProps, BoxPlotCoreProps } from '../../types/plots/box/props';
+
+	/**
+	 * A box plot: the distribution of each series' values per category - quartiles, whiskers and outliers - one box per category, upright, or sideways when the categories run along `y`. Draws from pre-built `series` or flat `data` rows.
+	 * Optional chrome (`title`, `subtitle`, `caption`, `header`, `footer`,
+	 * `legend`) frames it; `timeline` and `facet` slice its `data` rows.
+	 * `margins` is bindable: it reports the margin the plot settled on.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: BoxPlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as BoxPlotCoreProps<TData>}
+	defaults={buildBoxDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

package/dist/plots/box/Plot.svelte.d.ts

@@ -0,0 +1,26 @@
+import Plot from '../../layout/plot/Plot.svelte';
+import type { BoxPlotProps } from '../../types/plots/box/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: BoxPlotProps<TData>;
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Plot: $$IsomorphicComponent;
+type Plot<TData extends Record<string, unknown>> = InstanceType<typeof Plot<TData>>;
+export default Plot;

package/dist/plots/box/defaults.d.ts

@@ -0,0 +1,12 @@
+import type { AxisPlotDefaults } from '../../types/phases';
+import type { BoxPlotState, BoxPlotCtx } from '../../types/plots/box/state';
+/**
+ * BoxPlot on the shared pipeline: one box per category of each series along
+ * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
+ * reads it off the values, in the order the data gives them - with its own
+ * band padding and markers. The value
+ * axis fits the values, without reaching for zero. Its plot defaults to:
+ * hover along the category axis, over one summary per box rather than every
+ * value inside it.
+ */
+export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotCtx>;

package/dist/plots/box/defaults.js

@@ -0,0 +1,34 @@
+import { buildMarks } from './markers';
+import { BoxSummaries } from './BoxSummaries';
+import { TooltipState } from '../../layout/tooltip/TooltipState.svelte';
+/**
+ * BoxPlot on the shared pipeline: one box per category of each series along
+ * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
+ * reads it off the values, in the order the data gives them - with its own
+ * band padding and markers. The value
+ * axis fits the values, without reaching for zero. Its plot defaults to:
+ * hover along the category axis, over one summary per box rather than every
+ * value inside it.
+ */
+export function buildBoxDefaults() {
+    return {
+        data: {
+            discreteAxes: 1,
+            segments: { color: (style) => style?.fill, connect: false }
+        },
+        scales: {
+            bandOrder: 'data',
+            defaults: (_state, ctx) => ({
+                category: { paddingInner: ctx.cfg.box.paddingInner, paddingOuter: ctx.cfg.box.paddingOuter }
+            })
+        },
+        markers: { marks: buildMarks },
+        hover: {
+            rows: BoxSummaries.of,
+            position: BoxSummaries.position,
+            label: () => ((row) => String(row.median)),
+            format: (state) => BoxSummaries.format(state),
+            sort: () => TooltipState.descending((row) => row.median)
+        }
+    };
+}

package/dist/plots/box/markers.d.ts

@@ -0,0 +1,12 @@
+import type { BoxPlotState, BoxPlotCtx } from '../../types/plots/box/state';
+import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+/**
+ * BoxPlot's "markers" phase: one `box` per visual segment of each series,
+ * one box per category of its rows, filled with its series' color (or its
+ * segment's own `fill`). The markers the "statistics" phase already put in
+ * `state.markers` come after, so they render on top.
+ *
+ * A series toggled off in the legend (style mode), or dimmed by hovering
+ * another one, takes the legend's disabled fill.
+ */
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BoxPlotState<TData>, ctx: BoxPlotCtx): AxisBasedMarkersConfig[];

package/dist/plots/box/markers.js

@@ -0,0 +1,34 @@
+/**
+ * BoxPlot's "markers" phase: one `box` per visual segment of each series,
+ * one box per category of its rows, filled with its series' color (or its
+ * segment's own `fill`). The markers the "statistics" phase already put in
+ * `state.markers` come after, so they render on top.
+ *
+ * A series toggled off in the legend (style mode), or dimmed by hovering
+ * another one, takes the legend's disabled fill.
+ */
+export function buildMarks(state, ctx) {
+    const { channels } = state.processedData;
+    const { cfg } = ctx;
+    return (state.processedGroups ?? []).flatMap((group) => {
+        const name = group.series.name;
+        const disabled = ctx.interaction?.fillFor(name);
+        return group.visualSegments.map((seg) => {
+            const { stroke, strokeWidth, strokeOpacity, borderRadius } = seg.styles;
+            const outline = { stroke, strokeWidth, strokeOpacity, borderRadius };
+            return {
+                type: 'box',
+                series: name,
+                data: seg.data,
+                x: channels.x,
+                y: channels.y,
+                bar: {
+                    // The box's own outline, from its segment; unset fields stay svelteplot's.
+                    ...Object.fromEntries(Object.entries(outline).filter(([, v]) => v !== undefined)),
+                    fill: disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name),
+                    fillOpacity: disabled?.fillOpacity ?? seg.styles.fillOpacity ?? cfg.box.fillOpacity
+                }
+            };
+        });
+    });
+}

package/dist/plots/geo/Core.svelte

@@ -0,0 +1,151 @@
+<script lang="ts" generics="TProps extends Record<string, unknown>">
+	import { createGeoFeatures } from './features.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { LegendState } from '../../layout/legend/LegendState.svelte';
+	import { ChannelName } from '../utils/ChannelName';
+	import { Margins } from '../../layout/margins/Margins';
+	import BasePlotLayout from '../../layout/base/BasePlotLayout.svelte';
+	import type { GeoPlotCoreProps } from '../../types/plots/geo/props';
+	import type { CoordinatesConfig } from '../../types/layout/coordinates';
+	import type { GeoPlotState, GeoPlotCtx } from '../../types/plots/geo/state';
+
+	/**
+	 * A map from GeoJSON or TopoJSON. `segments` styles features by id,
+	 * `color` + `scales.color` drive a choropleth ramp, and everything drawn on
+	 * top is a `markers` entry.
+	 */
+	type Props = GeoPlotCoreProps<TProps>;
+
+	let {
+		data,
+		object,
+		featureId,
+		color,
+		grouping,
+		opacity,
+		excludeParts,
+		width,
+		height,
+		styles = {},
+		segments = {},
+		markers = [],
+		scales = {},
+		coordinates = {},
+		margins = $bindable(),
+		tooltip = undefined,
+		pipeline
+	}: Props = $props();
+
+	const cfg = $derived(getConfiguration());
+
+	// ── Resolve data: GeoJSON is synchronous, TopoJSON is converted async ────
+	const resolved = createGeoFeatures<TProps>(
+		() => data,
+		() => object
+	);
+	const rawFeatures = $derived(resolved.features);
+
+	// ── Tile-layer / projection compatibility ────────────────────────────────
+	$effect(() => {
+		if (!styles.tileLayer) return;
+		const proj = coordinates.projection;
+		const name = typeof proj === 'string' ? proj : proj?.type;
+		if (name && name !== 'mercator' && name !== 'transverse-mercator') {
+			console.warn(
+				`GeoPlot: styles.tileLayer only renders correctly with a mercator-family projection - got "${name}". Rendering anyway.`
+			);
+		}
+	});
+
+	/** `coordinates`, with the projection defaulting to `'mercator'` under a tile layer. */
+	const resolvedCoordinates = $derived.by(
+		(): CoordinatesConfig => ({
+			...coordinates,
+			projection: coordinates.projection ?? (styles.tileLayer ? 'mercator' : undefined)
+		})
+	);
+
+	// ── Legend-driven range filter (mirrors HeatmapPlot's own) ────────────────
+	const legendInteraction = $derived(LegendState.current());
+	const range = $derived(legendInteraction?.range);
+
+	/** `scales` plus the fixed lon/lat frame every projection renders against. */
+	const layoutScales = $derived({
+		...scales,
+		x: { domain: [-180, 180] },
+		y: { domain: [90, -90] }
+	});
+
+	const ctx = $derived<GeoPlotCtx<TProps>>({
+		cfg,
+		range,
+		fill: styles.fill,
+		fillOpacity: styles.fillOpacity,
+		stroke: styles.stroke,
+		strokeWidth: styles.strokeWidth,
+		onFeatureClick: styles.onFeatureClick
+	});
+	// The kind's pipeline, built once by its plot, over the state this core seeds.
+	const plotState = $derived(
+		pipeline!.run(
+			{
+				rawFeatures,
+				featureId,
+				color,
+				grouping,
+				opacity,
+				excludeParts,
+				segments,
+				scales,
+				authoredMarkers: markers,
+				tooltip,
+				width,
+				height,
+				margins
+			},
+			ctx
+		) as GeoPlotState<TProps>
+	);
+
+	const allFeatures = $derived(plotState.allFeatures!);
+	const features = $derived(plotState.features!);
+
+	/** `styles`, with the drawn features handed to the tile layer for its fit. */
+	const resolvedStyles = $derived(
+		styles.tileLayer ? { ...styles, tileLayer: { ...styles.tileLayer, features } } : styles
+	);
+
+	// The features match the pointer themselves, while the plot's hover is active.
+	const markersOut = $derived(
+		(plotState.markers ?? []).map((m) =>
+			m.type === 'geo' && !plotState.hover!.active ? { ...m, hover: undefined } : m
+		)
+	);
+
+	/** What `BasePlotLayout` draws from: the features, where each sits, the hover config and scales. */
+	const layoutState = $derived({
+		hover: plotState.hover,
+		hoverPosition: plotState.hoverPosition,
+		hoverRows: plotState.hoverRows,
+		markers: markersOut,
+		scales: layoutScales,
+		channels: {
+			color: { source: ChannelName.of(color, 'color') },
+			opacity: { source: ChannelName.of(opacity, 'opacity') }
+		},
+		colorDomain: plotState.colorDomain,
+		opacityDomain: plotState.opacityDomain,
+		styles: resolvedStyles,
+		marginEstimate: Margins.GEO_ESTIMATE
+	});
+</script>
+
+<!-- `layoutScales` pins x/y to the lon/lat range, which `contour` markers read. -->
+<BasePlotLayout
+	{width}
+	{height}
+	state={layoutState}
+	coordinates={resolvedCoordinates}
+	bind:margins
+	geoAllFeatures={allFeatures}
+/>