svelteplot 0.11.1 → 0.12.0

package/dist/core/Plot.svelte

@@ -74,6 +74,7 @@
         colorScheme: 'turbo',
         unknown: '#cccccc99',
         sortOrdinalDomains: true,
+        divergingColorScheme: 'RdBu',
         categoricalColorScheme: 'observable10',
         pointScaleHeight: 20,
         bandScaleHeight: 30,
@@ -209,6 +210,27 @@
         (fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight
     );
 
+    // Width used for aspectRatio/projection height computation only.
+    // Excludes reactive auto-margins to prevent a feedback loop:
+    //   height → plotHeight → y-tick density → y-label widths → autoMarginLeft → plotWidth → height
+    // Using explicit user-specified margins (0 when set to 'auto') keeps height stable
+    // while still updating when the container width or user-specified margins change.
+    const plotWidthForAspectRatio = $derived(
+        (fixedWidth || width) -
+            maybeMargin(
+                initialOptions.margin as number | 'auto' | PlotMargin | undefined,
+                'left',
+                DEFAULTS.margin,
+                { left: 0, right: 0, top: 0, bottom: 0 }
+            ) -
+            maybeMargin(
+                initialOptions.margin as number | 'auto' | PlotMargin | undefined,
+                'right',
+                DEFAULTS.margin,
+                { left: 0, right: 0, top: 0, bottom: 0 }
+            )
+    );
+
     // the facet and y domain counts are used for computing the automatic height
     const xFacetCount = $derived(Math.max(1, preScales.fx.domain.length));
     const yFacetCount = $derived(Math.max(1, preScales.fy.domain.length));
@@ -235,7 +257,8 @@
             : maybeNumber(plotOptions.height) === null || plotOptions.height === 'auto'
               ? Math.round(
                     preScales.projection && (preScales.projection as any).aspectRatio
-                        ? ((plotWidth * (preScales.projection as any).aspectRatio) / xFacetCount) *
+                        ? ((plotWidthForAspectRatio * (preScales.projection as any).aspectRatio) /
+                              xFacetCount) *
                               yFacetCount +
                               plotOptions.marginTop +
                               plotOptions.marginBottom
@@ -244,7 +267,7 @@
                                 preScales.x,
                                 preScales.y,
                                 plotOptions.aspectRatio,
-                                plotWidth,
+                                plotWidthForAspectRatio,
                                 plotOptions.marginTop,
                                 plotOptions.marginBottom
                             )
@@ -396,6 +419,16 @@
             y.type === 'band' || y.type === 'point'
                 ? y.domain.length
                 : Math.abs((y.domain[1] as number) - (y.domain[0] as number));
+        // Guard against degenerate/empty domains (e.g. before marks have mounted).
+        // Returning NaN here would propagate through scale ranges → NaN pixel coords.
+        if (
+            !xDomainExtent ||
+            !yDomainExtent ||
+            !isFinite(xDomainExtent) ||
+            !isFinite(yDomainExtent)
+        ) {
+            return DEFAULTS.height + marginTop + marginBottom;
+        }
         return (
             ((plotWidth / xDomainExtent) * yDomainExtent) / aspectRatio + marginTop + marginBottom
         );

package/dist/helpers/autoScales.js

