svelteplot 0.13.0 → 0.14.0

package/dist/marks/DelaunayMesh.svelte.d.ts

@@ -0,0 +1,172 @@
+import type { DataRecord, ChannelAccessor } from '../types/index.js';
+declare function $$render<Datum = DataRecord>(): {
+    props: Partial<{
+        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        mask: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        class: string;
+        style: string;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
+    }> & {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate triangulations per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum = DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum = DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum = DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Renders the full Delaunay triangulation as a single SVG path. */
+declare const DelaunayMesh: $$IsomorphicComponent;
+type DelaunayMesh<Datum = DataRecord> = InstanceType<typeof DelaunayMesh<Datum>>;
+export default DelaunayMesh;

package/dist/marks/Density.svelte

@@ -0,0 +1,461 @@
+<!-- @component
+    Renders two-dimensional kernel density estimation as filled or stroked
+    contour paths.
+
+    Data points with `x` and `y` channels are projected into pixel space and
+    passed to d3's `contourDensity` estimator, which uses a Gaussian kernel to
+    produce a density grid.  Iso-density contour bands are then drawn using the
+    marching-squares algorithm.
+
+    Styling: `fill` and `stroke` accept ordinary CSS color strings **or** the
+    special keyword `"density"`, which maps each contour level's estimated
+    density through the plot's color scale.  Defaults: `fill="none"`,
+    `stroke="currentColor"`.
+
+    Supports faceting via `fx`/`fy`.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface DensityMarkProps {
+        /** Input data — an array of records with x/y positions. */
+        data?: Datum[] | null;
+        /** x position channel (data space). */
+        x?: ChannelAccessor<Datum>;
+        /** y position channel (data space). */
+        y?: ChannelAccessor<Datum>;
+        /** Optional weight channel; defaults to 1 for each point. */
+        weight?: ChannelAccessor<Datum>;
+        /**
+         * Gaussian kernel bandwidth in screen pixels (default 20).
+         * Larger values produce smoother, more blurred density estimates.
+         */
+        bandwidth?: number;
+        /**
+         * Density threshold levels.  Can be:
+         * - a **count** (number): that many evenly-spaced levels from 0 to the
+         *   maximum density (default 20)
+         * - an explicit **array** of threshold values in k-scaled density units
+         *   (where k = 100; values from 0 to roughly 100× the peak density)
+         */
+        thresholds?: number | number[];
+        /**
+         * Fill color for density bands.  Use `"density"` to map each band's
+         * estimated density through the plot's color scale.  Default `"none"`.
+         */
+        fill?: string;
+        /**
+         * Stroke color for density isolines.  Use `"density"` to map each
+         * isoline's estimated density through the plot's color scale.
+         * Default `"currentColor"` when fill is `"none"`, otherwise `"none"`.
+         */
+        stroke?: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+        clipPath?: string;
+        class?: string;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+        /** the horizontal facet channel */
+        fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
+        fy?: ChannelAccessor<Datum>;
+    }
+
+    import type {
+        DataRecord,
+        ChannelAccessor,
+        ScaledDataRecord,
+        MarkType,
+        RawValue
+    } from '../types/index.js';
+    import GeoPathGroup from './helpers/GeoPathGroup.svelte';
+    import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+    import { contourDensity } from 'd3-contour';
+    import { geoPath } from 'd3-geo';
+    import Mark from '../Mark.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
+    import { ORIGINAL_NAME_KEYS } from '../constants.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    // Per-band fake-datum symbols — used to attach the density geometry,
+    // extent, and pre-resolved facet values to the synthetic records passed
+    // to <Mark> for scale-domain registration and facet filtering.
+    const GEOM = Symbol('density_geom');
+    const FX_VAL = Symbol('density_fx');
+    const FY_VAL = Symbol('density_fy');
+    const X1_VAL = Symbol('density_x1');
+    const X2_VAL = Symbol('density_x2');
+    const Y1_VAL = Symbol('density_y1');
+    const Y2_VAL = Symbol('density_y2');
+
+    /**
+     * Arbitrary scale factor matching Observable Plot's density mark.
+     * Multiplying raw density values (in 1/px²) by k makes thresholds
+     * human-readable integers rather than tiny floating-point numbers.
+     */
+    const k = 100;
+
+    const DEFAULTS = {
+        ...getPlotDefaults().density
+    };
+
+    let markProps: DensityMarkProps = $props();
+
+    const {
+        data,
+        x: xAcc,
+        y: yAcc,
+        weight: weightAcc,
+        bandwidth = 20,
+        thresholds: thresholdSpec = 20,
+        fill = 'none',
+        stroke: rawStroke,
+        strokeWidth,
+        strokeOpacity,
+        fillOpacity,
+        opacity,
+        strokeMiterlimit = 1,
+        clipPath,
+        class: className = '',
+        canvas = false,
+        fx: fxAcc,
+        fy: fyAcc,
+        ...options
+    }: DensityMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const plot = usePlot();
+
+    const fillDensity = $derived(/^density$/i.test(fill ?? ''));
+
+    /**
+     * When fill is active (not "none" or "density"), stroke defaults to "none";
+     * otherwise it defaults to "currentColor".
+     */
+    const effectiveStroke = $derived(rawStroke ?? (fill !== 'none' ? 'none' : 'currentColor'));
+
+    const strokeDensity = $derived(/^density$/i.test(effectiveStroke ?? ''));
+
+    /**
+     * True when fill or stroke uses the `"density"` keyword — the color scale
+     * is used to encode density values.
+     */
+    const markUsesColorScale = $derived(fillDensity || strokeDensity);
+
+    /** Resolve a channel accessor against a single datum. */
+    function resolveAcc(acc: ChannelAccessor<any> | undefined, d: any): any {
+        if (acc == null) return undefined;
+        if (typeof acc === 'function') return (acc as (d: any) => any)(d);
+        return (d as any)[acc as string];
+    }
+
+    /** Pixel-space bounds of the current facet (or full plot if not faceted). */
+    function getBounds() {
+        const facetWidth = plot.facetWidth ?? 100;
+        const facetHeight = plot.facetHeight ?? 100;
+        const marginLeft = plot.options.marginLeft ?? 0;
+        const marginTop = plot.options.marginTop ?? 0;
+        return {
+            bx1: marginLeft,
+            by1: marginTop,
+            w: Math.max(1, Math.round(facetWidth)),
+            h: Math.max(1, Math.round(facetHeight))
+        };
+    }
+
+    type DensityGeometry = {
+        type: 'MultiPolygon';
+        coordinates: number[][][][];
+        /** k-scaled density threshold (value × k); used for color mapping. */
+        value: number;
+        /** pre-resolved fx channel value for facet filtering */
+        fxVal?: RawValue;
+        /** pre-resolved fy channel value for facet filtering */
+        fyVal?: RawValue;
+    };
+
+    /**
+     * All density contour bands across every facet group.
+     *
+     * Phase 1: compute density grids per facet group, find global max density.
+     * Phase 2: derive thresholds from global max (for consistent color scale).
+     * Phase 3: compute contour geometries at those thresholds.
+     *
+     * Geometries are tagged with fxVal/fyVal so <Mark> can filter per panel.
+     */
+    const densityResult = $derived.by((): DensityGeometry[] | null => {
+        const xFn = plot.scales.x?.fn;
+        const yFn = plot.scales.y?.fn;
+        if (!xFn || !yFn || !data?.length) return null;
+
+        const { bx1, by1, w, h } = getBounds();
+        const isFaceted = fxAcc != null || fyAcc != null;
+
+        // Group data by (fxVal, fyVal) — a single group when not faceted.
+        const groups = new SvelteMap<string, { fxVal: RawValue; fyVal: RawValue; items: any[] }>();
+        for (const d of data as any[]) {
+            const fxVal = isFaceted ? resolveAcc(fxAcc, d) : undefined;
+            const fyVal = isFaceted ? resolveAcc(fyAcc, d) : undefined;
+            const key = `${fxVal}\0${fyVal}`;
+            if (!groups.has(key)) groups.set(key, { fxVal, fyVal, items: [] });
+            groups.get(key)!.items.push(d);
+        }
+
+        // Phase 1: build a density estimator per group, record max density.
+        type GroupEntry = {
+            fxVal: RawValue;
+            fyVal: RawValue;
+            /** function returned by kde.contours(data); call it with a threshold */
+            contourFn: (t: number) => DensityGeometry;
+            maxVal: number;
+        };
+        const groupEntries: GroupEntry[] = [];
+        let globalMax = 0;
+
+        for (const { fxVal, fyVal, items } of groups.values()) {
+            if (!items.length) continue;
+
+            const kde = contourDensity<any>()
+                .x((d) => (xFn(resolveAcc(xAcc, d)) as number) - bx1)
+                .y((d) => (yFn(resolveAcc(yAcc, d)) as number) - by1)
+                .weight(weightAcc != null ? (d) => +(resolveAcc(weightAcc, d) ?? 1) : () => 1)
+                .size([w, h])
+                .bandwidth(bandwidth);
+
+            // .contours() is in d3-contour v4 but not typed in @types/d3-contour
+            const contourFn = (kde as any).contours(items) as {
+                (t: number): DensityGeometry;
+                max: number;
+            };
+            const maxVal = contourFn.max;
+            if (maxVal > globalMax) globalMax = maxVal;
+            groupEntries.push({ fxVal, fyVal, contourFn, maxVal });
+        }
+
+        if (!groupEntries.length || globalMax === 0) return null;
+
+        // Phase 2: derive thresholds from global max density.
+        let T: number[];
+        if (Array.isArray(thresholdSpec)) {
+            T = thresholdSpec as number[];
+        } else {
+            const n = thresholdSpec as number;
+            // Generate n-1 levels evenly spaced over (0, globalMax × k]
+            T = Array.from({ length: n - 1 }, (_, i) => (globalMax * k * (i + 1)) / n);
+        }
+        if (!T.length) return null;
+
+        // Phase 3: compute contour geometries for each group at each threshold.
+        const allGeoms: DensityGeometry[] = [];
+
+        for (const { fxVal, fyVal, contourFn } of groupEntries) {
+            for (const t of T) {
+                // contourFn expects actual density values; t is k-scaled.
+                const geom = contourFn(t / k);
+
+                // Translate from facet-local [0, w]×[0, h] to SVG coordinates.
+                for (const rings of geom.coordinates) {
+                    for (const ring of rings) {
+                        for (const point of ring) {
+                            point[0] += bx1;
+                            point[1] += by1;
+                        }
+                    }
+                }
+
+                geom.value = t; // k-scaled, used for color mapping
+                if (isFaceted && fxVal !== undefined) geom.fxVal = fxVal;
+                if (isFaceted && fyVal !== undefined) geom.fyVal = fyVal;
+                allGeoms.push(geom);
+            }
+        }
+
+        // Anchor the color scale at zero so the first density band is
+        // distinguishable from the background.  One anchor per facet group so
+        // no record ever has an undefined fx/fy value, which would otherwise
+        // introduce a spurious null facet panel.
+        if (markUsesColorScale) {
+            for (const { fxVal, fyVal } of groupEntries) {
+                const anchor: DensityGeometry = {
+                    type: 'MultiPolygon',
+                    coordinates: [],
+                    value: 0
+                };
+                if (isFaceted && fxVal !== undefined) anchor.fxVal = fxVal;
+                if (isFaceted && fyVal !== undefined) anchor.fyVal = fyVal;
+                allGeoms.push(anchor);
+            }
+        }
+
+        return allGeoms.length > 0 ? allGeoms : null;
+    });
+
+    /**
+     * Data-space extent used to bootstrap the x/y scale domains before
+     * densityResult is available (density computation needs the scale fns,
+     * which need the domain — this breaks the circular dependency).
+     */
+    const extent = $derived.by(() => {
+        if (!data?.length) return null;
+        let xMin = Infinity,
+            xMax = -Infinity,
+            yMin = Infinity,
+            yMax = -Infinity;
+        let xUsesDate = false,
+            yUsesDate = false;
+        for (const d of data as any[]) {
+            const xv = resolveAcc(xAcc, d);
+            const yv = resolveAcc(yAcc, d);
+            if (xv instanceof Date) {
+                xUsesDate = true;
+                const ms = xv.getTime();
+                if (isFinite(ms)) {
+                    if (ms < xMin) xMin = ms;
+                    if (ms > xMax) xMax = ms;
+                }
+            } else if (typeof xv === 'number' && isFinite(xv)) {
+                if (xv < xMin) xMin = xv;
+                if (xv > xMax) xMax = xv;
+            }
+            if (yv instanceof Date) {
+                yUsesDate = true;
+                const ms = yv.getTime();
+                if (isFinite(ms)) {
+                    if (ms < yMin) yMin = ms;
+                    if (ms > yMax) yMax = ms;
+                }
+            } else if (typeof yv === 'number' && isFinite(yv)) {
+                if (yv < yMin) yMin = yv;
+                if (yv > yMax) yMax = yv;
+            }
+        }
+        if (!isFinite(xMin) || !isFinite(xMax) || !isFinite(yMin) || !isFinite(yMax)) return null;
+        return {
+            x1: xUsesDate ? new Date(xMin) : xMin,
+            x2: xUsesDate ? new Date(xMax) : xMax,
+            y1: yUsesDate ? new Date(yMin) : yMin,
+            y2: yUsesDate ? new Date(yMax) : yMax
+        };
+    });
+
+    /**
+     * Unified mark data passed to <Mark> for scale-domain registration and
+     * facet filtering.
+     *
+     * A bootstrap extent record is always included before densityResult is
+     * computed (scatter-style circular dependency with x/y scales).  Each
+     * per-band fake datum carries:
+     *   [X1_VAL]..[Y2_VAL]  data-space extent → x/y scale domain
+     *   [RAW_VALUE]          k-scaled density  → color scale domain
+     *   [FX_VAL]/[FY_VAL]   facet values      → Mark facet filtering
+     *   [GEOM]               geometry          → rendered by children snippet
+     */
+    const markData = $derived.by((): DataRecord[] => {
+        const ext = extent;
+        const records: any[] = [];
+        // Bootstrap extent record(s) so x/y scales are available for density
+        // computation on the first render pass.  When faceted, emit one record
+        // per unique (fxVal, fyVal) combination so no record carries an
+        // undefined fx/fy value (which would create a spurious null facet).
+        if (ext && !densityResult) {
+            const isFaceted = fxAcc != null || fyAcc != null;
+            if (isFaceted && data?.length) {
+                const seen = new SvelteSet<string>();
+                for (const d of data as any[]) {
+                    const fxVal = resolveAcc(fxAcc, d);
+                    const fyVal = resolveAcc(fyAcc, d);
+                    const key = `${fxVal}\0${fyVal}`;
+                    if (!seen.has(key)) {
+                        seen.add(key);
+                        records.push({
+                            [X1_VAL]: ext.x1,
+                            [X2_VAL]: ext.x2,
+                            [Y1_VAL]: ext.y1,
+                            [Y2_VAL]: ext.y2,
+                            [FX_VAL]: fxVal,
+                            [FY_VAL]: fyVal
+                        });
+                    }
+                }
+            } else {
+                records.push({
+                    [X1_VAL]: ext.x1,
+                    [X2_VAL]: ext.x2,
+                    [Y1_VAL]: ext.y1,
+                    [Y2_VAL]: ext.y2
+                });
+            }
+        }
+
+        if (densityResult) {
+            for (const geom of densityResult) {
+                records.push({
+                    [X1_VAL]: ext?.x1,
+                    [X2_VAL]: ext?.x2,
+                    [Y1_VAL]: ext?.y1,
+                    [Y2_VAL]: ext?.y2,
+                    [RAW_VALUE]: geom.value,
+                    [FX_VAL]: geom.fxVal,
+                    [FY_VAL]: geom.fyVal,
+                    [GEOM]: geom
+                });
+            }
+        }
+
+        return records as DataRecord[];
+    });
+
+    const markChannels = $derived(
+        markUsesColorScale
+            ? (['x1', 'x2', 'y1', 'y2', 'fill'] as const)
+            : (['x1', 'x2', 'y1', 'y2'] as const)
+    );
+
+    const markFill = $derived(markUsesColorScale ? (RAW_VALUE as any) : undefined);
+    const markFx = $derived(fxAcc != null ? FX_VAL : undefined);
+    const markFy = $derived(fyAcc != null ? FY_VAL : undefined);
+
+    const markChannelProps = $derived({
+        x1: X1_VAL as any,
+        x2: X2_VAL as any,
+        y1: Y1_VAL as any,
+        y2: Y2_VAL as any,
+        fill: markFill as any,
+        fx: markFx as any,
+        fy: markFy as any,
+        ...(typeof xAcc === 'string' && { [ORIGINAL_NAME_KEYS.x]: xAcc }),
+        ...(typeof yAcc === 'string' && { [ORIGINAL_NAME_KEYS.y]: yAcc }),
+        ...(markUsesColorScale && { [ORIGINAL_NAME_KEYS.fill]: 'Density' })
+    });
+
+    const path = geoPath();
+</script>
+
+<Mark
+    type={'density' as MarkType}
+    data={markData}
+    channels={markChannels as any}
+    {...options}
+    {...markChannelProps}>
+    {#snippet children({ scaledData }: { scaledData: ScaledDataRecord[] })}
+        <GeoPathGroup
+            {scaledData}
+            {path}
+            geomKey={GEOM}
+            colorKeyword="density"
+            {fill}
+            stroke={effectiveStroke}
+            {strokeWidth}
+            {strokeOpacity}
+            {fillOpacity}
+            {opacity}
+            {strokeMiterlimit}
+            {clipPath}
+            className={className || undefined}
+            ariaLabel="density"
+            {canvas}
+            {plot} />
+    {/snippet}
+</Mark>