docs: improve marker docs

gka · gka · commit ba2411c377de · 2025-05-08T20:21:24.000+02:00
diff --git a/src/routes/features/markers/+page.md b/src/routes/features/markers/+page.md
@@ -2,7 +2,7 @@
 title: Markers
 ---
 
-Markers can be used with the [line](/marks/line) and [link](/marks/link) marks.
+Markers can be used with the [line](/marks/line) and [link](/marks/link) marks.  Markers are automatically scaled with the line width:
 
 ```svelte live
 <script>
@@ -11,6 +11,7 @@ Markers can be used with the [line](/marks/line) and [link](/marks/link) marks.
     import Slider from '$lib/ui/Slider.svelte';
 
     let marker = $state('circle-stroke');
+    let strokeWidth = $state(1.5);
 
     const options = [
         'dot',
@@ -30,13 +31,16 @@ Markers can be used with the [line](/marks/line) and [link](/marks/link) marks.
 <Select
     label="Marker:"
     bind:value={marker}
-    {options} /><br />
+    {options} />
+<Slider label="Stroke width" bind:value={strokeWidth} min={1} max={5} step={0.1} />
+<br />
 <Plot inset={10} grid>
     <Line
         data={crimea}
         x="date"
         y="deaths"
         stroke="cause"
+        {strokeWidth}
         {marker} />
 </Plot>
 ```
@@ -48,10 +52,13 @@ Markers can be used with the [line](/marks/line) and [link](/marks/link) marks.
         x="date"
         y="deaths"
         stroke="cause"
+        strokeWidth={1.5}
         marker="dot" />
 </Plot>
 ```
 
+## Marker options
+
 The supported marker options are:
 
 - **markerStart** - the marker for the starting point of a line segment
@@ -76,7 +83,7 @@ Note that for the interpolation methods `basis`, `bundle`, and `step`, the marke
 
 ```svelte live
 <script lang="ts">
-    import { Plot, LineY, Dot } from '$lib/index.js';
+    import { Plot, LineY, Dot } from 'svelteplot';
     import Slider from '$lib/ui/Slider.svelte';
     import Select from '$lib/ui/Select.svelte';
     import type { CurveName } from '$lib/types.js';
@@ -115,6 +122,7 @@ Note that for the interpolation methods `basis`, `bundle`, and `step`, the marke
     <DotY data={numbers} symbol="plus" />
 </Plot>
 ```
+[fork](https://svelte.dev/playground/0be2cc3070c844e692a3300d87212f58?version=5.28.2)
 
 ## Custom markers
 
@@ -165,6 +173,7 @@ You can also specify a custom marker icon using the `marker` snippet:
     </Line>
 </Plot>
 ```
+[fork](https://svelte.dev/playground/2e63a26ff02646db90f2e33849668033?version=5.28.2)
 
 And since the marker snippets contain regular Svelte code, you can do whatever you want with the markers, like animate them, for instance:
 
@@ -228,3 +237,4 @@ And since the marker snippets contain regular Svelte code, you can do whatever y
 {/snippet}
 <!-- </Line></Plot> -->
 ```
+[fork](https://svelte.dev/playground/f02d094c5761416ca1c2f14e1f6d168d?version=5.28.2)
