add date jittering example

svelteplot · gka · May 26, 2025 · May 19, 2025 · May 26, 2025 · May 26, 2025
commit 91d841376df16efd43341eac86f889edc23134b1
diff --git a/src/routes/transforms/jitter/+page.md b/src/routes/transforms/jitter/+page.md
@@ -64,6 +64,7 @@ The jitter transform accepts the following options:
 - **type**: Distribution type, either `'uniform'` (default) or `'normal'`
 - **width**: Width of the uniform distribution (default: `0.35`); used when `type` is `'uniform'`
 - **std**: Standard deviation for the normal distribution (default: `0.15`); used when `type` is `'normal'`
+- **source**: Optional random number source that produces values in range [0,1). 
 
 ## jitterX
 
@@ -93,52 +94,43 @@ Jitters along the y dimension
 
 Jittering also works for temporal data. When jittering Date objects, random time offsets are added to each date value:
 
-```svelte
+```svelte live
 <script>
     import { Plot, Dot, jitterX } from 'svelteplot';
     import { page } from '$app/state';
     import { Select, Slider } from '$lib/ui';
-    let { aapl } = $derived(page.data.data);
+    let { bmi } = $derived(page.data.data);
 
     // Use a subset of the data for this example
-    let data = $state(aapl.slice(0, 40));
+    const data = $derived(bmi.filter(d => d.year > 2018).map(d => ({ ...d, year: new Date(d.year,0,1)})));
 
     let type = $state('uniform');
-    let width = $state(1000 * 60 * 60 * 24); // Default 1 day in milliseconds
-    let std = $state(1000 * 60 * 60 * 12); // Default 12 hours in milliseconds
+    let width = $state('1 month');
+
+    const timeIntervals = ['1 day', '3 days', '1 week', '2 weeks', '3 weeks', '1 month', '2 months', '1 quarter', '1 year']
 </script>
 
 <Select
     bind:value={type}
     options={['uniform', 'normal']}
     label="Distribution type" />
-{#if type === 'uniform'}
-    <Slider
+     <Select
+        options={timeIntervals}
         bind:value={width}
-        label="Width (milliseconds)"
-        min={0}
-        max={1000 * 60 * 60 * 48}
-        step={1000 * 60 * 60} />
-{:else}
-    <Slider
-        bind:value={std}
-        label="Standard deviation"
-        min={0}
-        max={1000 * 60 * 60 * 24}
-        step={1000 * 60 * 60} />
-{/if}
+        label={type === 'uniform' ? 'Width' : 'Std'}
+         />
+
 <Plot inset={20} x={{ type: 'time' }} y={{ grid: true }}>
     <Dot
         {...jitterX(
             {
                 data,
-                x: 'Date',
-                y: 'Volume'
+                x: 'year',
+                y: 'bmi'
             },
             {
                 type,
-                std,
-                width
+                [type === 'uniform' ? 'width' : 'std']: width,
             }
         )} />
 </Plot>

diff --git a/src/routes/transforms/jitter/+page.ts b/src/routes/transforms/jitter/+page.ts
@@ -3,6 +3,6 @@ import type { PageLoad } from './$types.js';
 
 export const load: PageLoad = async ({ fetch }) => {
     return {
-        data: await loadDatasets(['cars'], fetch)
+        data: await loadDatasets(['cars', 'bmi'], fetch)
     };
 };