svelteplot · gka · Jun 11, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.3.3",
+    "version": "0.3.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -68,10 +68,14 @@
         "@types/d3-geo": "^3.1.0",
         "@types/d3-interpolate": "^3.0.4",
         "@types/d3-path": "^3.1.1",
+        "@types/d3-quadtree": "^3.0.6",
         "@types/d3-random": "^3.0.3",
         "@types/d3-scale": "^4.0.9",
         "@types/d3-scale-chromatic": "^3.1.0",
         "@types/d3-shape": "^3.1.7",
+        "@types/geojson": "^7946.0.16",
+        "@types/topojson": "^3.2.6",
+        "@types/topojson-client": "^3.1.5",
         "@typescript-eslint/eslint-plugin": "^8.34.0",
         "@typescript-eslint/parser": "^8.34.0",
         "csstype": "^3.1.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/screenshot-examples.js b/screenshot-examples.js
@@ -12,6 +12,9 @@ const OUTPUT_DIR = path.join(__dirname, 'static', 'examples');
 const SCREENSHOT_WIDTH = 600;
 const DEVICE_PIXEL_RATIO = 2;
 
+// Only take missing screenshots if ENV variable is set
+const ONLY_MISSING = process.env.ONLY_MISSING == 1;
+
 // Start the development server and return server instance and local URL
 const startServer = () => {
     console.log('Starting development server...');
@@ -70,6 +73,26 @@ const getSvelteFiles = async (dir) => {
     return files.flat();
 };
 
+const getExistingScreenshots = async (dir) => {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+
+    const files = await Promise.all(
+        entries.map(async (entry) => {
+            const fullPath = path.join(dir, entry.name);
+
+            if (entry.isDirectory()) {
+                return getExistingScreenshots(fullPath);
+            } else if (entry.isFile() && entry.name.endsWith('.png')) {
+                return [fullPath];
+            }
+
+            return [];
+        })
+    );
+
+    return files.flat();
+};
+
 // Convert file path to URL path
 const filePathToUrlPath = (filePath) => {
     const relativePath = path.relative(EXAMPLES_DIR, filePath);
@@ -161,9 +184,35 @@ const screenshotExamples = async () => {
         });
 
         // Get all example Svelte files
-        const svelteFiles = await getSvelteFiles(EXAMPLES_DIR);
+        let svelteFiles = await getSvelteFiles(EXAMPLES_DIR);
         console.log(`Found ${svelteFiles.length} example files to screenshot`);
 
+        if (ONLY_MISSING) {
+            // Filter to only include files that don't have screenshots ()
+            const existingScreenshots = (await getExistingScreenshots(OUTPUT_DIR)).map((file) =>
+                path.relative(OUTPUT_DIR, file)
+            );
+
+            console.log(`Found ${existingScreenshots.length} existing screenshots`);
+
+            // Filter out files that already have screenshots
+            svelteFiles = svelteFiles.filter((filePath) => {
+                return (
+                    !existingScreenshots.find((screenshot) =>
+                        filePath.endsWith(screenshot.replace('.png', '.svelte'))
+                    ) ||
+                    !existingScreenshots.find((screenshot) =>
+                        filePath.endsWith(screenshot.replace('.dark.png', '.svelte'))
+                    )
+                );
+            });
+
+            console.log(
+                `Filtered down to ${svelteFiles.length} files needing screenshots`,
+                svelteFiles
+            );
+        }
+
         // Process each file
         for (const filePath of svelteFiles) {
             const urlPath = filePathToUrlPath(filePath);

diff --git a/src/lib/Mark.svelte b/src/lib/Mark.svelte
@@ -1,6 +1,24 @@
-<script lang="ts">
-    import { getContext, untrack, type Snippet } from 'svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface MarkProps extends Partial<BaseMarkProps<Datum>> {
+        data?: Datum[];
+        automatic?: boolean;
+        type: MarkType;
+        channels?: ScaledChannelName[];
+        required?: ScaledChannelName[];
+        requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
+        children?: Snippet<
+            [
+                {
+                    mark: Mark<GenericMarkOptions>;
+                    usedScales: ReturnType<typeof getUsedScales>;
+                    scaledData: ScaledDataRecord[];
+                }
+            ]
+        >;
+        defaults?: Partial<Record<ScaledChannelName, RawValue>>;
+    }
 
+    import { getContext, untrack, type Snippet } from 'svelte';
     import { CHANNEL_SCALE, INDEX } from '$lib/constants.js';
     import type {
         ScaledChannelName,
@@ -17,32 +35,12 @@
         ResolvedDataRecord,
         ScaledDataRecord,
         ScaleType
-    } from './types.js';
+    } from './types/index.js';
     import { isEqual } from 'es-toolkit';
     import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
     import { testFilter, isValid } from '$lib/helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
 
