svelteplot 0.12.0 → 0.14.0

package/dist/marks/VoronoiMesh.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 diagrams 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 Voronoi diagram as a single SVG path. */
+declare const VoronoiMesh: $$IsomorphicComponent;
+type VoronoiMesh<Datum = DataRecord> = InstanceType<typeof VoronoiMesh<Datum>>;
+export default VoronoiMesh;

package/dist/marks/helpers/ArrowCanvas.svelte

@@ -0,0 +1,132 @@
+<!--
+@component
+Helper component for rendering Arrow marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ArrowCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            headAngle?: ConstantAccessor<number, Datum>;
+            headLength?: ConstantAccessor<number, Datum>;
+            bend?: ConstantAccessor<number, Datum> | true;
+            inset?: ConstantAccessor<number, Datum>;
+            insetStart?: ConstantAccessor<number, Datum>;
+            insetEnd?: ConstantAccessor<number, Datum>;
+            sweep?: SweepOption;
+        };
+        usedScales: UsedScales;
+    }
+
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { coalesce, maybeNumber } from '../../helpers/index.js';
+    import {
+        arrowPath,
+        maybeSweep,
+        type SweepFunc,
+        type SweepOption
+    } from '../../helpers/arrowPath.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales }: ArrowCanvasProps = $props();
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                const sweep = maybeSweep(options.sweep) as SweepFunc;
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const datum = d.datum as unknown as Datum;
+
+                    const styleProps = resolveScaledStyleProps(
+                        d.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    ) as Record<string, unknown>;
+
+                    const opacity = +(styleProps['opacity'] ?? 1);
+                    const strokeOpacity = +(styleProps['stroke-opacity'] ?? 1);
+                    const stroke = resolveColor(
+                        String(styleProps.stroke || 'currentColor'),
+                        canvas
+                    );
+
+                    if (!stroke || stroke === 'none') continue;
+
+                    const strokeWidth = (resolveProp(options.strokeWidth, datum, 1) ?? 1) as number;
+                    const inset = resolveProp(options.inset, datum, 0);
+                    const insetStart = resolveProp(options.insetStart, datum);
+                    const insetEnd = resolveProp(options.insetEnd, datum);
+                    const headAngle = (resolveProp(options.headAngle, datum, 60) ?? 60) as number;
+                    const headLength = (resolveProp(options.headLength, datum, 8) ?? 8) as number;
+                    const bendVal =
+                        options.bend === true
+                            ? 22.5
+                            : ((resolveProp(
+                                  options.bend as ConstantAccessor<number, Datum>,
+                                  datum,
+                                  0
+                              ) ?? 0) as number);
+
+                    const pathStr = arrowPath(
+                        d.x1 ?? 0,
+                        d.y1 ?? 0,
+                        d.x2 ?? 0,
+                        d.y2 ?? 0,
+                        maybeNumber(coalesce(insetStart, inset)) ?? 0,
+                        maybeNumber(coalesce(insetEnd, inset)) ?? 0,
+                        headAngle,
+                        headLength,
+                        bendVal,
+                        strokeWidth,
+                        sweep
+                    );
+
+                    if (!pathStr) continue;
+
+                    const path = new Path2D(pathStr);
+
+                    context.lineWidth = strokeWidth;
+                    context.lineCap = 'round';
+                    context.lineJoin = 'round';
+                    context.strokeStyle = stroke;
+                    context.globalAlpha = opacity * strokeOpacity;
+                    context.stroke(path);
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/ArrowCanvas.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { BaseMarkProps, ConstantAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+import { type SweepOption } from '../../helpers/arrowPath.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            headAngle?: ConstantAccessor<number, Datum>;
+            headLength?: ConstantAccessor<number, Datum>;
+            bend?: ConstantAccessor<number, Datum> | true;
+            inset?: ConstantAccessor<number, Datum>;
+            insetStart?: ConstantAccessor<number, Datum>;
+            insetEnd?: ConstantAccessor<number, Datum>;
+            sweep?: SweepOption;
+        };
+        usedScales: UsedScales;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends 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 extends 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 extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Arrow marks in canvas */
+declare const ArrowCanvas: $$IsomorphicComponent;
+type ArrowCanvas<Datum extends DataRecord> = InstanceType<typeof ArrowCanvas<Datum>>;
+export default ArrowCanvas;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -206,6 +206,8 @@
                     {@const moveDown =
                         (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize_ * 0.35 : 0)) *
                         (anchor === 'bottom' ? 1 : -1)}
