docs: add exmaples

gka · gka · commit 361043ac81d8 · 2025-06-11T21:55:38.000+02:00
diff --git a/src/routes/examples/+layout.ts b/src/routes/examples/+layout.ts
@@ -30,7 +30,8 @@ export const load: PageServerLoad = async ({ fetch }) => {
                     'simpsons',
                     'stocks',
                     'unemployment',
-                    'sftemp'
+                    'sftemp',
+                    'wind'
                 ],
                 fetch
             ))
diff --git a/src/routes/examples/types.ts b/src/routes/examples/types.ts
@@ -94,6 +94,13 @@ type MetrosRow = {
     highlight: number;
 };
 
+type WindRow = {
+    longitude: number;
+    latitude: number;
+    u: number;
+    v: number;
+};
+
 export type ExamplesData = {
     aapl: AaplRow[];
     simpsons: SimpsonsRow[];
@@ -107,4 +114,5 @@ export type ExamplesData = {
     beagle: BeagleRow[];
     riaa: RiaaRow[];
     metros: MetrosRow[];
+    wind: WindRow[];
 };
diff --git a/src/routes/examples/vector/_index.svelte b/src/routes/examples/vector/_index.svelte
@@ -0,0 +1,5 @@
+<script module>
+    export const title = 'Vector';
+</script>
+
+<h1>Vector examples</h1>
diff --git a/src/routes/examples/vector/wind.svelte b/src/routes/examples/vector/wind.svelte
@@ -0,0 +1,29 @@
+<script module>
+    export const title = 'Wind Vectors';
+</script>
+
+<script lang="ts">
+    import { Plot, Vector } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+
+    let { wind } = $derived(page.data.data) as ExamplesData;
+</script>
+
+<Plot
+    inset={10}
+    aspectRatio={1}
+    color={{
+        label: 'Speed (m/s)',
+        zero: true,
+        legend: true
+    }}>
+    <Vector
+        data={wind}
+        x="longitude"
+        y="latitude"
+        rotate={({ u, v }) =>
+            (Math.atan2(u, v) * 180) / Math.PI}
+        length={({ u, v }) => Math.hypot(u, v)}
+        stroke={({ u, v }) => Math.hypot(u, v)} />
+</Plot>
diff --git a/static/examples/vector/wind.dark.png b/static/examples/vector/wind.dark.png
diff --git a/static/examples/vector/wind.png b/static/examples/vector/wind.png
