svelteplot · gka · Feb 24, 2026 · Feb 23, 2026 · Feb 24, 2026 · Feb 24, 2026
diff --git a/src/routes/examples/[group]/[page]/+page.svelte b/src/routes/examples/[group]/[page]/+page.svelte
@@ -21,6 +21,7 @@
         description?: string;
         sortKey?: number;
         fullCode?: boolean;
+        data?: Record<string, string>;
     };
 
     type NavLink = {
@@ -127,32 +128,43 @@
             const [beforeScript, script, svelte] =
                 code.split(/<\/?script[^>]*>/);
 
-            const cleanedScript = script
-                .split(';')
-                .filter((line) => {
-                    const trimmed = line.trim();
-                    return !(
-                        trimmed.startsWith('import ') ||
-                        trimmed.includes('ExamplesData') ||
-                        trimmed === ''
-                    );
-                })
-                .join(';')
-                .trim();
+            const cleanedScript =
+                script
+
+                    .split(';')
+                    .filter((line) => {
+                        const trimmed = line.trim();
+                        return !(
+                            trimmed.startsWith('import ') ||
+                            trimmed.includes(
+                                'ExamplesData'
+                            ) ||
+                            trimmed === ''
+                        );
+                    })
+                    .join(';')
+                    .trim() + 'x';
 
             return `<scr${'ipt'} lang="ts">\n    // imports etc.\n    ${cleanedScript}\n</scr${'ipt'}>\n\n${svelte.trim()}`;
         }
         return code.trim();
     }
 
+    const sourceSimple = $derived(
+        (source ?? '')
+            .replace(/\((\w+) as any\)/g, '$1')
+            .replace(/ as any/g, '')
+            .replace(/: any(\W)/g, '$1')
+    );
+
     const replHash = $derived(
         encodePlaygroundState(
             createREPLState(
-                mod?.title,
+                mod?.title ?? '',
                 key,
-                source,
+                sourceSimple ?? '',
                 mod?.data ?? {},
-                data ?? {}
+                (data ?? {}) as any
             )
         )
     );
