svelteplot 0.14.2-pr-552.0 → 0.14.2-pr-552.1

package/dist/helpers/hexLattice.d.ts

@@ -0,0 +1,20 @@
+export declare const HEX_DEFAULT_BIN_WIDTH = 20;
+export type HexLattice = {
+    rx: number;
+    ry: number;
+    dx: number;
+    dy: number;
+    originX: number;
+    originY: number;
+};
+export declare function hexLattice(binWidth: number, originX?: number, originY?: number): HexLattice;
+export declare function hexLatticeXY(dx: number, dy: number, originX?: number, originY?: number): HexLattice;
+export declare function hexCenter(i: number, j: number, lattice: HexLattice): [number, number];
+export declare function pointToHex(px: number, py: number, lattice: HexLattice): {
+    i: number;
+    j: number;
+    cx: number;
+    cy: number;
+};
+export declare function hexagonSubpath(cx: number, cy: number, rx: number, ry: number): string;
+export declare function hexCellsInRect(lattice: HexLattice, x0: number, y0: number, x1: number, y1: number): Generator<[number, number]>;

package/dist/helpers/hexLattice.js

@@ -0,0 +1,73 @@
+// Shared hex lattice math used by the `hexbin` transform and the `Hexgrid`
+// mark so binning and the grid overlay always tile the same lattice. Pointy-
+// topped hexagons; odd rows are offset horizontally by rx. The lattice is
+// unit-agnostic — callers pass pitches in pixels (Hexgrid pixel mode) or in
+// data units (data-space mode).
+const SQRT3 = Math.sqrt(3);
+export const HEX_DEFAULT_BIN_WIDTH = 20;
+// Build a regular pointy-topped hex lattice from a single pitch. dy is the
+// canonical dx*√3/2 row pitch for tiling regular hexagons — used by Hexgrid
+// pixel mode and any caller working in a single coordinate system.
+export function hexLattice(binWidth, originX = 0, originY = 0) {
+    const rx = binWidth / 2;
+    const ry = (rx * 2) / SQRT3;
+    return { rx, ry, dx: binWidth, dy: ry * 1.5, originX, originY };
+}
+// Build a lattice with independent column and row pitches. Use this when the
+// x and y axes have different units (data-space hexbin), so each axis's pitch
+// can be scaled by its own data extent and still tile cleanly.
+export function hexLatticeXY(dx, dy, originX = 0, originY = 0) {
+    // ry is the vertical half-bounding-box; row pitch dy = 1.5 * ry, so ry = 2/3 dy.
+    return { rx: dx / 2, ry: (dy * 2) / 3, dx, dy, originX, originY };
+}
+export function hexCenter(i, j, lattice) {
+    const cx = lattice.originX + (i + (j & 1) / 2) * lattice.dx;
+    const cy = lattice.originY + j * lattice.dy;
+    return [cx, cy];
+}
+// Snaps a pixel point to the nearest hex cell. Must check the rounded row and
+// both neighbors because the row-offset lattice lets an adjacent row be closer
+// than the rounded one.
+export function pointToHex(px, py, lattice) {
+    const { dx, dy, originX, originY } = lattice;
+    const rx = dx / 2;
+    const pj = Math.round((py - originY) / dy) || 0;
+    let best = { i: 0, j: 0, cx: 0, cy: 0, d2: Infinity };
+    for (const dj of [0, 1, -1]) {
+        const cj = pj + dj;
+        const ci = Math.round((px - originX - (cj & 1) * rx) / dx) || 0;
+        const cx = originX + (ci + (cj & 1) / 2) * dx;
+        const cy = originY + cj * dy;
+        const d2 = (px - cx) ** 2 + (py - cy) ** 2;
+        if (d2 < best.d2)
+            best = { i: ci, j: cj, cx, cy, d2 };
+    }
+    return { i: best.i, j: best.j, cx: best.cx, cy: best.cy };
+}
+// SVG subpath for a single pointy-topped hex, rounded to compact the output.
+export function hexagonSubpath(cx, cy, rx, ry) {
+    const r3 = (n) => Math.round(n * 1000) / 1000;
+    return (`M${r3(cx)},${r3(cy - ry)}` +
+        `l${r3(rx)},${r3(ry / 2)}` +
+        `v${r3(ry)}` +
+        `l${r3(-rx)},${r3(ry / 2)}` +
+        `l${r3(-rx)},${r3(-ry / 2)}` +
+        `v${r3(-ry)}Z`);
+}
+// Iterate hex cell centers covering the given pixel rect. Pads by one cell so
+// a clipPath can trim the edges cleanly without gaps.
+export function* hexCellsInRect(lattice, x0, y0, x1, y1) {
+    const { dx, dy, originX, originY, rx, ry } = lattice;
+    const jMin = Math.floor((y0 - originY - ry) / dy);
+    const jMax = Math.ceil((y1 - originY + ry) / dy);
+    for (let j = jMin; j <= jMax; j++) {
+        const xOffset = (j & 1) * (dx / 2);
+        const iMin = Math.floor((x0 - originX - xOffset - rx) / dx);
+        const iMax = Math.ceil((x1 - originX - xOffset + rx) / dx);
+        for (let i = iMin; i <= iMax; i++) {
+            const cx = originX + (i + (j & 1) / 2) * dx;
+            const cy = originY + j * dy;
+            yield [cx, cy];
+        }
+    }
+}

