docs: kneeling demo plot

svelteplot · gka · Feb 21, 2026 · Feb 21, 2026 · Feb 21, 2026 · Feb 21, 2026
commit 3ccb8a783fd7125c600d69d3530e89c5364a0df5
diff --git a/src/routes/+page.md b/src/routes/+page.md
@@ -41,6 +41,7 @@ examples:
     - geo/us-choropleth
     - image/image-scatter
     - image/image-beeswarm
+    - line/bls
     - line/geo-line
     - line/gradient-line
     - line/indexed-stocks

diff --git a/src/routes/examples/line/bls.svelte b/src/routes/examples/line/bls.svelte
@@ -1,6 +1,5 @@
 <script module>
-    export const title =
-        'Multiple line chart with highlight';
+    export const title = 'Multiple lines';
     export const description =
         'Multiple unemployment lines by metro division with one series highlighted. Derived from an <a href="https://observablehq.com/@observablehq/plot-multiple-line-highlight">Observable Plot example</a>.';
     export const data = { bls: '/data/bls.csv' };

diff --git a/src/routes/examples/line/symlog.svelte b/src/routes/examples/line/symlog.svelte
@@ -0,0 +1,45 @@
+<script module>
+    export const title = 'Symlog kneeling curve';
+    export const description =
+        'Useful for long time spans: this chart shows ~800k years of CO2 concentration while preserving detail around year zero using a symmetric log scale.';
+    export const data = { kneeling: '/data/kneeling.csv' };
+</script>
+
+<script lang="ts">
+    import { Plot, Line } from 'svelteplot';
+    import { Slider, RadioInput } from '$shared/ui';
+    import type { KneelingRow } from '../types';
+
+    let { kneeling }: { kneeling: KneelingRow[] } =
+        $props();
+
+    let type = $state('symlog');
+    let constant = $state(2000);
+</script>
+
+<div class="controls">
+    <Slider
+        label="constant"
+        bind:value={constant}
+        min={100}
+        max={2000} />
+    <RadioInput
+        label="type"
+        options={['symlog', 'linear']}
+        bind:value={type} />
+</div>
+
+<Plot grid height={300} x={{ type, constant }}>
+    <Line data={kneeling} x="year" y="co2" />
+</Plot>
+
+<style>
+    .controls {
+        display: flex;
+        justify-content: space-between;
+        gap: 0.75rem;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        flex-wrap: wrap;
+    }
+</style>
diff --git a/src/routes/examples/types.ts b/src/routes/examples/types.ts
@@ -33,6 +33,11 @@ export type BlsRow = {
     unemployment: number;
 };
 
+export type KneelingRow = {
+    year: number;
+    co2: number;
+};
+
 export type LanguagesRow = {
     Language: string;
     Remarks: string;

diff --git a/src/routes/tests/demos/kneeling/+page.md b/src/routes/tests/demos/kneeling/+page.md
diff --git a/src/routes/tests/demos/kneeling/+page.ts b/src/routes/tests/demos/kneeling/+page.ts
diff --git a/src/snapshots/line/symlog.dark.png b/src/snapshots/line/symlog.dark.png
diff --git a/src/snapshots/line/symlog.png b/src/snapshots/line/symlog.png