svelteplot
diff --git a/‎src/routes/examples/rule/_index.svelte
Lines changed: 10 additions & 0 deletions b/‎src/routes/examples/rule/_index.svelte
Lines changed: 10 additions & 0 deletions
diff --git a/‎src/routes/examples/rule/data-rules.svelte
Lines changed: 34 additions & 0 deletions b/‎src/routes/examples/rule/data-rules.svelte
Lines changed: 34 additions & 0 deletions
diff --git a/‎src/routes/examples/rule/min-max.svelte
Lines changed: 39 additions & 0 deletions b/‎src/routes/examples/rule/min-max.svelte
Lines changed: 39 additions & 0 deletions
diff --git a/‎src/routes/examples/rule/y-baseline.svelte
Lines changed: 17 additions & 0 deletions b/‎src/routes/examples/rule/y-baseline.svelte
Lines changed: 17 additions & 0 deletions
diff --git a/‎static/examples/rule/data-rules.dark.png
24.2 KB b/‎static/examples/rule/data-rules.dark.png
24.2 KB
diff --git a/‎static/examples/rule/data-rules.png
24.1 KB b/‎static/examples/rule/data-rules.png
24.1 KB
diff --git a/‎static/examples/rule/min-max.dark.png
34.1 KB b/‎static/examples/rule/min-max.dark.png
34.1 KB
diff --git a/‎static/examples/rule/min-max.png
33.7 KB b/‎static/examples/rule/min-max.png
33.7 KB
diff --git a/‎static/examples/rule/y-baseline.dark.png
36 KB b/‎static/examples/rule/y-baseline.dark.png
36 KB
diff --git a/‎static/examples/rule/y-baseline.png
34.8 KB b/‎static/examples/rule/y-baseline.png
34.8 KB
@@ -0,0 +1,10 @@
+<script module>
+    export const title = 'Rule';
+</script>
+
+<h1>Rule examples</h1>
+
+<p>
+    Here are examples related to the <a href="/marks/rule"
+        >rule</a> mark.
+</p>
@@ -0,0 +1,34 @@
+<script module>
+    export const title = 'Data rules';
+    export const description =
+        'Note that you probably want to use TickY instead of a faceted RuleY.';
+</script>
+
+<script lang="ts">
+    import { Plot, RuleY } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    let { aapl } = $derived(page.data.data) as ExamplesData;
+
+    const monthNames = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec'
+    ];
+</script>
+
+<Plot inset={10}>
+    <RuleY
+        data={aapl.slice(0, 150)}
+        y="Close"
+        fx={(d) => monthNames[d.Date.getMonth()]} />
+</Plot>
@@ -0,0 +1,39 @@
+<script module>
+    export const title = 'Min/max rules';
+</script>
+
+<script lang="ts">
+    import { Plot, Line, RuleY, binX } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    import { max, min } from 'd3-array';
+    let { aapl } = $derived(page.data.data) as ExamplesData;
+</script>
+
+<Plot>
+    <Line
+        data={aapl}
+        x="Date"
+        y="Close"
+        strokeOpacity={0.5} />
+    <RuleY
+        stroke="var(--svp-blue)"
+        {...binX(
+            {
+                data: aapl,
+                x: 'Date',
+                y: 'Close'
+            },
+            { y: 'max', interval: 'year' }
+        )} />
+    <RuleY
+        stroke="var(--svp-red)"
+        {...binX(
+            {
+                data: aapl,
+                x: 'Date',
+                y: 'Close'
+            },
+            { y: 'min', interval: 'year' }
+        )} />
+</Plot>
@@ -0,0 +1,17 @@
+<script module>
+    export const title = 'Y Baseline';
+    export const description =
+        'A simple horizontal rule at y=0.';
+</script>
+
+<script lang="ts">
+    import { Plot, Line, RuleY } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    let { aapl } = $derived(page.data.data) as ExamplesData;
+</script>
+
+<Plot>
+    <RuleY y={0} />
+    <Line data={aapl} x="Date" y="Close" />
+</Plot>