docs: add brush examples

svelteplot · gka · Jun 5, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
commit 57bd3ee0a7b0295fb06ce353985e7363fcaff5da
diff --git a/src/routes/examples/bar/defaults.svelte b/src/routes/examples/bar/defaults.svelte
@@ -0,0 +1,22 @@
+<script module>
+    export const title = 'Bar defaults';
+    export const fullCode = true;
+    export const sortKey = 99;
+</script>
+
+<script lang="ts">
+    import { Plot, BarX } from 'svelteplot';
+    import { setContext } from 'svelte';
+
+    setContext('svelteplot/defaults', {
+        bar: {
+            borderRadius: 4,
+            stroke: 'currentColor',
+            fill: null
+        }
+    });
+</script>
+
+<Plot>
+    <BarX data={[1, 2, 3, 4, 5, 6]} />
+</Plot>
diff --git a/src/routes/examples/brush/_index.svelte b/src/routes/examples/brush/_index.svelte
@@ -0,0 +1,5 @@
+<script lang="ts" module>
+    export const title = 'Brush';
+</script>
+
+<h1>Brush examples</h1>
diff --git a/src/routes/examples/brush/constrained.svelte b/src/routes/examples/brush/constrained.svelte
@@ -0,0 +1,43 @@
+<script module>
+    export const title = 'Constrained brush';
+</script>
+
+<script>
+    import { Plot, Dot, Rect, Brush } from 'svelteplot';
+    import { page } from '$app/state';
+
+    const { penguins } = $derived(page.data.data);
+
+    let brush = $state({
+        enabled: true,
+        x1: 42,
+        x2: 55,
+        y1: 16,
+        y2: 20
+    });
+</script>
+
+<Plot grid>
+    <Dot
+        data={penguins}
+        x="culmen_length_mm"
+        y="culmen_depth_mm"
+        opacity={brush.enabled ? 0.3 : 1}
+        stroke={(d) => (brush.enabled ? 'gray' : d.species)}
+        symbol="species" />
+    {#if brush.enabled}
+        <Rect {...brush} opacity={0.1} />
+        <Dot
+            data={penguins}
+            filter={(d) =>
+                d.culmen_length_mm >= brush.x1 &&
+                d.culmen_length_mm <= brush.x2 &&
+                d.culmen_depth_mm >= brush.y1 &&
+                d.culmen_depth_mm <= brush.y2}
+            x="culmen_length_mm"
+            y="culmen_depth_mm"
+            stroke="species"
+            symbol="species" />
+    {/if}
+    <Brush bind:brush constrainToDomain stroke={false} />
+</Plot>
diff --git a/src/routes/examples/brush/filter.svelte b/src/routes/examples/brush/filter.svelte
@@ -0,0 +1,43 @@
+<script module>
+    export const title = 'Brush filter';
+</script>
+
+<script>
+    import { Plot, Dot, Rect, Brush } from 'svelteplot';
+    import { page } from '$app/state';
+
+    const { penguins } = $derived(page.data.data);
+
+    let brush = $state({
+        enabled: true,
+        x1: 42,
+        x2: 55,
+        y1: 16,
+        y2: 20
+    });
+</script>
+
+<Plot grid>
+    <Dot
+        data={penguins}
+        x="culmen_length_mm"
+        y="culmen_depth_mm"
+        opacity={brush.enabled ? 0.3 : 1}
+        stroke={(d) => (brush.enabled ? 'gray' : d.species)}
+        symbol="species" />
+    {#if brush.enabled}
+        <Rect {...brush} opacity={0.1} />
+        <Dot
+            data={penguins}
+            filter={(d) =>
+                d.culmen_length_mm >= brush.x1 &&
+                d.culmen_length_mm <= brush.x2 &&
+                d.culmen_depth_mm >= brush.y1 &&
+                d.culmen_depth_mm <= brush.y2}
+            x="culmen_length_mm"
+            y="culmen_depth_mm"
+            stroke="species"
+            symbol="species" />
+    {/if}
+    <Brush bind:brush stroke={false} />
+</Plot>
diff --git a/src/routes/examples/brush/overview-detail.svelte b/src/routes/examples/brush/overview-detail.svelte
@@ -0,0 +1,73 @@
+<script module lang="ts">
+    export const title = 'Overview and detail';
+    export const fullCode = true;
+</script>
+
+<script lang="ts">
+    import {
+        Plot,
+        Frame,
+        Line,
+        AreaY,
+        RectX,
+        BrushX
+    } from 'svelteplot';
+    import { page } from '$app/state';
+
+    const { aapl } = $derived(page.data.data);
+
+    let brush = $state({
+        enabled: true,
+        x1: new Date(2017, 0, 1),
+        x2: new Date(2018, 0, 1)
+    });
+
+    const filteredData = $derived(
+        brush.enabled
+            ? aapl.filter(
+                  (d) =>
+                      d.Date >= brush.x1 &&
+                      d.Date <= brush.x2
+              )
+            : aapl
+    );
+</script>
+
+<!-- overview plot -->
+<div style="touch-action: none">
+    <Plot
+        height={90}
+        x={{ label: '', grid: true }}
+        y={{ axis: false, label: '' }}>
+        <Frame opacity={0.4} />
+        <Line
+            data={aapl}
+            x="Date"
+            y="Close"
+            opacity={0.3} />
+        {#if brush.enabled}
+            <RectX
+                {...brush}
+                fill="var(--svp-blue)"
+                opacity={0.2} />
+            <Line data={filteredData} x="Date" y="Close" />
+        {/if}
+        <BrushX
+            bind:brush
+            stroke={false}
+            constrainToDomain />
+    </Plot>
+</div>
+<!-- detail plot -->
+<Plot
+    y={{ insetTop: 10, insetBottom: 10 }}
+    grid
+    marginBottom={30}>
+    <AreaY
+        data={filteredData}
+        x="Date"
+        y="Close"
+        fill="var(--svp-blue)"
+        opacity={0.1} />
+    <Line data={filteredData} x="Date" y="Close" />
+</Plot>
diff --git a/src/routes/examples/brush/zoomable-scatter.svelte b/src/routes/examples/brush/zoomable-scatter.svelte
@@ -0,0 +1,80 @@
+<script module lang="ts">
+    export const title = 'Zoomable scatter plot';
+    export const fullCode = true;
+</script>
+
+<script lang="ts">
+    import { Plot, Dot, Brush, Frame } from 'svelteplot';
+    import { Tween } from 'svelte/motion';
+    import { cubicInOut } from 'svelte/easing';
+    import { page } from '$app/state';
+    import { extent } from 'd3-array';
+
+    const { penguins } = $derived(page.data.data);
+
+    let brush = $state({ enabled: false });
+    let isZoomedIn = $state(false);
+
+    const fullDomainX = extent(
+        penguins,
+        (d) => d.culmen_length_mm
+    );
+    const fullDomainY = extent(
+        penguins,
+        (d) => d.culmen_depth_mm
+    );
+
+    let domainX = $state(fullDomainX);
+    let domainY = $state(fullDomainY);
+
+    function resetZoom() {
+        domainX = fullDomainX;
+        domainY = fullDomainY;
+        isZoomedIn = false;
+    }
+
+    const domainXT = Tween.of(() => domainX, {
+        easing: cubicInOut
+    });
+    const domainYT = Tween.of(() => domainY, {
+        easing: cubicInOut
+    });
+</script>
+
+<div style="touch-action: none">
+    <Plot
+        grid
+        x={{
+            domain: domainXT.current,
+            label: 'culmen_length_mm'
+        }}
+        y={{
+            domain: domainYT.current,
+            label: 'culmen_depth_mm'
+        }}>
+        <Dot
+            data={penguins}
+            x="culmen_length_mm"
+            y="culmen_depth_mm"
+            stroke="species"
+            symbol="species" />
+        {#if !isZoomedIn}
+            <Brush
+                bind:brush
+                cursor="zoom-in"
+                onbrushend={(e) => {
+                    if (e.brush.enabled) {
+                        domainX = [e.brush.x1, e.brush.x2];
+                        domainY = [e.brush.y1, e.brush.y2];
+                        brush.enabled = false;
+                        isZoomedIn = true;
+                    }
+                }} />
+        {:else}
+            <Frame
+                fill="transparent"
+                cursor="zoom-out"
+                onpointerup={resetZoom} />
+        {/if}
+    </Plot>
+</div>