+                    {@const tickBaseline =
+                        tickRotate !== 0 ? 'central' : anchor === 'bottom' ? 'hanging' : 'auto'}
                     {@const [textStyle, textClass] = resolveStyles(
                         plot,
                         toScaledDatum(tick),
@@ -230,22 +232,18 @@
                     )}
                     <text
                         bind:this={tickTextElements[t]}
-                        transform="translate(0, {moveDown})  rotate({tickRotate})"
+                        transform="translate(0, {moveDown}) rotate({tickRotate})"
                         style={textStyle}
                         class={textClass}
                         x={0}
                         y={0}
-                        dominant-baseline={tickRotate !== 0
-                            ? 'central'
-                            : anchor === 'bottom'
-                              ? 'hanging'
-                              : 'auto'}>
+                        dominant-baseline={tickBaseline}>
                         {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
                             {#if textLines.length === 1}
                                 {textLines[0]}
                             {:else}
                                 {#each textLines as line, i (i)}
-                                    <tspan x="0" dy={i ? 12 : 0}
+                                    <tspan x="0" dy={i ? 12 : 0} dominant-baseline={tickBaseline}
                                         >{!prevTextLines ||
                                         prevTextLines[i] !== line ||
                                         options.removeDuplicateTicks === false

package/dist/marks/helpers/DensityCanvas.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import type { ScaledDataRecord } from '../../types/index.js';
+    import type { GeoPath } from 'd3-geo';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { CSS_VAR } from '../../constants.js';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
+
+    let {
+        scaledData,
+        path,
+        geomKey,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeOpacity,
+        fillOpacity,
+        opacity,
+        strokeMiterlimit
+    }: {
+        scaledData: ScaledDataRecord[];
+        path: GeoPath;
+        /** Symbol key used to retrieve the DensityGeometry from each datum. */
+        geomKey: symbol;
+        fill: string;
+        stroke: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+    } = $props();
+
+    const plot = usePlot();
+
+    /** Resolve a fill/stroke string that may be the "density" keyword. */
+    function resolveColorProp(prop: string, densityValue: number): string {
+        if (/^density$/i.test(prop)) {
+            return (plot.scales.color?.fn(densityValue) as string) ?? 'currentColor';
+        }
+        return prop;
+    }
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            path.context(context);
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            let currentColor: string | undefined;
+
+            const resolveCanvasColor = (color: string): string => {
+                if (color.toLowerCase() === 'currentcolor') {
+                    return (
+                        currentColor ||
+                        (currentColor = getComputedStyle(
+                            canvas.parentElement?.parentElement ?? canvas
+                        ).getPropertyValue('color'))
+                    );
+                }
+                if (CSS_VAR.test(color)) {
+                    return getComputedStyle(canvas).getPropertyValue(color.slice(4, -1));
+                }
+                return color;
+            };
+
+            const globalOpacity = opacity ?? 1;
+            if (strokeMiterlimit != null) context.miterLimit = strokeMiterlimit;
+
+            for (const d of scaledData) {
+                const geom = d.datum[geomKey as any] as any;
+                if (!geom?.coordinates?.length) continue;
+
+                const densityValue = (d.datum[RAW_VALUE as any] as number) ?? 0;
+                const fillColor = resolveCanvasColor(resolveColorProp(fill, densityValue));
+                const strokeColor = resolveCanvasColor(resolveColorProp(stroke, densityValue));
+
+                context.beginPath();
+                path(geom);
+                context.closePath();
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = globalOpacity * (fillOpacity ?? 1);
+                    context.fill();
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? 1;
+                    context.globalAlpha = globalOpacity * (strokeOpacity ?? 1);
+                    context.stroke();
+                }
+            }
+
+            // Reset path context in case we switch back to SVG rendering.
+            path.context(null);
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/DensityCanvas.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ScaledDataRecord } from '../../types/index.js';
+import type { GeoPath } from 'd3-geo';
+type $$ComponentProps = {
+    scaledData: ScaledDataRecord[];
+    path: GeoPath;
+    /** Symbol key used to retrieve the DensityGeometry from each datum. */
+    geomKey: symbol;
+    fill: string;
+    stroke: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    fillOpacity?: number;
+    opacity?: number;
+    strokeMiterlimit?: number;
+};
+declare const DensityCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type DensityCanvas = ReturnType<typeof DensityCanvas>;
+export default DensityCanvas;

package/dist/marks/helpers/GeoPathCanvas.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+    import type { ScaledDataRecord } from '../../types/index.js';
+    import type { GeoPath } from 'd3-geo';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { CSS_VAR } from '../../constants.js';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
+
+    let {
+        scaledData,
+        path,
+        geomKey,
+        colorKeyword,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeOpacity,
+        fillOpacity,
+        opacity,
+        strokeMiterlimit
+    }: {
+        scaledData: ScaledDataRecord[];
+        path: GeoPath;
+        /** Symbol key used to retrieve the GeoJSON geometry from each datum. */
+        geomKey: symbol;
+        /**
+         * The color keyword that, when used as fill/stroke, maps the threshold
+         * value through the plot's color scale.  E.g. "value" for Contour,
+         * "density" for Density.
+         */
+        colorKeyword: string;
+        fill: string;
+        stroke: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+    } = $props();
+
+    const plot = usePlot();
+
+    /** Resolve a fill/stroke string that may be the colorKeyword. */
+    function resolveColorProp(prop: string, value: number): string {
+        if (prop.toLowerCase() === colorKeyword.toLowerCase()) {
+            return (plot.scales.color?.fn(value) as string) ?? 'currentColor';
+        }
+        return prop;
+    }
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            path.context(context);
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            let currentColor: string | undefined;
+
+            const resolveCanvasColor = (color: string): string => {
+                if (color.toLowerCase() === 'currentcolor') {
+                    return (
+                        currentColor ||
+                        (currentColor = getComputedStyle(
+                            canvas.parentElement?.parentElement ?? canvas
+                        ).getPropertyValue('color'))
+                    );
+                }
+                if (CSS_VAR.test(color)) {
+                    return getComputedStyle(canvas).getPropertyValue(color.slice(4, -1));
+                }
+                return color;
+            };
+
+            const globalOpacity = opacity ?? 1;
+            if (strokeMiterlimit != null) context.miterLimit = strokeMiterlimit;
+
+            for (const d of scaledData) {
+                const geom = d.datum[geomKey as any] as any;
+                if (!geom?.coordinates?.length) continue;
+
+                const thresholdValue = (d.datum[RAW_VALUE as any] as number) ?? 0;
+                const fillColor = resolveCanvasColor(resolveColorProp(fill, thresholdValue));
+                const strokeColor = resolveCanvasColor(resolveColorProp(stroke, thresholdValue));
+
+                context.beginPath();
+                path(geom);
+                context.closePath();
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = globalOpacity * (fillOpacity ?? 1);
+                    context.fill();
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? 1;
+                    context.globalAlpha = globalOpacity * (strokeOpacity ?? 1);
+                    context.stroke();
+                }
+            }
+
+            // Reset path context in case we switch back to SVG rendering.
+            path.context(null);
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/GeoPathCanvas.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ScaledDataRecord } from '../../types/index.js';
+import type { GeoPath } from 'd3-geo';
+type $$ComponentProps = {
+    scaledData: ScaledDataRecord[];
+    path: GeoPath;
+    /** Symbol key used to retrieve the GeoJSON geometry from each datum. */
+    geomKey: symbol;
+    /**
+     * The color keyword that, when used as fill/stroke, maps the threshold
+     * value through the plot's color scale.  E.g. "value" for Contour,
+     * "density" for Density.
+     */
+    colorKeyword: string;
+    fill: string;
+    stroke: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    fillOpacity?: number;
+    opacity?: number;
+    strokeMiterlimit?: number;
+};
+declare const GeoPathCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type GeoPathCanvas = ReturnType<typeof GeoPathCanvas>;
+export default GeoPathCanvas;