@@ -171,10 +171,12 @@ export function autoScaleColor({ type, domain, scaleOptions, plotOptions: _plotO
     }
     else if (SequentialScales[type] ||
         DivergingScales[type]) {
+        const isDivergingType = DivergingScales.hasOwnProperty(type);
         // continuous color scale
         const scale = (SequentialScales[type] ||
             DivergingScales[type]);
-        const scheme_ = scheme || plotDefaults.colorScheme;
+        const scheme_ = scheme ||
+            (isDivergingType ? plotDefaults.divergingColorScheme : plotDefaults.colorScheme);
         if (interpolate) {
             // user-defined interpolation function [0, 1] -> color
             fn = scale(domain, interpolate);

package/dist/helpers/facets.d.ts

@@ -46,8 +46,8 @@ export declare function findFacetFromDOM(target: Element | null): {
  * translation of the facet from the plot body origin.
  */
 export declare function detectFacet(evt: MouseEvent, plot: PlotState): {
-    fxValue: RawValue | boolean;
-    fyValue: RawValue | boolean;
+    fxValue: RawValue;
+    fyValue: RawValue;
     offsetX: number;
     offsetY: number;
 };

package/dist/helpers/rasterInterpolate.d.ts

@@ -0,0 +1,26 @@
+export type InterpolateFunction = (index: number[], width: number, height: number, X: Float64Array, Y: Float64Array, V: ArrayLike<any>) => ArrayLike<any>;
+/**
+ * Simple forward mapping: each sample is binned to its nearest pixel.
+ * If multiple samples map to the same pixel, the last one wins.
+ */
+export declare function interpolateNone(index: number[], width: number, height: number, X: Float64Array, Y: Float64Array, V: ArrayLike<any>): any[];
+/**
+ * Nearest-neighbor interpolation using Delaunay triangulation.
+ */
+export declare function interpolateNearest(index: number[], width: number, height: number, X: Float64Array, Y: Float64Array, V: ArrayLike<any>): any;
+/**
+ * Barycentric interpolation: fills the interior of each Delaunay triangle with
+ * barycentric-weighted values, then extrapolates exterior pixels to the hull.
+ */
+export declare function interpolatorBarycentric({ random }?: {
+    random?: (() => number) | undefined;
+}): InterpolateFunction;
+/**
+ * Walk-on-spheres algorithm for smooth interpolation.
+ * https://observablehq.com/@observablehq/walk-on-spheres-precision
+ */
+export declare function interpolatorRandomWalk({ random, minDistance, maxSteps }?: {
+    random?: (() => number) | undefined;
+    minDistance?: number | undefined;
+    maxSteps?: number | undefined;
+}): InterpolateFunction;

package/dist/helpers/rasterInterpolate.js

@@ -0,0 +1,220 @@
+import { Delaunay } from 'd3-delaunay';
+import { randomLcg } from 'd3-random';
+/**
+ * Simple forward mapping: each sample is binned to its nearest pixel.
+ * If multiple samples map to the same pixel, the last one wins.
+ */
+export function interpolateNone(index, width, height, X, Y, V) {
+    const W = new Array(width * height);
+    for (const i of index) {
+        if (X[i] < 0 || X[i] >= width || Y[i] < 0 || Y[i] >= height)
+            continue;
+        W[Math.floor(Y[i]) * width + Math.floor(X[i])] = V[i];
+    }
+    return W;
+}
+/**
+ * Nearest-neighbor interpolation using Delaunay triangulation.
+ */
+export function interpolateNearest(index, width, height, X, Y, V) {
+    const n = width * height;
+    // Use typed array if V is typed, otherwise plain array
+    const W = isTypedArray(V) ? new V.constructor(n) : new Array(n);
+    const delaunay = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
+    // Memoize delaunay.find for the line start (iy) and current pixel (ix)
+    let iy, ix;
+    for (let y = 0.5, k = 0; y < height; ++y) {
+        ix = iy;
+        for (let x = 0.5; x < width; ++x, ++k) {
+            ix = delaunay.find(x, y, ix);
+            if (x === 0.5)
+                iy = ix;
+            W[k] = V[index[ix]];
+        }
+    }
+    return W;
+}
+/**
+ * Barycentric interpolation: fills the interior of each Delaunay triangle with
+ * barycentric-weighted values, then extrapolates exterior pixels to the hull.
+ */
+export function interpolatorBarycentric({ random = randomLcg(42) } = {}) {
+    return (index, width, height, X, Y, V) => {
+        const { points, triangles, hull } = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
+        const n = width * height;
+        const W = isTypedArray(V)
+            ? new V.constructor(n).fill(NaN)
+            : new Array(n).fill(NaN);
+        const S = new Uint8Array(n); // 1 if pixel has been written
+        const mix = mixer(V, random);
+        for (let i = 0; i < triangles.length; i += 3) {
+            const ta = triangles[i];
+            const tb = triangles[i + 1];
+            const tc = triangles[i + 2];
+            const Ax = points[2 * ta];
+            const Bx = points[2 * tb];
+            const Cx = points[2 * tc];
+            const Ay = points[2 * ta + 1];
+            const By = points[2 * tb + 1];
+            const Cy = points[2 * tc + 1];
+            const x1 = Math.min(Ax, Bx, Cx);
+            const x2 = Math.max(Ax, Bx, Cx);
+            const y1 = Math.min(Ay, By, Cy);
+            const y2 = Math.max(Ay, By, Cy);
+            const z = (By - Cy) * (Ax - Cx) + (Ay - Cy) * (Cx - Bx);
+            if (!z)
+                continue;
+            const va = V[index[ta]];
+            const vb = V[index[tb]];
+            const vc = V[index[tc]];
+            for (let x = Math.floor(x1); x < x2; ++x) {
+                for (let y = Math.floor(y1); y < y2; ++y) {
+                    if (x < 0 || x >= width || y < 0 || y >= height)
+                        continue;
+                    const xp = x + 0.5;
+                    const yp = y + 0.5;
+                    const s = Math.sign(z);
+                    const ga = (By - Cy) * (xp - Cx) + (yp - Cy) * (Cx - Bx);
+                    if (ga * s < 0)
+                        continue;
+                    const gb = (Cy - Ay) * (xp - Cx) + (yp - Cy) * (Ax - Cx);
+                    if (gb * s < 0)
+                        continue;
+                    const gc = z - (ga + gb);
+                    if (gc * s < 0)
+                        continue;
+                    const idx = x + width * y;
+                    W[idx] = mix(va, ga / z, vb, gb / z, vc, gc / z, x, y);
+                    S[idx] = 1;
+                }
+            }
+        }
+        extrapolateBarycentric(W, S, X, Y, V, width, height, hull, index, mix);
+        return W;
+    };
+}
+function extrapolateBarycentric(W, S, X, Y, V, width, height, hull, index, mix) {
+    const hX = Float64Array.from(hull, (i) => X[index[i]]);
+    const hY = Float64Array.from(hull, (i) => Y[index[i]]);
+    const hV = Array.from(hull, (i) => V[index[i]]);
+    const n = hX.length;
+    const rays = Array.from({ length: n }, (_, j) => ray(j, hX, hY));
+    let k = 0;
+    for (let y = 0; y < height; ++y) {
+        const yp = y + 0.5;
+        for (let x = 0; x < width; ++x) {
+            const i = x + width * y;
+            if (!S[i]) {
+                const xp = x + 0.5;
+                for (let l = 0; l < n; ++l) {
+                    const j = (n + k + (l % 2 ? (l + 1) / 2 : -l / 2)) % n;
+                    if (rays[j](xp, yp)) {
+                        const t = segmentProject(at(hX, j - 1), at(hY, j - 1), hX[j], hY[j], xp, yp);
+                        W[i] = mix(at(hV, j - 1), t, hV[j], 1 - t, hV[j], 0, x, y);
+                        k = j;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}
+/**
+ * Walk-on-spheres algorithm for smooth interpolation.
+ * https://observablehq.com/@observablehq/walk-on-spheres-precision
+ */
+export function interpolatorRandomWalk({ random = randomLcg(42), minDistance = 0.5, maxSteps = 2 } = {}) {
+    return (index, width, height, X, Y, V) => {
+        const n = width * height;
+        const W = isTypedArray(V) ? new V.constructor(n) : new Array(n);
+        const delaunay = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
+        let iy, ix, iw;
+        for (let y = 0.5, k = 0; y < height; ++y) {
+            ix = iy;
+            for (let x = 0.5; x < width; ++x, ++k) {
+                let cx = x;
+                let cy = y;
+                iw = ix = delaunay.find(cx, cy, ix);
+                if (x === 0.5)
+                    iy = ix;
+                let distance;
+                let step = 0;
+                while ((distance = Math.hypot(X[index[iw]] - cx, Y[index[iw]] - cy)) > minDistance &&
+                    step < maxSteps) {
+                    const angle = random(x, y, step) * 2 * Math.PI;
+                    cx += Math.cos(angle) * distance;
+                    cy += Math.sin(angle) * distance;
+                    iw = delaunay.find(cx, cy, iw);
+                    ++step;
+                }
+                W[k] = V[index[iw]];
+            }
+        }
+        return W;
+    };
+}
+// --- Internal helpers ---
+function blend(a, ca, b, cb, c, cc) {
+    return ca * a + cb * b + cc * c;
+}
+function pick(random) {
+    return (a, ca, b, cb, c, _cc, x, y) => {
+        const u = random(x, y);
+        return u < ca ? a : u < ca + cb ? b : c;
+    };
+}
+function mixer(V, random) {
+    const first = findFirst(V);
+    return typeof first === 'number' || first instanceof Date ? blend : pick(random);
+}
+function findFirst(V) {
+    for (let i = 0; i < V.length; ++i)
+        if (V[i] != null)
+            return V[i];
+    return undefined;
+}
+function isTypedArray(V) {
+    return ArrayBuffer.isView(V) && !(V instanceof DataView);
+}
+function at(arr, i) {
+    return arr[(i + arr.length) % arr.length];
+}
+function segmentProject(x1, y1, x2, y2, x, y) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const a = dx * (x2 - x) + dy * (y2 - y);
+    const b = dx * (x - x1) + dy * (y - y1);
+    return a > 0 && b > 0 ? a / (a + b) : +(a > b);
+}
+function cross(xa, ya, xb, yb) {
+    return xa * yb - xb * ya;
+}
+function ray(j, X, Y) {
+    const n = X.length;
+    const xc = at(X, j - 2);
+    const yc = at(Y, j - 2);
+    const xa = at(X, j - 1);
+    const ya = at(Y, j - 1);
+    const xb = X[j];
+    const yb = Y[j];
+    const xd = at(X, j + 1 - n);
+    const yd = at(Y, j + 1 - n);
+    const dxab = xa - xb;
+    const dyab = ya - yb;
+    const dxca = xc - xa;
+    const dyca = yc - ya;
+    const dxbd = xb - xd;
+    const dybd = yb - yd;
+    const hab = Math.hypot(dxab, dyab);
+    const hca = Math.hypot(dxca, dyca);
+    const hbd = Math.hypot(dxbd, dybd);
+    return (x, y) => {
+        const dxa = x - xa;
+        const dya = y - ya;
+        const dxb = x - xb;
+        const dyb = y - yb;
+        return (cross(dxa, dya, dxb, dyb) > -1e-6 &&
+            cross(dxa, dya, dxab, dyab) * hca - cross(dxa, dya, dxca, dyca) * hab > -1e-6 &&
+            cross(dxb, dyb, dxbd, dybd) * hab - cross(dxb, dyb, dxab, dyab) * hbd <= 0);
+    };
+}

package/dist/marks/Geo.svelte

@@ -45,6 +45,7 @@
     import Anchor from './helpers/Anchor.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
 
     const plot = usePlot();
 
@@ -85,6 +86,8 @@
             })
         )
     );
+
+    const classes = $derived(['geo', geoType && `geo-${geoType}`, className]);
 </script>
 
 <Mark
@@ -92,10 +95,10 @@
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <g
+        <GroupMultiple
             aria-label="geo"
-            class={['geo', geoType && `geo-${geoType}`, className]}
-            style="fill:currentColor">
+            class={scaledData.length > 1 ? classes.filter(Boolean).join(' ') : null}
+            length={scaledData.length}>
             {#if canvas}
                 <GeoCanvas data={scaledData} {path} {mark} {usedScales} />
             {:else}
@@ -116,7 +119,8 @@
                             <path
                                 d={path(geometry as any)}
                                 {style}
-                                class={[styleClass]}
+                                aria-label="geo"
+                                class={[scaledData.length > 1 ? null : classes, styleClass]}
                                 filter={resolveProp(args.svgFilter, d.datum, undefined) as
                                     | string
                                     | undefined}
@@ -131,6 +135,6 @@
                     {/if}
                 {/each}
             {/if}
-        </g>
+        </GroupMultiple>
     {/snippet}
 </Mark>

package/dist/marks/Line.svelte

@@ -94,28 +94,65 @@
     const args = $derived(sort(recordizeXY({ data, ...options })));
 
     /**
-     * Groups the data by the specified key
+     * Groups the data by the specified key (and optionally a secondary key).
+     * When a secondary key is provided, each primary group is further split by
+     * the secondary key, with each sub-segment extended to include the first point
+     * of the next sub-segment so consecutive segments share an endpoint (enabling
+     * multi-colored lines without gaps).
      */
-    function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
-        if (!groupByKey) return [data];
-        let group: ScaledDataRecord[] = [];
-        const groups: ScaledDataRecord[][] = [group];
-        let lastGroupValue;
+    function groupIndex(
+        data: ScaledDataRecord[],
+        groupByKey: ChannelAccessor<Datum> | null,
+        secondaryKey: ChannelAccessor<Datum> | null = null
+    ) {
+        if (!groupByKey && !secondaryKey) return [data];
+
+        // Group by the primary key
+        const primaryGroups: ScaledDataRecord[][] = [];
+        let primaryGroup: ScaledDataRecord[] = [];
+        let lastPrimaryValue: unknown;
         for (const d of data) {
-            const groupValue = resolveProp(groupByKey, d.datum);
-            if (groupValue === lastGroupValue) {
-                group.push(d);
+            const primaryValue = resolveProp(groupByKey!, d.datum);
+            if (primaryValue === lastPrimaryValue) {
+                primaryGroup.push(d);
             } else {
-                // new group
-                group = [d];
-                groups.push(group);
-                lastGroupValue = groupValue;
+                primaryGroup = [d];
+                primaryGroups.push(primaryGroup);
+                lastPrimaryValue = primaryValue;
+            }
+        }
+
+        if (!secondaryKey) return primaryGroups;
+
+        // Further split each primary group by the secondary key. Each sub-segment is
+        // extended to include the first point of the next sub-segment so that
+        // consecutive segments share an endpoint (no gaps in multi-colored lines).
+        const result: ScaledDataRecord[][] = [];
+        for (const pGroup of primaryGroups) {
+            if (pGroup.length === 0) continue;
+            let subGroup: ScaledDataRecord[] = [pGroup[0]];
+            let lastSecondaryValue = resolveProp(secondaryKey, pGroup[0].datum);
+            for (let i = 1; i < pGroup.length; i++) {
+                const d = pGroup[i];
+                const secondaryValue = resolveProp(secondaryKey, d.datum);
+                if (secondaryValue === lastSecondaryValue) {
+                    subGroup.push(d);
+                } else {
+                    subGroup.push(d); // extend to connect to next sub-segment
+                    result.push(subGroup);
+                    subGroup = [d]; // new sub-segment begins here
+                    lastSecondaryValue = secondaryValue;
+                }
             }
+            result.push(subGroup);
         }
-        return groups;
+        return result;
     }
 
     const groupByKey = $derived(args.z || args.stroke) as ChannelAccessor<Datum> | null;
+    const secondaryKey = $derived(
+        args.z && args.stroke ? args.stroke : null
+    ) as ChannelAccessor<Datum> | null;
 
     const plot = usePlot();
 
@@ -155,7 +192,7 @@
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         {#if scaledData.length > 0}
-            {@const groupedLineData = groupIndex(scaledData, groupByKey)}
+            {@const groupedLineData = groupIndex(scaledData, groupByKey, secondaryKey)}
             {#if canvas}
                 <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
             {:else}