You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/routes/transforms/jitter/+page.md
+55-6Lines changed: 55 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -2,9 +2,11 @@
2
2
title: Jitter transform
3
3
---
4
4
5
-
The **jitter transform** adds random noise to data points, which is useful for revealing overlapping points in scatter plots and reducing overplotting. This is particularly helpful when working with discrete or categorical data where many points might share the same coordinates.
5
+
The **jitter transform** adds random noise to data points, which is useful for revealing overlapping points in scatter plots and reducing overplotting.
6
6
7
-
> **Note:** The jitter transform works in data coordinates. To jitter in screen coordinates, you can use the `dx` and `dy` mark properties instead.
7
+
:::info
8
+
**Note:** The jitter transform works in data coordinates. To jitter in screen coordinates, you can use the `dx` and `dy` mark properties instead.
9
+
:::
8
10
9
11
The jitter transform spreads out overlapping points by adding random noise. This makes it easier to see the distribution and density of points:
10
12
@@ -62,13 +64,29 @@ The jitter transform spreads out overlapping points by adding random noise. This
62
64
The jitter transform accepts the following options:
63
65
64
66
-**type**: Distribution type, either `'uniform'` (default) or `'normal'`
67
+
-`uniform`: Evenly distributed points within range [-width, width]
68
+
-`normal`: Normal distribution centered at 0 with standard deviation `std`
65
69
-**width**: Width of the uniform distribution (default: `0.35`); used when `type` is `'uniform'`
70
+
- For numeric data: A number representing the range on either side of the original value
71
+
- For date data: A time interval string (e.g., `'1 month'`, `'2 weeks'`, `'3 days'`)
66
72
-**std**: Standard deviation for the normal distribution (default: `0.15`); used when `type` is `'normal'`
67
-
-**source**: Optional random number source that produces values in range [0,1).
73
+
- For numeric data: A number representing the standard deviation
74
+
- For date data: A time interval string (e.g., `'1 month'`, `'2 weeks'`, `'3 days'`)
75
+
-**source**: Optional random number source that produces values in range [0,1)
76
+
- Useful for deterministic jittering (testing or reproducibility)
77
+
- Can be used with d3's random generators: `randomLcg()` from d3-random
78
+
79
+
The following time interval strings are supported for temporal jittering:
80
+
-`'1 day'`, `'3 days'`
81
+
-`'1 week'`, `'2 weeks'`, `'3 weeks'`
82
+
-`'1 month'`, `'2 months'`
83
+
-`'1 quarter'`
84
+
-`'1 year'`
85
+
68
86
69
87
## jitterX
70
88
71
-
Jitters along the x dimensio
89
+
Jitters along the x dimension:
72
90
73
91
```svelte
74
92
<Dot
@@ -80,7 +98,7 @@ Jitters along the x dimensio
80
98
81
99
## jitterY
82
100
83
-
Jitters along the y dimension
101
+
Jitters along the y dimension:
84
102
85
103
```svelte
86
104
<Dot
@@ -90,7 +108,8 @@ Jitters along the y dimension
90
108
)} />
91
109
```
92
110
93
-
## Jittering with dates
111
+
112
+
## Temporal jittering
94
113
95
114
Jittering also works for temporal data. When jittering Date objects, random time offsets are added to each date value:
96
115
@@ -154,3 +173,33 @@ Jittering also works for temporal data. When jittering Date objects, random time
154
173
```
155
174
156
175
This example shows how jittering can be applied to date values in the x-axis, which can be useful when multiple events occur at the same date and would otherwise overlap.
176
+
177
+
## Custom random sources
178
+
179
+
For reproducible jittering or specialized random distributions, you can provide a custom random source:
180
+
181
+
```svelte
182
+
<script>
183
+
import { Plot, Dot, jitterX } from 'svelteplot';
184
+
import { randomLcg } from 'd3-random';
185
+
186
+
// Create a deterministic random source with a seed
187
+
const seed = 42;
188
+
const myRandomSource = randomLcg(seed);
189
+
190
+
// This will produce the same jitter pattern every time
191
+
const jitteredProps = jitterX(
192
+
{ data, x: 'value' },
193
+
{ source: myRandomSource }
194
+
);
195
+
</script>
196
+
197
+
<Plot>
198
+
<Dot {...jitteredProps} />
199
+
</Plot>
200
+
```
201
+
202
+
This is particularly useful for:
203
+
- Testing and debugging visualizations
204
+
- Creating reproducible figures for publications
205
+
- Ensuring consistent visual appearance across renders
0 commit comments