{line || ' '}
+ {/each}
+ + Runes are available from Svelte 5 onwards, and this + playground is using Svelte {svelteVersion}. +
+ {:else if workspace.current.name.endsWith('.svelte.js')} +
+ Files with a .svelte.js extension are always in
+ runes mode.
+
+ To use runes in a JavaScript file, change the
+ extension to
+ .svelte.js.
+
+ This component is in + runes mode. +
+To disable runes mode, add the following to the top of your component:
+<svelte:options runes={'{false}'} />This component is not in runes mode.
++ To enable runes mode, either start using runes in your code, or add the + following to the top of your component: +
+<svelte:options runes />
+ Edit a .svelte, .svelte.js or .js file to
+ see information on runes mode
+
+
+ {#if typeof ast === 'object'}
+
+ {
+ if (
+ node === null ||
+ (node.type !== undefined &&
+ node.start !== undefined &&
+ node.end !== undefined)
+ ) {
+ cursor = node && node.start + 1;
+ workspace.highlight_range(node);
+ }
+ }} />
+
+ {:else}
+ No AST available
+ {/if}
+
+
+
+ {part.value.name +
+ '\n' +
+ part.value.stack.replace(/^\n+/, '')}
+ {:else}
+ | (index) | + + {#each table.columns as column} +{column} | + {/each} +
|---|---|
|
+ {#if typeof row.key === 'string'}
+ {row.key}
+ {:else}
+ |
+
+ {#each row.values as value}
+
+ {#if typeof value === 'string'}
+ {value}
+ {:else}
+ |
+ {/each}
+
Loaded {data.length} penguins.
diff --git a/src/content/tutorial/01-basics/01-getting-started/02-first-plot/+assets/app-b/src/lib/App.svelte b/src/content/tutorial/01-basics/01-getting-started/02-first-plot/+assets/app-b/src/lib/App.svelte new file mode 100644 index 000000000..42982149c --- /dev/null +++ b/src/content/tutorial/01-basics/01-getting-started/02-first-plot/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,8 @@ + + +Loaded {data.length} penguins.
+++ Go to / +
+{:else} ++ Server-side rendering failed with HTTP status code + {page.status} +
+{/if} + + diff --git a/src/content/tutorial/01-basics/05-axes-grids/+assets/src/routes/+layout.js b/src/content/tutorial/01-basics/05-axes-grids/+assets/src/routes/+layout.js new file mode 100644 index 000000000..a3d15781a --- /dev/null +++ b/src/content/tutorial/01-basics/05-axes-grids/+assets/src/routes/+layout.js @@ -0,0 +1 @@ +export const ssr = false; diff --git a/src/content/tutorial/01-basics/05-axes-grids/+assets/src/routes/+page.svelte b/src/content/tutorial/01-basics/05-axes-grids/+assets/src/routes/+page.svelte new file mode 100644 index 000000000..3736ee076 --- /dev/null +++ b/src/content/tutorial/01-basics/05-axes-grids/+assets/src/routes/+page.svelte @@ -0,0 +1,5 @@ + + ++ Go to / +
+{:else} ++ Server-side rendering failed with HTTP status code + {page.status} +
+{/if} + + diff --git a/src/content/tutorial/01-basics/06-faceting/+assets/src/routes/+layout.js b/src/content/tutorial/01-basics/06-faceting/+assets/src/routes/+layout.js new file mode 100644 index 000000000..a3d15781a --- /dev/null +++ b/src/content/tutorial/01-basics/06-faceting/+assets/src/routes/+layout.js @@ -0,0 +1 @@ +export const ssr = false; diff --git a/src/content/tutorial/01-basics/06-faceting/+assets/src/routes/+page.svelte b/src/content/tutorial/01-basics/06-faceting/+assets/src/routes/+page.svelte new file mode 100644 index 000000000..3736ee076 --- /dev/null +++ b/src/content/tutorial/01-basics/06-faceting/+assets/src/routes/+page.svelte @@ -0,0 +1,5 @@ + + +{tooltip.fruit}: {tooltip.sales} units
+{/if} diff --git a/src/content/tutorial/02-advanced/01-tooltips/02-pointer-events/index.md b/src/content/tutorial/02-advanced/01-tooltips/02-pointer-events/index.md new file mode 100644 index 000000000..c942a7570 --- /dev/null +++ b/src/content/tutorial/02-advanced/01-tooltips/02-pointer-events/index.md @@ -0,0 +1,33 @@ +--- +title: Pointer events +--- + +Every mark in SveltePlot supports native pointer events. The `onpointerenter` handler receives the browser event and the **datum** — the original data record for the element being pointed at. + +Add a state variable and wire it up to the bar mark: + +```svelte + const data = [...]; + ++ let tooltip = $state(null); +``` + +```svelte +{tooltip.fruit}: {tooltip.sales} units
++{/if} +``` diff --git a/src/content/tutorial/02-advanced/01-tooltips/03-text-labels/+assets/app-b/src/lib/App.svelte b/src/content/tutorial/02-advanced/01-tooltips/03-text-labels/+assets/app-b/src/lib/App.svelte new file mode 100644 index 000000000..727782153 --- /dev/null +++ b/src/content/tutorial/02-advanced/01-tooltips/03-text-labels/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,33 @@ + + +` tag with a `Text` mark.
+
+First, import `Text` and remove the paragraph below the chart:
+
+```svelte
+- import { Plot, BarY, RuleY } from 'svelteplot';
++ import { Plot, BarY, RuleY, Text } from 'svelteplot';
+```
+
+Then add the `Text` mark inside `
{tooltip.fruit}: {tooltip.sales} units
+-{/if} +``` + +While we're at it, dim the unselected bars to draw attention to the hovered one: + +```svelte ++ {tooltip.species}: {tooltip.bill_length_mm} mm × {tooltip.bill_depth_mm} + mm +
+{/if} diff --git a/src/content/tutorial/02-advanced/01-tooltips/04-voronoi/+assets/app-b/src/lib/App.svelte b/src/content/tutorial/02-advanced/01-tooltips/04-voronoi/+assets/app-b/src/lib/App.svelte new file mode 100644 index 000000000..ce068e098 --- /dev/null +++ b/src/content/tutorial/02-advanced/01-tooltips/04-voronoi/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,35 @@ + + ++ {tooltip.species}: {tooltip.bill_length_mm} mm × {tooltip.bill_depth_mm} + mm +
+{/if} diff --git a/src/content/tutorial/02-advanced/01-tooltips/04-voronoi/index.md b/src/content/tutorial/02-advanced/01-tooltips/04-voronoi/index.md new file mode 100644 index 000000000..3fee33475 --- /dev/null +++ b/src/content/tutorial/02-advanced/01-tooltips/04-voronoi/index.md @@ -0,0 +1,36 @@ +--- +title: Voronoi tooltips +--- + +The pointer-events approach works great for bars, but in a scatter plot the `Dot` symbols are often too small to hover over reliably. One solution is to overlay an invisible **Voronoi tessellation** — a set of polygons that partition the plot area so that every pixel belongs to the nearest data point. + +Import the `Voronoi` mark and add it on top of the dots: + +```js +import { Plot, Dot+++, Voronoi+++ } from 'svelteplot'; +``` + +Place the `Voronoi` mark after `{tooltip.species}: {tooltip.bill_length_mm} mm × {tooltip.bill_depth_mm} mm
++{/if} +``` diff --git a/src/content/tutorial/02-advanced/01-tooltips/05-pointer-mark/+assets/app-b/src/lib/App.svelte b/src/content/tutorial/02-advanced/01-tooltips/05-pointer-mark/+assets/app-b/src/lib/App.svelte new file mode 100644 index 000000000..bdf887b0c --- /dev/null +++ b/src/content/tutorial/02-advanced/01-tooltips/05-pointer-mark/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,33 @@ + + ++ {tooltip.species}: {tooltip.bill_length_mm} mm × {tooltip.bill_depth_mm} + mm +
+{/if} diff --git a/src/content/tutorial/02-advanced/01-tooltips/05-pointer-mark/index.md b/src/content/tutorial/02-advanced/01-tooltips/05-pointer-mark/index.md new file mode 100644 index 000000000..62ffaba69 --- /dev/null +++ b/src/content/tutorial/02-advanced/01-tooltips/05-pointer-mark/index.md @@ -0,0 +1,31 @@ +--- +title: Pointer mark +--- + +The `Voronoi` approach requires computing and rendering extra geometry. SveltePlot has a simpler alternative: the `Pointer` mark, which uses a **proximity quadtree** to find the nearest data point to the cursor without adding any visible elements. + +Replace `Voronoi` with `Pointer`. Instead of `onpointerenter`/`onpointerleave`, use the `onupdate` callback — it fires whenever the selection changes and receives the array of currently selected data points: + +```js +import { Plot, Dot, ---Voronoi---+++Pointer+++ } from 'svelteplot'; +``` + +```svelte +-${esc(text)}