-    type MarkProps = {
-        data?: DataRecord[];
-        automatic?: boolean;
-        type: MarkType;
-        channels?: ScaledChannelName[];
-        required?: ScaledChannelName[];
-        requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
-        children?: Snippet<
-            [
-                {
-                    mark: Mark<GenericMarkOptions>;
-                    usedScales: ReturnType<typeof getUsedScales>;
-                    scaledData: ScaledDataRecord[];
-                }
-            ]
-        >;
-        defaults?: Partial<Record<ScaledChannelName, RawValue>>;
-    } & Partial<Record<ChannelName, ChannelAccessor>> &
-        Partial<BaseMarkProps>;
-
     let {
         data = [],
         children,
@@ -134,13 +132,13 @@
     const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
     const testFacet = $derived(getTestFacet());
 
-    const resolvedData: ResolvedDataRecord[] = $derived(
+    const resolvedData: ResolvedDataRecord<Datum>[] = $derived(
         data
             .map((d, i) => ({ ...d, [INDEX]: i }))
             .flatMap((row) => {
-                const channels = options as Record<ChannelName, ChannelAccessor>;
+                const channels = options as Record<ChannelName, ChannelAccessor<Datum>>;
                 if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
-                const out: ResolvedDataRecord = {
+                const out: ResolvedDataRecord<Datum> = {
                     datum: row
                 };
                 for (const [channel] of Object.entries(CHANNEL_SCALE) as [
@@ -208,7 +206,7 @@
      */
     const scaledData = $derived(
         resolvedData.flatMap((row) => {
-            const out: ScaledDataRecord = {
+            const out: ScaledDataRecord<Datum> = {
                 datum: row.datum,
                 valid: true
             };

diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotDefaults, PlotOptions } from './types.js';
+    import type { PlotDefaults, PlotOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
@@ -28,7 +28,6 @@
     import { autoScale, autoScaleColor } from './helpers/autoScales.js';
     import { namedProjection } from './helpers/autoProjection.js';
     import { isObject } from './helpers/index.js';
-    import { getContext } from 'svelte';
 
     let {
         header: userHeader,

diff --git a/src/lib/core/Facet.svelte b/src/lib/core/Facet.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { setContext, type Snippet } from 'svelte';
     import { resolveChannel } from '../helpers/resolve.js';
-    import type { BaseMarkProps, DataRecord, RawValue } from '../types.js';
+    import type { BaseMarkProps, DataRecord, RawValue } from '../types/index.js';
 
     let {
         fx,

diff --git a/src/lib/core/FacetAxes.svelte b/src/lib/core/FacetAxes.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext } from '../types.js';
+    import type { PlotContext } from '../types/index.js';
     import { scaleBand } from 'd3-scale';
     import BaseAxisX from '../marks/helpers/BaseAxisX.svelte';
     import BaseAxisY from '../marks/helpers/BaseAxisY.svelte';

diff --git a/src/lib/core/FacetGrid.svelte b/src/lib/core/FacetGrid.svelte
@@ -5,7 +5,7 @@
 -->
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
-    import type { PlotContext, GenericMarkOptions, Mark } from '../types.js';
+    import type { PlotContext, GenericMarkOptions, Mark } from '../types/index.js';
     import { scaleBand } from 'd3-scale';
     import Facet from './Facet.svelte';
     import { getEmptyFacets } from '../helpers/facets.js';

diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
@@ -22,7 +22,7 @@
         PlotDefaults,
         PlotState,
         RawValue
-    } from '../types.js';
+    } from '../types/index.js';
     import FacetGrid from './FacetGrid.svelte';
 
     import mergeDeep from '../helpers/mergeDeep.js';

diff --git a/src/lib/helpers/autoTicks.ts b/src/lib/helpers/autoTicks.ts
@@ -42,7 +42,7 @@ export function autoTicks(
     if (interval) {
         const [lo, hi] = extent(domain);
         const I = maybeInterval(interval, type);
-        return I.range(lo, I.offset(hi));
+        return I.range(lo, I.offset(hi)).filter((d) => d >= lo && d <= hi);
     }
     return typeof scaleFn.ticks === 'function' ? scaleFn.ticks(count) : [];
 }
diff --git a/src/lib/helpers/projection.ts b/src/lib/helpers/projection.ts
@@ -5,7 +5,8 @@ import { constant, isObject } from './index.js';
 const identity = constant({ stream: (stream) => stream });
 
 const defaultAspectRatio = 0.618;
-type Clip = boolean | null | number | 'frame';
+
+export type Clip = boolean | null | number | 'frame';
 
 type ProjectionOptions = {
     type: string;

diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
@@ -68,10 +68,10 @@ export function toChannelOption(
           };
 }
 
-export function resolveChannel(
+export function resolveChannel<T>(
     channel: ChannelName,
-    datum: DataRow,
-    channels: Partial<Record<ChannelName, ChannelAccessor | ChannelAlias>>
+    datum: DataRow<T>,
+    channels: Partial<Record<ChannelName, ChannelAccessor<T> | ChannelAlias>>
 ): RawValue {
     const scale = CHANNEL_SCALE[channel];
     // the z channel has an automatic alias mechanism