@@ -193,12 +205,12 @@
                     <CodeBlock
                         lang="svelte"
                         code={cleanCode(
-                            source.substring(
+                            sourceSimple.substring(
                                 mod.fullCode
-                                    ? source.indexOf(
+                                    ? sourceSimple.indexOf(
                                           '<script lang="ts">'
                                       )
-                                    : source.lastIndexOf(
+                                    : sourceSimple.lastIndexOf(
                                           '</scr' + 'ipt>'
                                       ) + 9
                             )

diff --git a/src/routes/examples/[group]/[page]/replUtils.ts b/src/routes/examples/[group]/[page]/replUtils.ts
@@ -73,7 +73,7 @@ export function createREPLState(
             Object.keys(data ?? {}).length
                 ? `${Object.entries(data ?? {})
                       .map(([key, url]) => `import ${key} from './${url.split('/').at(-1)}';`)
-                      .join('\n   ')}\n    import `
+                      .join('\n  ')}\n  import `
                 : 'import '
         )
         .split(';\n')
@@ -91,7 +91,7 @@ export function createREPLState(
                     ?.filter((d) => d)
                     ?.map((mod) => {
                         needSharedUIs.push(mod);
-                        return `\n    import ${mod} from './${mod}.svelte'`;
+                        return `\n  import ${mod} from './${mod}.svelte'`;
                     })
                     .join(';');
             }

diff --git a/src/routes/examples/area/ridgeline.svelte b/src/routes/examples/area/ridgeline.svelte
@@ -75,7 +75,7 @@
     fy={{
         axis: false,
         domain: months
-    }}
+    } as any}
     x={{ label: 'Mean temperature (C)' }}
     y={{
         percent: true,

diff --git a/src/routes/examples/axis/facet-padding.svelte b/src/routes/examples/axis/facet-padding.svelte
@@ -15,7 +15,7 @@
         domain: ['Panel A', 'Panel B', 'Panel C'],
         axis: 'bottom',
         padding: 0.2
-    }}
+    } as any}
     x={{ domain: [0, 1] }}
     y={{ domain: [0, 1] }}
     grid

diff --git a/src/routes/examples/axis/unit-tick.svelte b/src/routes/examples/axis/unit-tick.svelte
@@ -12,7 +12,7 @@
 <Plot
     y={{
         tickFormat: (d, i, ticks) =>
-            `${d}${i === ticks.length - 1 ? ' USD' : ''}`
+            `${String(d)}${i === ticks.length - 1 ? ' USD' : ''}`
     }}>
     <Line data={aapl} x="Date" y="Close" />
 </Plot>
diff --git a/src/routes/examples/brush/zoomable-scatter.svelte b/src/routes/examples/brush/zoomable-scatter.svelte
@@ -10,7 +10,15 @@
     import { cubicInOut } from 'svelte/easing';
     import { extent } from 'd3-array';
 
-    const { penguins } = $props();
+    type PenguinRow = {
+        culmen_length_mm: number;
+        culmen_depth_mm: number;
+        species: string;
+    };
+
+    const { penguins } = $props() as {
+        penguins: PenguinRow[];
+    };
 
     let brush = $state({ enabled: false });
     let isZoomedIn = $state(false);
@@ -24,8 +32,10 @@
         (d) => d.culmen_depth_mm
     );
 
-    let domainX = $state(fullDomainX);
-    let domainY = $state(fullDomainY);
+    let domainX: [number, number] | [undefined, undefined] =
+        $state(fullDomainX);
+    let domainY: [number, number] | [undefined, undefined] =
+        $state(fullDomainY);
 
     function resetZoom() {
         domainX = fullDomainX;
@@ -45,15 +55,15 @@
     <Plot
         grid
         x={{
-            domain: domainXT.current,
+            domain: domainXT.current as any,
             label: 'culmen_length_mm'
         }}
         y={{
-            domain: domainYT.current,
+            domain: domainYT.current as any,
             label: 'culmen_depth_mm'
         }}>
         <Dot
-            data={penguins}
+            data={penguins as any}
             x="culmen_length_mm"
             y="culmen_depth_mm"
             stroke="species"
@@ -64,15 +74,21 @@
                 cursor="zoom-in"
                 onbrushend={(e) => {
                     if (e.brush.enabled) {
-                        domainX = [e.brush.x1, e.brush.x2];
-                        domainY = [e.brush.y1, e.brush.y2];
+                        domainX = [
+                            e.brush.x1 as any,
+                            e.brush.x2 as any
+                        ];
+                        domainY = [
+                            e.brush.y1 as any,
+                            e.brush.y2 as any
+                        ];
                         brush.enabled = false;
                         isZoomedIn = true;
                     }
                 }} />
         {:else}
             <Frame
-                stroke={false}
+                stroke={'none' as any}
                 fill="transparent"
                 cursor="zoom-out"
                 onpointerup={resetZoom} />

diff --git a/src/routes/examples/cell/cell-canvas.svelte b/src/routes/examples/cell/cell-canvas.svelte
@@ -23,7 +23,7 @@
     <Plot
         padding={0}
         color={{
-            scheme: 'OrRd',
+            scheme: 'orrd',
             type: 'threshold',
             domain: [15, 17, 19, 20, 25, 30],
             legend: true

diff --git a/src/routes/examples/cell/simpsons.svelte b/src/routes/examples/cell/simpsons.svelte
@@ -19,7 +19,7 @@
     marginTop={40}
     x={{ type: 'band', axis: 'top' }}
     y={{ type: 'band' }}
-    color={{ type: 'quantile', scheme: 'PiYG' }}>
+    color={{ type: 'quantile', scheme: 'piyg' }}>
     <Cell
         data={simpsons}
         x="episode"

diff --git a/src/routes/examples/cell/temperatures-threshold.svelte b/src/routes/examples/cell/temperatures-threshold.svelte
@@ -23,7 +23,7 @@
     <Plot
         padding={0}
         color={{
-            scheme: 'OrRd',
+            scheme: 'orrd',
             type: 'threshold',
             domain: [15, 17, 19, 20, 25, 30],
             legend: true

diff --git a/src/routes/examples/custom/custom-rect.svelte b/src/routes/examples/custom/custom-rect.svelte
@@ -25,10 +25,22 @@
     <CustomMark {data} x1="x1" x2="x2" y1="y1" y2="y2">
         {#snippet mark({ record })}
             <rect
-                x={Math.min(record.x1, record.x2)}
-                y={Math.min(record.y1, record.y2)}
-                width={Math.abs(record.x2 - record.x1)}
-                height={Math.abs(record.y2 - record.y1)}
+                x={Math.min(
+                    record.x1 as number,
+                    record.x2 as number
+                )}
+                y={Math.min(
+                    record.y1 as number,
+                    record.y2 as number
+                )}
+                width={Math.abs(
+                    (record.x2 as number) -
+                        (record.x1 as number)
+                )}
+                height={Math.abs(
+                    (record.y2 as number) -
+                        (record.y1 as number)
+                )}
                 stroke="currentColor"
                 fill="currentColor"
                 fill-opacity="0.5" />

diff --git a/src/routes/examples/dot/3-dot-plot.svelte b/src/routes/examples/dot/3-dot-plot.svelte
@@ -26,7 +26,7 @@
     y={{
         type: 'point',
         label: false,
-        tickFormat: (d) => d.toUpperCase()
+        tickFormat: (d) => (d as string).toUpperCase()
     }}>
     <GridY strokeDasharray="1,3" strokeOpacity={0.5} />
     <Dot

diff --git a/src/routes/examples/dot/dodge-faceted.svelte b/src/routes/examples/dot/dodge-faceted.svelte
@@ -16,7 +16,7 @@
 
 <Plot
     color={{ legend: true }}
-    fx={{ axis: 'bottom' }}
+    fx={{ axis: 'bottom' } as any}
     r={{ zero: false }}
     y={{ grid: true }}>
     <Dot

diff --git a/src/routes/examples/geo/inset-aspect.svelte b/src/routes/examples/geo/inset-aspect.svelte
@@ -8,8 +8,8 @@
 </script>
 
 <script lang="ts">
-    import { Slider } from '$shared/ui';
     import { Plot, Geo } from 'svelteplot';
+    import { Slider } from '$shared/ui';
     import * as topojson from 'topojson-client';
     import { geoCentroid } from 'd3-geo';
     import type { WorldAtlas } from '../types';
@@ -28,10 +28,12 @@
         topojson
             .feature(world, world.objects.countries)
             .features.find(
-                (d) => d.properties.name === selectedName
+                (d) =>
+                    (d.properties as any).name ===
+                    selectedName
             )
     );
-    let centroid = $derived(geoCentroid(selected));
+    let centroid = $derived(geoCentroid(selected as any));
 </script>
 
 <Slider bind:value={inset} min={0} max={50} label="inset" />
@@ -55,6 +57,6 @@
         fill="currentColor"
         stroke="var(--svelteplot-bg)"
         onclick={(d, e) =>
-            (selectedName = e.properties.name)} />
+            (selectedName = (e as any).properties.name)} />
     <Geo data={[selected]} />
 </Plot>
diff --git a/src/routes/examples/geo/us-choropleth-canvas.svelte b/src/routes/examples/geo/us-choropleth-canvas.svelte
@@ -9,23 +9,28 @@
     };
 </script>
 
-<script>
+<script lang="ts">
     import { Plot } from 'svelteplot';
     import Geo from 'svelteplot/marks/Geo.svelte';
     import * as topojson from 'topojson-client';
 
-    const { us, unemployment } = $props();
+    const { us, unemployment } = $props() as {
+        us: any;
+        unemployment: any[];
+    };
     const rateMap = $derived(
-        new Map(unemployment.map((d) => [d.id, +d.rate]))
+        new Map(
+            unemployment.map((d: any) => [d.id, +d.rate])
+        )
     );
     const counties = $derived(
-        topojson
+        (topojson as any)
             .feature(us, us.objects.counties)
-            .features.map((feat) => {
+            .features.map((feat: any) => {
                 return {
                     ...feat,
                     properties: {
-                        ...feat.properties,
+                        ...(feat as any).properties,
                         unemployment: rateMap.get(+feat.id)
                     }
                 };
@@ -45,5 +50,5 @@
     <Geo
         canvas
         data={counties}
-        fill={(d) => d.properties.unemployment} />
+        fill={(d) => (d as any).properties.unemployment} />
 </Plot>
diff --git a/src/routes/examples/geo/us-choropleth.svelte b/src/routes/examples/geo/us-choropleth.svelte
@@ -9,23 +9,26 @@
     };
 </script>
 
-<script>
+<script lang="ts">
     import { Plot } from 'svelteplot';
     import Geo from 'svelteplot/marks/Geo.svelte';
     import * as topojson from 'topojson-client';
 
     const { us, unemployment } = $props();
+
     const rateMap = $derived(
-        new Map(unemployment.map((d) => [d.id, +d.rate]))
+        new Map(
+            unemployment.map((d: any) => [d.id, +d.rate])
+        )
     );
     const counties = $derived(
-        topojson
+        (topojson as any)
             .feature(us, us.objects.counties)
-            .features.map((feat) => {
+            .features.map((feat: any) => {
                 return {
                     ...feat,
                     properties: {
-                        ...feat.properties,
+                        ...(feat as any).properties,
                         unemployment: rateMap.get(+feat.id)
                     }
                 };
@@ -44,7 +47,7 @@
     }}>
     <Geo
         data={counties}
-        fill={(d) => d.properties.unemployment}
+        fill={(d) => (d as any).properties.unemployment}
         title={(d) =>
-            `${d.properties.name}\n${d.properties.unemployment}%`} />
+            `${(d as any).properties.name}\n${(d as any).properties.unemployment}%`} />
 </Plot>