docs: more examples + repl links

gka · gka · commit b3181d824409 · 2025-11-16T12:43:24.000+01:00
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -98,7 +98,8 @@
         'tick/tick-x',
         'vector/spike-map',
         'vector/wind',
-        'waffle/custom-symbol'
+        'waffle/custom-symbol',
+        'waffle/stacked-x'
     ].map((d) => ({
         key: d,
         light: resolve(`/examples/${d}.png`),
diff --git a/src/routes/examples/waffle/custom-symbol.svelte b/src/routes/examples/waffle/custom-symbol.svelte
@@ -4,6 +4,8 @@
         'A waffle chart using a custom SVG symbol for each unit, passed via symbol snippet.';
     export let sortKey = 20;
     export let transforms = ['group'];
+    export let repl =
+        'https://svelte.dev/playground/be263ac346794e71a80e6ce86b592eef?version=5';
 </script>
 
 <script>
diff --git a/src/routes/examples/waffle/stacked-x.svelte b/src/routes/examples/waffle/stacked-x.svelte
@@ -0,0 +1,31 @@
+<script module>
+    export let title = 'Stacked WaffleX';
+    export let sortKey = 5;
+    export let transforms = ['group'];
+    export let repl =
+        'https://svelte.dev/playground/bfcc3c72808e4406a795884af8207d12?version=5';
+</script>
+
+<script>
+    import { Plot, WaffleX, groupY } from 'svelteplot';
+
+    import { page } from '$app/state';
+    let { penguins } = $derived(page.data.data);
+</script>
+
+<Plot
+    height={400}
+    x={{ grid: true }}
+    color={{ legend: true }}>
+    <WaffleX
+        gap={2}
+        borderRadius={2}
+        {...groupY(
+            {
+                data: penguins,
+                y: 'island',
+                fill: 'species'
+            },
+            { x: 'count' }
+        )} />
+</Plot>
diff --git a/src/routes/examples/waffle/stacked.svelte b/src/routes/examples/waffle/stacked.svelte
@@ -2,6 +2,8 @@
     export let title = 'Stacked waffle';
     export let sortKey = 5;
     export let transforms = ['group'];
+    export let repl =
+        'https://svelte.dev/playground/4ade8154c5fa4de5ba9981a616680ade?version=5';
 </script>
 
 <script>
diff --git a/src/routes/examples/waffle/waffle-x.svelte b/src/routes/examples/waffle/waffle-x.svelte
@@ -1,6 +1,8 @@
 <script module>
     export let title = 'Horizontal waffle';
     export let sortKey = 2;
+    export let repl =
+        'https://svelte.dev/playground/56ab7b1534714fd3b8b8416048365701?version=5';
 </script>
 
 <script>
diff --git a/src/routes/examples/waffle/waffle-y.svelte b/src/routes/examples/waffle/waffle-y.svelte
@@ -1,6 +1,8 @@
 <script module>
     export let title = 'Vertical waffle';
     export let sortKey = 1;
+    export let repl =
+        'https://svelte.dev/playground/7312ce68199747b8b49814bb4adcefee?version=5';
 </script>
 
 <script>
diff --git a/src/routes/marks/waffle/+page.md b/src/routes/marks/waffle/+page.md
@@ -24,6 +24,8 @@ The Waffle mark renders pictograms or waffle charts, which are grids of squares
 </Plot>
 ```
 
+[fork](https://svelte.dev/playground/7312ce68199747b8b49814bb4adcefee?version=5)
+
 The waffle mark is often used with the group transform to compute counts. The chart below compares the number of female and male athletes in the 2012 Olympics.
 
 ```svelte live
@@ -260,6 +262,8 @@ You can pass the **symbol** snippet to customize the shape of the waffle cells (
 </Plot>
 ```
 
+[fork](https://svelte.dev/playground/be263ac346794e71a80e6ce86b592eef?version=5)
+
 ## Waffle options
 
 The waffle mark accepts the following options in addition to the standard mark options:
diff --git a/static/examples/waffle/stacked-x.dark.png b/static/examples/waffle/stacked-x.dark.png
diff --git a/static/examples/waffle/stacked-x.png b/static/examples/waffle/stacked-x.png
