svelteplot 0.12.0 → 0.14.0

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

@@ -0,0 +1,87 @@
+import type { DataRecord, ChannelAccessor } from '../types/index.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        /** 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>;
+    };
+    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']>;
+}
+/**
+ * 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`.
+ */
+declare const Density: $$IsomorphicComponent;
+type Density<Datum extends DataRecord> = InstanceType<typeof Density<Datum>>;
+export default Density;

package/dist/marks/Hull.svelte

@@ -0,0 +1,103 @@
+<!-- @component
+    Renders the convex hull of data points. Supports grouping by z/fill/stroke
+    to draw separate hulls per group.
+-->
+<script lang="ts" generics="Datum = DataRecord">
+    interface HullMarkProps extends BaseMarkProps<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 hulls per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    }
+
+    import { Delaunay } from 'd3-delaunay';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        MarkType,
+        ScaledDataRecord
+    } from '../types/index.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import Mark from '../Mark.svelte';
+    import PathGroup from './helpers/PathGroup.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().hull
+    };
+
+    let markProps: HullMarkProps = $props();
+
+    const {
+        data = [] as Datum[],
+        class: className = 'hull',
+        canvas = false,
+        ...options
+    }: HullMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const args = $derived(
+        recordizeXY({
+            data: data as any[],
+            ...options
+        })
+    );
+
+    const plot = usePlot();
+
+    function computeHulls(scaledData: ScaledDataRecord[]) {
+        const scaledByDatum = new Map(scaledData.map((d) => [d.datum, d]));
+        const hulls: { path: string; datum: ScaledDataRecord }[] = [];
+
+        groupFacetsAndZ(
+            scaledData.map((d) => d.datum),
+            args,
+            (groupItems) => {
+                const groupScaled = groupItems
+                    .map((d) => scaledByDatum.get(d))
+                    .filter(
+                        (d): d is ScaledDataRecord =>
+                            d !== undefined &&
+                            d.valid &&
+                            Number.isFinite(d.x as number) &&
+                            Number.isFinite(d.y as number)
+                    );
+                if (groupScaled.length < 2) return;
+                const delaunay = Delaunay.from(
+                    groupScaled,
+                    (d) => d.x as number,
+                    (d) => d.y as number
+                );
+                const path = delaunay.renderHull();
+                if (path) hulls.push({ path, datum: groupScaled[0] });
+            }
+        );
+
+        return hulls;
+    }
+</script>
+
+<Mark
+    type={'hull' as MarkType}
+    channels={['x', 'y', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
+    defaults={{ fill: 'none', stroke: 'currentColor' }}
+    {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        <PathGroup
+            paths={computeHulls(scaledData)}
+            {args}
+            {className}
+            {usedScales}
+            {plot}
+            defaultStrokeWidth={1.5}
+            {canvas} />
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,175 @@
+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 hulls 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 convex hull of data points. Supports grouping by z/fill/stroke
+ * to draw separate hulls per group.
+ */
+declare const Hull: $$IsomorphicComponent;
+type Hull<Datum = DataRecord> = InstanceType<typeof Hull<Datum>>;
+export default Hull;

package/dist/marks/Image.svelte

@@ -22,7 +22,8 @@
         title?: ConstantAccessor<string, Datum>;
         /** the SVG preserveAspectRatio attribute for the image (e.g. "xMidYMid meet") */
         preserveAspectRatio?: string;
-        // canvas?: boolean;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
         /** CSS class name(s) to apply to individual image elements */
         imageClass?: ConstantAccessor<string, Datum>;
     }
@@ -39,6 +40,7 @@
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { sort } from '../transforms/index.js';
     import Anchor from './helpers/Anchor.svelte';
+    import ImageCanvas from './helpers/ImageCanvas.svelte';
     import Mark from '../Mark.svelte';
 
     let markProps: ImageMarkProps = $props();
@@ -51,6 +53,7 @@
 
     const {
         data = [{} as Datum],
+        canvas = false,
         width,
         height,
         src,
@@ -71,31 +74,38 @@
     channels={['x', 'y', 'r', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
     {...args}
     type="image">
-    {#snippet children({ scaledData })}
-        {#each scaledData as record, i (i)}
-            {#if record.valid}
-                {@const w =
-                    record.r !== undefined
-                        ? record.r * 2
-                        : Number(resolveProp(width, record.datum, 20) ?? 20)}
-                {@const h =
-                    record.r !== undefined
-                        ? record.r * 2
-                        : Number(resolveProp(height || width, record.datum, 20) ?? 20)}
-                <Anchor {options} datum={record.datum}>
-                    <image
-                        class={resolveProp(imageClass, record.datum, null)}
-                        href={resolveProp(src, record.datum, '')}
-                        x={record.x! - w * 0.5}
-                        y={record.y! - h * 0.5}
-                        {preserveAspectRatio}
-                        clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
-                        width={w}
-                        height={h}
-                        >{#if title}<title>{resolveProp(title, record.datum, '')}</title
-                            >{/if}</image>
-                </Anchor>
-            {/if}
-        {/each}
+    {#snippet children({ scaledData, usedScales })}
+        {#if canvas}
+            <ImageCanvas
+                data={scaledData}
+                options={{ ...options, src, width, height }}
+                {usedScales} />
+        {:else}
+            {#each scaledData as record, i (i)}
+                {#if record.valid}
+                    {@const w =
+                        record.r !== undefined
+                            ? record.r * 2
+                            : Number(resolveProp(width, record.datum, 20) ?? 20)}
+                    {@const h =
+                        record.r !== undefined
+                            ? record.r * 2
+                            : Number(resolveProp(height || width, record.datum, 20) ?? 20)}
+                    <Anchor {options} datum={record.datum}>
+                        <image
+                            class={resolveProp(imageClass, record.datum, null)}
+                            href={resolveProp(src, record.datum, '')}
+                            x={record.x! - w * 0.5}
+                            y={record.y! - h * 0.5}
+                            {preserveAspectRatio}
+                            clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
+                            width={w}
+                            height={h}
+                            >{#if title}<title>{resolveProp(title, record.datum, '')}</title
+                                >{/if}</image>
+                    </Anchor>
+                {/if}
+            {/each}
+        {/if}
     {/snippet}
 </Mark>

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

@@ -154,6 +154,8 @@ declare function $$render<Datum extends DataRecord>(): {
         title?: ConstantAccessor<string, Datum>;
         /** the SVG preserveAspectRatio attribute for the image (e.g. "xMidYMid meet") */
         preserveAspectRatio?: string;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
         /** CSS class name(s) to apply to individual image elements */
         imageClass?: ConstantAccessor<string, Datum>;
     };

package/dist/marks/Link.svelte

@@ -45,6 +45,8 @@
         textStartOffset?: ConstantAccessor<string, Datum>;
         /** the stroke width for the text label rendered along the link */
         textStrokeWidth?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
     }
     import type {
         DataRecord,
@@ -65,6 +67,7 @@
     import { maybeCurve } from '../helpers/curves.js';
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
+    import LinkCanvas from './helpers/LinkCanvas.svelte';
     import { sort } from '../transforms/sort.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
@@ -81,6 +84,7 @@
         tension = 0,
         bend,
         text,
+        canvas,
         class: className = '',
         ...options
     }: LinkMarkProps = $derived({
@@ -103,6 +107,13 @@
 
     const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
 
+    const curveFactory = $derived(
+        maybeCurve(
+            curve === 'auto' ? 'linear' : curve,
+            bend === true ? 0.6 : bend === false ? 0 : (bend ?? tension ?? 0)
+        )
+    );
+
     const linePath: (d: ScaledDataRecord, reversed?: boolean) => string | null = $derived.by(() => {
         const fn: D3Line<[number, number]> = line<[number, number]>()
             .curve(
@@ -168,56 +179,63 @@
     channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid || true}
-                    {@const [style, styleClass] = resolveStyles(
-                        plot,
-                        d,
-                        { strokeWidth: 1.6, ...args },
-                        'stroke',
-                        usedScales
-                    )}
-                    {@const [textStyle, textStyleClass] = resolveStyles(
-                        plot,
-                        d,
-                        {
-                            textAnchor: 'middle',
-                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
-                            fill: options.textFill || args.stroke,
-                            stroke: options.textStroke,
-                            strokeWidth: options.textStrokeWidth
-                        },
-                        'fill',
-                        usedScales
-                    )}
+        {#if canvas}
+            <LinkCanvas data={scaledData} options={args} {usedScales} {curveFactory} />
+        {:else}
+            <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
+                {#each scaledData as d, i (i)}
+                    {#if d.valid || true}
+                        {@const [style, styleClass] = resolveStyles(
+                            plot,
+                            d,
+                            { strokeWidth: 1.6, ...args },
+                            'stroke',
+                            usedScales
+                        )}
+                        {@const [textStyle, textStyleClass] = resolveStyles(
+                            plot,
+                            d,
+                            {
+                                textAnchor: 'middle',
+                                ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
+                                fill: options.textFill || args.stroke,
+                                stroke: options.textStroke,
+                                strokeWidth: options.textStrokeWidth
+                            },
+                            'fill',
+                            usedScales
+                        )}
 
-                    <MarkerPath
-                        mark={{ ...mark, options: args }}
-                        transform=""
-                        scales={plot.scales}
-                        markerStart={options.markerStart as boolean | MarkerShape | undefined}
-                        markerEnd={options.markerEnd as boolean | MarkerShape | undefined}
-                        marker={options.marker as boolean | MarkerShape | undefined}
-                        markerScale={options.markerScale}
-                        class={styleClass ?? undefined}
-                        strokeWidth={options.strokeWidth as ConstantAccessor<number>}
-                        datum={d.datum as DataRecord}
-                        color={d.stroke ?? 'currentColor'}
-                        d={(sphericalLine ? sphericalLinePath(d) : linePath(d)) ?? ''}
-                        dInv={(sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)) ??
-                            undefined}
-                        style={style ?? ''}
-                        text={text ? ((resolveProp(text, d.datum as Datum) as string) ?? '') : ''}
-                        startOffset={(resolveProp(
-                            options.textStartOffset,
-                            d.datum as Datum,
-                            '50%'
-                        ) as string) ?? '50%'}
-                        textStyle={textStyle ?? ''}
-                        {textStyleClass} />
-                {/if}
-            {/each}
-        </g>
+                        <MarkerPath
+                            mark={{ ...mark, options: args }}
+                            transform=""
+                            scales={plot.scales}
+                            markerStart={options.markerStart as boolean | MarkerShape | undefined}
+                            markerEnd={options.markerEnd as boolean | MarkerShape | undefined}
+                            marker={options.marker as boolean | MarkerShape | undefined}
+                            markerScale={options.markerScale}
+                            class={styleClass ?? undefined}
+                            strokeWidth={options.strokeWidth as ConstantAccessor<number>}
+                            datum={d.datum as DataRecord}
+                            color={d.stroke ?? 'currentColor'}
+                            d={(sphericalLine ? sphericalLinePath(d) : linePath(d)) ?? ''}
+                            dInv={(sphericalLine
+                                ? sphericalLinePath(d, true)
+                                : linePath(d, true)) ?? undefined}
+                            style={style ?? ''}
+                            text={text
+                                ? ((resolveProp(text, d.datum as Datum) as string) ?? '')
+                                : ''}
+                            startOffset={(resolveProp(
+                                options.textStartOffset,
+                                d.datum as Datum,
+                                '50%'
+                            ) as string) ?? '50%'}
+                            textStyle={textStyle ?? ''}
+                            {textStyleClass} />
+                    {/if}
+                {/each}
+            </g>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -180,6 +180,8 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         textStartOffset?: ConstantAccessor<string, Datum>;
         /** the stroke width for the text label rendered along the link */
         textStrokeWidth?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/Raster.svelte

@@ -90,6 +90,11 @@
     } from '../helpers/rasterInterpolate.js';
     import { X, Y, RAW_VALUE } from '../transforms/recordize.js';
     import { scaleLinear } from 'd3-scale';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().raster
+    };
 
     let markProps: RasterMarkProps = $props();
 
@@ -108,7 +113,7 @@
         interpolate,
         imageRendering = 'auto',
         ...options
-    }: RasterMarkProps = $derived({ ...markProps });
+    }: RasterMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const plot = usePlot();