docs: add arrow example

svelteplot · gka · Jun 5, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
commit 6e7efd42cc66890331776d981881c920c745c419
diff --git a/src/routes/examples/+layout.ts b/src/routes/examples/+layout.ts
@@ -19,6 +19,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
                     'co2',
                     'crimea',
                     'driving',
+                    'metros',
                     'languages',
                     'penguins',
                     'riaa',

diff --git a/src/routes/examples/arrow/_index.svelte b/src/routes/examples/arrow/_index.svelte
@@ -0,0 +1,5 @@
+<script module>
+    export const title = 'Arrow';
+</script>
+
+<h1>Arrow examples</h1>
diff --git a/src/routes/examples/arrow/metro.svelte b/src/routes/examples/arrow/metro.svelte
@@ -0,0 +1,64 @@
+<script module>
+    export const title = 'Bended arrows';
+</script>
+
+<script lang="ts">
+    import { Plot, Arrow, Text } from '$lib/index.js';
+    import { page } from '$app/state';
+    import { setContext } from 'svelte';
+    import { type PlotDefaults } from 'svelteplot/types';
+    let { metros } = $derived(page.data.data);
+
+    setContext<Partial<PlotDefaults>>(
+        'svelteplot/defaults',
+        {
+            arrow: {
+                headAngle: 45
+            }
+        }
+    );
+
+    let hl = $state(false);
+</script>
+
+<Plot
+    grid
+    marginRight={20}
+    inset={10}
+    height={450}
+    x={{ type: 'log', label: 'P..opulation' }}
+    y={{ label: 'Inequality' }}
+    color={{
+        label: 'Change in inequality from 1980 to 2015',
+        legend: true,
+        tickFormat: '+f'
+    }}>
+    <Arrow
+        data={metros}
+        x1="POP_1980"
+        y1="R90_10_1980"
+        x2="POP_2015"
+        y2="R90_10_2015"
+        bend
+        style="transition: opacity 0.2s ease-in"
+        opacity={{
+            scale: null,
+            value: (d) =>
+                !hl || hl.Metro === d.Metro ? 1 : 0.1
+        }}
+        onmouseenter={(evt, d) => (hl = d)}
+        onmouseleave={() => (hl = null)}
+        stroke={(d) => d.R90_10_2015 - d.R90_10_1980} />
+    <Text
+        data={metros}
+        x="POP_2015"
+        y="R90_10_2015"
+        filter={(d) =>
+            hl ? hl.Metro === d.Metro : d.highlight}
+        text="nyt_display"
+        fill="currentColor"
+        stroke="var(--svelteplot-bg)"
+        strokeWidth={4}
+        lineAnchor="bottom"
+        dy={-6} />
+</Plot>