package/dist/marks/Hexbin.svelte

@@ -0,0 +1,293 @@
+<!-- @component
+    Renders a hexagonal binning of 2D scatter data: groups raw points into a
+    pixel-space hex lattice, runs a reducer per bin, and draws each non-empty
+    bin as a regular hexagonal cell. Cells are regular by construction because
+    the lattice is computed in pixel space (after scales exist) rather than in
+    data space, so they tile correctly under any axis aspect ratio.
+
+    Pairs naturally with the data-less `<Hexgrid />` mark for an empty-cell
+    backdrop — both default to `binWidth=20` (px), so a default `<Hexbin>` and
+    a default `<Hexgrid>` align by convention without user coordination.
+
+    The `fill` prop accepts a reducer name (`'count'`, `'mean'`, etc.) to map
+    aggregated values through the plot's color scale, or a CSS color for a
+    constant fill. Same shape for `stroke`.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface HexbinMarkProps {
+        /** Input data — 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>;
+        /**
+         * Hex cell pitch in pixels (distance between adjacent cell centers
+         * along x). Default 20, matching `<Hexgrid />`.
+         */
+        binWidth?: number;
+        /**
+         * Fill: a reducer name (`'count'`, `'mean'`, …) to map aggregated
+         * values through the color scale, OR a CSS color for a constant fill.
+         * Default `'count'` (maps bin counts through the color scale).
+         */
+        fill?: ReducerName | string;
+        /** Stroke: same shape as `fill`. Default `'none'`. */
+        stroke?: ReducerName | string;
+        strokeWidth?: number;
+        fillOpacity?: number;
+        strokeOpacity?: number;
+        opacity?: number;
+        clipPath?: string;
+        class?: string;
+    }
+
+    import Mark from '../Mark.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { reduceOutputs, type ReducerName } from '../helpers/reduce.js';
+    import { resolveProp } from '../helpers/resolve.js';
+    import { isColorOrNull } from '../helpers/typeChecks.js';
+    import {
+        hexLattice,
+        pointToHex,
+        hexagonSubpath,
+        HEX_DEFAULT_BIN_WIDTH
+    } from '../helpers/hexLattice.js';
+    import type {
+        ChannelAccessor,
+        DataRecord,
+        MarkType,
+        ScaledDataRecord
+    } from '../types/index.js';
+
+    // Per-record symbols for the synthetic data passed to <Mark>. Density
+    // uses the same pattern (Density.svelte:108-115) — the scale system reads
+    // channel values via Symbol-keyed accessors, so user data fields can't
+    // collide with our internal channels. Hexbin uses x/y point channels
+    // (not Density's x1/x2/y1/y2 range channels) because a bin IS a point;
+    // CHANNEL_SCALE maps both to the same x/y scale (see constants.ts:110).
+    const GEOM = Symbol('hexbin_geom');
+    const X_VAL = Symbol('hexbin_x');
+    const Y_VAL = Symbol('hexbin_y');
+    const FILL_VAL = Symbol('hexbin_fill');
+    const STROKE_VAL = Symbol('hexbin_stroke');
+
+    const DEFAULTS = {
+        ...getPlotDefaults().hexbin
+    };
+
+    let markProps: HexbinMarkProps = $props();
+
+    const {
+        data,
+        x: xAcc,
+        y: yAcc,
+        binWidth = HEX_DEFAULT_BIN_WIDTH,
+        fill: rawFill = 'count',
+        stroke: rawStroke = 'none',
+        strokeWidth,
+        fillOpacity,
+        strokeOpacity,
+        opacity,
+        clipPath,
+        class: className = 'hexbin',
+        ...options
+    }: HexbinMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const plot = usePlot();
+
+    // A fill/stroke value is a reducer when it's a function or a string that
+    // looks like a reducer name rather than a CSS color. Mirrors Density's
+    // isDensityAccessor logic (Density.svelte:159-175).
+    function isReducer(v: unknown): boolean {
+        if (typeof v === 'function') return true;
+        if (typeof v !== 'string') return false;
+        const lower = v.toLowerCase();
+        if (lower === 'none' || lower === 'inherit' || lower === 'currentcolor') return false;
+        return !isColorOrNull(v);
+    }
+
+    const fillIsReducer = $derived(isReducer(rawFill));
+    const strokeIsReducer = $derived(isReducer(rawStroke));
+
+    // Raw data extent in data units, used to bootstrap x/y scale domains
+    // before bins are computed (the chicken-and-egg: bins need pixel-space
+    // scales, scales need a domain). Same approach as Density.svelte:385-426.
+    const extent = $derived.by(() => {
+        if (!data?.length || xAcc == null || yAcc == null) return null;
+        let xMin = Infinity,
+            xMax = -Infinity,
+            yMin = Infinity,
+            yMax = -Infinity;
+        for (const d of data as any[]) {
+            const xv = resolveProp(xAcc as any, d);
+            const yv = resolveProp(yAcc as any, d);
+            if (typeof xv === 'number' && Number.isFinite(xv)) {
+                if (xv < xMin) xMin = xv;
+                if (xv > xMax) xMax = xv;
+            }
+            if (typeof yv === 'number' && Number.isFinite(yv)) {
+                if (yv < yMin) yMin = yv;
+                if (yv > yMax) yMax = yv;
+            }
+        }
+        if (!isFinite(xMin) || !isFinite(yMin)) return null;
+        return { x1: xMin, x2: xMax, y1: yMin, y2: yMax };
+    });
+
+    // Pixel-space binning. Builds a regular hex lattice from binWidth (px),
+    // projects each raw point through the live x/y scales to pixel space,
+    // and snaps to the nearest hex center via pointToHex. Returns null on
+    // the bootstrap pass (before scales are computable).
+    const binResult = $derived.by(() => {
+        if (!data?.length || xAcc == null || yAcc == null) return null;
+        const sx = plot.scales.x?.fn as ((v: any) => number) | undefined;
+        const sy = plot.scales.y?.fn as ((v: any) => number) | undefined;
+        if (!sx || !sy) return null;
+
+        const ml = plot.options.marginLeft ?? 0;
+        const mt = plot.options.marginTop ?? 0;
+        // Origin matches Hexgrid (Hexgrid.svelte:53) and the existing hexbin
+        // transform (transforms/hexbin.ts:85) so a default Hexbin and a default
+        // Hexgrid tile the same lattice without coordination. Cell (0,0)
+        // straddles the top-left corner — symmetric with the X half-pitch
+        // offset, which puts the cell half-inside the left edge.
+        const lattice = hexLattice(binWidth, ml + binWidth / 2, mt);
+
+        const map = new Map<
+            string,
+            { i: number; j: number; cx: number; cy: number; items: any[] }
+        >();
+        for (const d of data as any[]) {
+            const xv = resolveProp(xAcc as any, d);
+            const yv = resolveProp(yAcc as any, d);
+            const px = sx(xv);
+            const py = sy(yv);
+            if (!Number.isFinite(px) || !Number.isFinite(py)) continue;
+            const { i, j, cx, cy } = pointToHex(px, py, lattice);
+            const key = `${i},${j}`;
+            let bin = map.get(key);
+            if (!bin) {
+                bin = { i, j, cx, cy, items: [] };
+                map.set(key, bin);
+            }
+            bin.items.push(d);
+        }
+        return { lattice, bins: [...map.values()] };
+    });
+
+    // Synthetic records for <Mark>. Bootstrap pass emits two corner records so
+    // x/y scales compute a domain before bins exist; result pass emits the same
+    // two corner records plus one per bin carrying:
+    //   X_VAL / Y_VAL  raw data extent → x/y scale domain (one value per record;
+    //                  two records together span the extent)
+    //   FILL_VAL       reducer output  → color scale domain (when fill is a reducer)
+    //   STROKE_VAL     reducer output  → color scale domain (when stroke is a reducer)
+    //   GEOM           pixel-space hex geometry → rendered by children snippet
+    const markData = $derived.by((): DataRecord[] => {
+        const ext = extent;
+        const br = binResult;
+        if (!ext) return [];
+
+        if (!br) {
+            return [
+                { [X_VAL]: ext.x1, [Y_VAL]: ext.y1 } as DataRecord,
+                { [X_VAL]: ext.x2, [Y_VAL]: ext.y2 } as DataRecord
+            ];
+        }
+
+        const reducerOpts: any = {};
+        const outputs: string[] = [];
+        if (fillIsReducer) {
+            reducerOpts.fill = rawFill;
+            outputs.push('fill');
+        }
+        if (strokeIsReducer) {
+            reducerOpts.stroke = rawStroke;
+            outputs.push('stroke');
+        }
+
+        const records: any[] = [
+            // Persistent corner records so x/y scale domain stays at [x1,x2]
+            // / [y1,y2] across re-derivations. Without them, after the bootstrap
+            // pass replaces markData with bin records (all near a single x/y),
+            // the scale domain collapses and the next pass produces NaN.
+            { [X_VAL]: ext.x1, [Y_VAL]: ext.y1 } as any,
+            { [X_VAL]: ext.x2, [Y_VAL]: ext.y2 } as any
+        ];
+        for (const bin of br.bins) {
+            const item: any = {
+                // Channel values irrelevant for rendering (GEOM drives that),
+                // but must be inside the extent so they don't expand the domain.
+                [X_VAL]: ext.x1,
+                [Y_VAL]: ext.y1,
+                [GEOM]: {
+                    cx: bin.cx,
+                    cy: bin.cy,
+                    rx: br.lattice.rx,
+                    ry: br.lattice.ry
+                }
+            };
+
+            // reduceOutputs writes item.__fill = countValue etc. (note the
+            // `__` prefix — see reduce.ts:113); copy onto Symbol keys so the
+            // channel accessors below resolve them and user-data field names
+            // can't collide.
+            if (outputs.length > 0) {
+                reduceOutputs(
+                    item,
+                    bin.items,
+                    reducerOpts,
+                    outputs as any,
+                    { x: xAcc, y: yAcc } as any,
+                    {} as any
+                );
+                if (fillIsReducer) item[FILL_VAL] = item['__fill'];
+                if (strokeIsReducer) item[STROKE_VAL] = item['__stroke'];
+            }
+
+            records.push(item);
+        }
+        return records;
+    });
+
+    const markChannels = $derived([
+        'x',
+        'y',
+        ...(fillIsReducer ? ['fill'] : []),
+        ...(strokeIsReducer ? ['stroke'] : [])
+    ] as const);
+
+    const markChannelProps = $derived({
+        x: X_VAL as any,
+        y: Y_VAL as any,
+        ...(fillIsReducer ? { fill: FILL_VAL as any } : {}),
+        ...(strokeIsReducer ? { stroke: STROKE_VAL as any } : {})
+    });
+</script>
+
+<Mark
+    type={'hexbin' as MarkType}
+    data={markData}
+    channels={markChannels as any}
+    {...options}
+    {...markChannelProps}>
+    {#snippet children({ scaledData }: { scaledData: ScaledDataRecord[] })}
+        <g class={className} clip-path={clipPath}>
+            {#each scaledData as d, i (i)}
+                {@const geom = (d.datum as any)?.[GEOM]}
+                {#if geom}
+                    <path
+                        d={hexagonSubpath(geom.cx, geom.cy, geom.rx, geom.ry)}
+                        fill={fillIsReducer ? ((d as any).fill ?? 'currentColor') : rawFill}
+                        stroke={strokeIsReducer ? ((d as any).stroke ?? 'none') : rawStroke}
+                        stroke-width={strokeWidth}
+                        fill-opacity={fillOpacity}
+                        stroke-opacity={strokeOpacity}
+                        {opacity} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,67 @@
+import { type ReducerName } from '../helpers/reduce.js';
+import type { ChannelAccessor, DataRecord } from '../types/index.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        /** Input data — 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>;
+        /**
+         * Hex cell pitch in pixels (distance between adjacent cell centers
+         * along x). Default 20, matching `<Hexgrid />`.
+         */
+        binWidth?: number;
+        /**
+         * Fill: a reducer name (`'count'`, `'mean'`, …) to map aggregated
+         * values through the color scale, OR a CSS color for a constant fill.
+         * Default `'count'` (maps bin counts through the color scale).
+         */
+        fill?: ReducerName | string;
+        /** Stroke: same shape as `fill`. Default `'none'`. */
+        stroke?: ReducerName | string;
+        strokeWidth?: number;
+        fillOpacity?: number;
+        strokeOpacity?: number;
+        opacity?: number;
+        clipPath?: string;
+        class?: string;
+    };
+    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 a hexagonal binning of 2D scatter data: groups raw points into a
+ * pixel-space hex lattice, runs a reducer per bin, and draws each non-empty
+ * bin as a regular hexagonal cell. Cells are regular by construction because
+ * the lattice is computed in pixel space (after scales exist) rather than in
+ * data space, so they tile correctly under any axis aspect ratio.
+ *
+ * Pairs naturally with the data-less `<Hexgrid />` mark for an empty-cell
+ * backdrop — both default to `binWidth=20` (px), so a default `<Hexbin>` and
+ * a default `<Hexgrid>` align by convention without user coordination.
+ *
+ * The `fill` prop accepts a reducer name (`'count'`, `'mean'`, etc.) to map
+ * aggregated values through the plot's color scale, or a CSS color for a
+ * constant fill. Same shape for `stroke`.
+ */
+declare const Hexbin: $$IsomorphicComponent;
+type Hexbin<Datum extends DataRecord> = InstanceType<typeof Hexbin<Datum>>;
+export default Hexbin;

package/dist/marks/Hexgrid.svelte

@@ -23,11 +23,17 @@
     import Mark from '../Mark.svelte';
     import type { MarkType } from '../types/index.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
+    import {
+        hexLattice,
+        hexCellsInRect,
+        hexagonSubpath,
+        HEX_DEFAULT_BIN_WIDTH
+    } from '../helpers/hexLattice.js';
 
     let markProps: HexgridMarkProps = $props();
 
     const {
-        binWidth = 20,
+        binWidth = HEX_DEFAULT_BIN_WIDTH,
         stroke = 'currentColor',
         strokeOpacity = 0.1,
         strokeWidth = 1,
@@ -38,42 +44,16 @@
 
     const plot = usePlot();
 
-    const sqrt3 = Math.sqrt(3);
-
-    function r3(x: number) {
-        return Math.round(x * 1000) / 1000;
-    }
-
     const pathData = $derived.by(() => {
-        // Hex offset constants matching hexbin transform
-        const ox = 0.5;
-        const oy = 0;
-        const rx = binWidth / 2;
-        const ry = (rx * 2) / sqrt3;
-        const dx = binWidth;
-        const dy = ry * 1.5;
-
-        const w = plot.facetWidth;
-        const h = plot.facetHeight;
         const ml = plot.options.marginLeft;
         const mt = plot.options.marginTop;
+        const w = plot.facetWidth;
+        const h = plot.facetHeight;
 
-        const cols = Math.ceil(w / dx) + 1;
-        const rows = Math.ceil(h / dy) + 1;
-
+        const lattice = hexLattice(binWidth, ml + binWidth / 2, mt);
         let path = '';
-        for (let j = -1; j <= rows; j++) {
-            for (let i = -1; i <= cols; i++) {
-                const cx = r3((i + (j & 1) / 2 + ox) * dx + ml);
-                const cy = r3((j + oy) * dy + mt);
-                // Pointy-topped hexagon path
-                path += `M${cx},${r3(cy - ry)}`;
-                path += `l${r3(rx)},${r3(ry / 2)}`;
-                path += `v${r3(ry)}`;
-                path += `l${r3(-rx)},${r3(ry / 2)}`;
-                path += `l${r3(-rx)},${r3(-ry / 2)}`;
-                path += `v${r3(-ry)}Z`;
-            }
+        for (const [cx, cy] of hexCellsInRect(lattice, ml, mt, ml + w, mt + h)) {
+            path += hexagonSubpath(cx, cy, lattice.rx, lattice.ry);
         }
         return path;
     });

package/dist/marks/index.d.ts

@@ -31,6 +31,7 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Hexbin } from './Hexbin.svelte';
 export { default as Hexgrid } from './Hexgrid.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Image } from './Image.svelte';

package/dist/marks/index.js

@@ -31,6 +31,7 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Hexbin } from './Hexbin.svelte';
 export { default as Hexgrid } from './Hexgrid.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Image } from './Image.svelte';

package/dist/transforms/hexbin.js

@@ -2,7 +2,7 @@ import { resolveChannel } from '../helpers/resolve.js';
 import { extent } from 'd3-array';
 import { reduceOutputs } from '../helpers/reduce.js';
 import { groupFacetsAndZ } from '../helpers/group.js';
-const sqrt3 = Math.sqrt(3);
+import { hexLattice, pointToHex } from '../helpers/hexLattice.js';
 const CHANNELS = {
     x: Symbol('hexbin_x'),
     y: Symbol('hexbin_y')
@@ -32,51 +32,23 @@ export function hexbin({ data, ...channels }, options = {}) {
     if (xMin == null || yMin == null) {
         return { data: [], ...channels, x: CHANNELS.x, y: CHANNELS.y };
     }
-    // Compute hex cell width in data units
+    // Cell pitch in data units. Pointy-topped hex with regular geometry — dy
+    // derived from dx, so dy is in the same data units as dx. Cells are visually
+    // regular only when the data units happen to match across axes; for
+    // pixel-correct cells under arbitrary data extents, use the <Hexbin> mark
+    // instead, which builds its lattice in pixel space after scales exist.
     const dx = explicitBinWidth ?? (xMax - xMin) / Math.max(1, bins);
-    // Vertical spacing between hex centers (pointy-topped hexagons)
-    const dy = (dx * 1.5) / sqrt3;
-    // Hex offset to avoid edge alignment
-    const ox = dx * 0.5;
-    const oy = 0;
-    // Bin data into hex cells
+    const lattice = hexLattice(dx, xMin + dx / 2, yMin);
     const binMap = new Map();
     for (let i = 0; i < data.length; i++) {
         const px = xValues[i];
         const py = yValues[i];
         if (px == null || py == null || isNaN(px) || isNaN(py))
             continue;
-        // Convert to hex grid coordinates
-        let pj = Math.round((py - yMin - oy) / dy);
-        let pi = Math.round((px - xMin - ox - (pj & 1) * (dx / 2)) / dx);
-        // Snap to nearest hex center and check if an adjacent cell is closer
-        const cx0 = (pi + (pj & 1) / 2) * dx + ox + xMin;
-        const cy0 = pj * dy + oy + yMin;
-        // Check the two candidate rows
-        const pj1 = pj + 1;
-        const pi1 = Math.round((px - xMin - ox - (pj1 & 1) * (dx / 2)) / dx);
-        const cx1 = (pi1 + (pj1 & 1) / 2) * dx + ox + xMin;
-        const cy1 = pj1 * dy + oy + yMin;
-        const pj2 = pj - 1;
-        const pi2 = Math.round((px - xMin - ox - (pj2 & 1) * (dx / 2)) / dx);
-        const cx2 = (pi2 + (pj2 & 1) / 2) * dx + ox + xMin;
-        const cy2 = pj2 * dy + oy + yMin;
-        const d0 = (px - cx0) ** 2 + (py - cy0) ** 2;
-        const d1 = (px - cx1) ** 2 + (py - cy1) ** 2;
-        const d2 = (px - cx2) ** 2 + (py - cy2) ** 2;
-        if (d1 < d0 && d1 < d2) {
-            pj = pj1;
-            pi = pi1;
-        }
-        else if (d2 < d0 && d2 < d1) {
-            pj = pj2;
-            pi = pi2;
-        }
+        const { i: pi, j: pj, cx, cy } = pointToHex(px, py, lattice);
         const key = `${pi},${pj}`;
         let bin = binMap.get(key);
         if (!bin) {
-            const cx = (pi + (pj & 1) / 2) * dx + ox + xMin;
-            const cy = pj * dy + oy + yMin;
             bin = { index: [], cx, cy };
             binMap.set(key, bin);
         }

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'contour' | 'custom' | 'delaunayLink' | 'delaunayMesh' | 'density' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'hexgrid' | 'hull' | 'image' | 'link' | 'line' | 'raster' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'voronoi' | 'voronoiMesh' | 'waffleX' | 'waffleY';
+export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'contour' | 'custom' | 'delaunayLink' | 'delaunayMesh' | 'density' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'hexbin' | 'hexgrid' | 'hull' | 'image' | 'link' | 'line' | 'raster' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'voronoi' | 'voronoiMesh' | 'waffleX' | 'waffleY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
 import type * as CSS from 'csstype';

package/dist/types/plot.d.ts

@@ -5,7 +5,7 @@ import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, Legen
 import type { Snippet } from 'svelte';
 import type { GenericMarkOptions, Mark } from './index.js';
 import type { Clip } from '../helpers/projection.js';
-import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, Contour, DelaunayLink, DelaunayMesh, Density, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Hull, Image, Line, Link, Pointer, Raster, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Trail, Vector, Voronoi, VoronoiMesh } from '../marks/index.js';
+import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, Contour, DelaunayLink, DelaunayMesh, Density, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Hexbin, Hull, Image, Line, Link, Pointer, Raster, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Trail, Vector, Voronoi, VoronoiMesh } from '../marks/index.js';
 import type WaffleX from '../marks/WaffleX.svelte';
 import type WaffleY from '../marks/WaffleY.svelte';
 import type BaseAxisX from '../marks/helpers/BaseAxisX.svelte';
@@ -260,6 +260,10 @@ export type PlotDefaults = {
     gridY: Partial<Omit<ComponentProps<typeof GridY>, IgnoreDefaults> & {
         implicit: boolean;
     }> | true;
+    /**
+     * default props for hexbin marks
+     */
+    hexbin: Partial<Omit<ComponentProps<typeof Hexbin>, IgnoreDefaults>>;
     /**
      * default props for hull marks
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.14.2-pr-552.0",
+    "version": "0.14.2-pr-552.1",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",