@fundar/data-chart-telling 0.0.64 → 1.0.0

package/docs/timeline.md

@@ -0,0 +1,94 @@
+# Timeline
+
+`timeline` steps a plot through its data by a field - usually a year or a date. Each step shows the rows of one value of that field. It draws as a **player** by default - a control bar with play, pause and a slider - or as a **rule**, a guide beside the plot that the page drives (`type: 'rule'`).
+
+```svelte
+<BarPlot
+	{width}
+	{height}
+	data={rows}
+	x="region"
+	y="value"
+	scales={{ y: { domain: [0, 100] } }}
+	timeline={{ accessor: 'year' }}
+/>
+```
+
+![A bar plot with a player bar](images/timeline-player.png)
+
+## Options
+
+| Option                             | Meaning                                                                                                                                                                              |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `accessor`                         | Field (or function) giving each row's step - required                                                                                                                                |
+| `type`                             | `'player'` (default) draws a control bar in the chrome; `'rule'` draws a guide with the steps written along it                                                                       |
+| `progress`                         | The position, `0`-`1`. A player keeps its own position from there on, until `progress` changes                                                                                       |
+| `values`                           | The steps, when not every distinct value of `accessor`                                                                                                                               |
+| `filterMode`                       | `'exact'` shows the rows of the current step; `'upTo'` shows every row up to it (a cumulative reveal). `LinePlot` defaults to `'upTo'`                                               |
+| `interpolate`                      | Tween values between steps so a scrub is smooth: `true`, or `{ key, value, create, progressEasing, segmentEasing }`. Line and bar plots default to interpolating their value channel |
+| `scales`                           | `'shared'` (default): axes span every step, so they hold still while scrubbing; `'free'` refits them to each step                                                                    |
+| `onprogress`, `onvalue`            | Called with the new position (`0`-`1`) and with the step it lands on                                                                                                                 |
+| `orientation`, `show`, `thickness` | A rule's direction (`'vertical'` default, beside the plot; `'horizontal'`), visibility and size                                                                                      |
+
+## Player
+
+The player is a bar in the chrome, below the plot by default, placed like any other [chrome block](chrome.md) through `order` (`'timeline'`, or a row such as `'(plot, timeline)'`).
+
+```svelte
+<LinePlot
+	...
+	timeline={{
+		accessor: 'year',
+		player: {
+			controls: ['play', 'value', 'slider', 'speed', 'loop'],
+			autoplay: true,
+			loop: true,
+			speed: 1,
+			speeds: [0.5, 1, 2],
+			stepDuration: 800,
+			format: (year) => `Year ${year}`
+		}
+	}}
+/>
+```
+
+| `player` option               | Meaning                                                                                    |
+| ----------------------------- | ------------------------------------------------------------------------------------------ |
+| `controls`                    | The controls drawn, in this order: `'play'`, `'value'`, `'slider'`, `'speed'`, `'loop'`    |
+| `autoplay`                    | Start playing as soon as there are steps                                                   |
+| `loop`, `speed`               | Where the player starts; it keeps them from there and tells `onloop` / `onspeed` on change |
+| `speeds`                      | Speeds the speed control cycles through                                                    |
+| `stepDuration`                | Milliseconds per step at speed `1`                                                         |
+| `format`                      | How the current step reads in the `'value'` control                                        |
+| `onplay`, `onspeed`, `onloop` | Change callbacks                                                                           |
+
+Defaults for `controls`, `speeds` and `stepDuration` come from `timeline.player` in the [configuration](theming.md), together with the bar's colors and sizes.
+
+## Rule
+
+`type: 'rule'` draws a line with its steps written along it, beside the plot. `progress` picks the step, and the page supplies the control (a slider, a button, scroll position):
+
+```svelte
+<script lang="ts">
+	let progress = $state(0);
+</script>
+
+<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
+<LinePlot ... timeline={{ accessor: 'year', type: 'rule', progress }} />
+```
+
+![A line plot revealed up to the current step, with a timeline rule](images/timeline-rule.png)
+
+A rule's look comes from `timeline.rule` in the [configuration](theming.md) (`fontSize`, `activeFontSize`, `axisWidth`, ...) and `--dct-timeline-*` variables.
+
+## Custom controls
+
+`useFigure().timeline` exposes the timeline's state and actions, to build a widget of your own in place of the player: `steps`, `value`, `index`, `progress`, `playing`, `loop`, `speed`, `speeds`, and `seek`, `seekIndex`, `seekValue`, `next`, `previous`, `play`, `pause`, `toggle`, `setLoop`, `setSpeed`, `cycleSpeed`. See [Reading plot state](state.md).
+
+## One timeline for several plots
+
+A [`PlotComposer`](composer.md) with its own `timeline` drives every panel from one control; plots inside it with a `timeline` follow its `progress`.
+
+## Maps
+
+`GeoPlot` slices both its features (reading a field from each feature's `properties`) and its markers' rows; features or rows without the field are drawn in every step.

package/docs/tooltip-and-hover.md

@@ -0,0 +1,80 @@
+# Tooltip and hover
+
+A plot becomes interactive when it is given a `tooltip`, a `{ type: 'hover' }` marker, or both. Hover is shared by every plot in a figure, so it can drive the other panels of a [facet](facets.md) or [composer](composer.md).
+
+## Tooltip
+
+```svelte
+<LinePlot {width} {height} data={rows} x="year" y="value" color="region" tooltip />
+```
+
+![A tooltip and a hover highlight on the hovered point](images/tooltip.png)
+
+`tooltip` is `true` for the defaults, or an options object:
+
+| Option               | Meaning                                                                                                                                                                                       |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `strategy`           | How related points are found: `'x'`, `'y'`, `'punctual'` (the exact point) or `'series'` (all points of the hovered series). Defaults per plot kind                                           |
+| `sync`               | Show the highlight in every synced plot too (default `false`)                                                                                                                                 |
+| `format`             | `(row) => string` - the tooltip text for the hovered row (`\n` breaks lines)                                                                                                                  |
+| `content`            | A snippet `{#snippet content({ rows })}` replacing the text with custom markup. It is drawn in a plain card, so the markup brings its own background, colors and spacing                      |
+| `series`             | Only these series appear in the tooltip                                                                                                                                                       |
+| `anchorX`, `anchorY` | Preferred side of the cursor: `'left' \| 'middle' \| 'right'` (default `'right'`) and `'top' \| 'middle' \| 'bottom'` (default `'bottom'`). It moves to the other side when it would overflow |
+
+```svelte
+{#snippet content({ rows })}
+	<TooltipCard
+		heading={String(rows[0].year)}
+		footer="Value by region"
+		entries={rows.map((row) => ({
+			label: row.region,
+			color: colorOf(row.region),
+			value: row.value,
+			display: String(row.value)
+		}))}
+	/>
+{/snippet}
+
+<LinePlot
+	{width}
+	{height}
+	data={rows}
+	x="year"
+	y="value"
+	color="region"
+	tooltip={{ strategy: 'x', content }}
+/>
+```
+
+![A tooltip with custom markup](images/tooltip-content.png)
+
+[examples/CustomTooltip.svelte](../examples/CustomTooltip.svelte) is the runnable version, with the card in [examples/TooltipCard.svelte](../examples/TooltipCard.svelte).
+
+The default strategy follows the plot's axes: it matches along the category (or index) axis - points sharing the hovered `x` when the value axis is vertical, sharing `y` when it is horizontal - and `punctual` (the exact point) on heatmaps and scatter plots.
+
+## In-plot hover
+
+`markers={[{ type: 'hover' }]}` draws a dashed rule, a dot and a value label at the hovered point, inside the SVG. Its look comes from `hover` in the [configuration](theming.md) and can be overridden per marker (`rule`, `dot`, `text`, `area`). On band scales `areaX` / `areaY` highlight the whole band instead of a thin rule.
+
+Use both together for the usual result:
+
+```svelte
+<LinePlot ... tooltip markers={[{ type: 'hover' }]} />
+```
+
+## Bars
+
+On a `BarPlot` a hover candidate is the bar's whole band (or its series' slice, when grouped), so the tooltip triggers anywhere along the column.
+
+## Syncing across plots
+
+- In a [facet](facets.md) or a [`PlotComposer`](composer.md), `tooltip.sync: true` (or `hover.sync` on the composer) shows the hovered point's highlight, and the tooltip, in every panel. That replication is the feature: the same x is highlighted across panels.
+- A composer's `hover={{ strategy, sync }}` sets the strategy and sync for all its panels.
+
+## Maps
+
+`GeoPlot` takes `tooltip` too (the row is the hovered feature) and the `{ type: 'geo-hover' }` marker, which restyles the hovered feature. See [Maps](geo.md).
+
+## Reading hover from code
+
+`useFigure().hover` and `usePlot().hover` expose `activeX`, `activeY`, `activeSeries`, `strategy`, `sync`, `source` and, for a plot, `points`, `activePoint` and `tooltip`. See [Reading plot state](state.md).

package/docs/transforms-and-statistics.md

@@ -0,0 +1,88 @@
+# Transforms and statistics
+
+Both derive rows from the data before drawing. A **transform** reshapes the rows themselves (stack, bin, smooth, sort, filter). A **statistic** computes a summary of the data (regression, moving average, density) and draws it as an extra mark.
+
+## Transforms
+
+`transforms` is an array of flat objects: `type` picks the transform and the other fields are its channels and options, named as in [svelteplot's transforms](https://svelteplot.dev). It exists on a plot (it then runs once over all the plot's series) and on each [marker](markers.md) (over the marker's rows).
+
+```svelte
+<!-- stacked bars -->
+<BarPlot
+	{width}
+	{height}
+	data={rows}
+	x="province"
+	y="value"
+	color="sex"
+	transforms={[{ type: 'stackY' }]}
+/>
+
+<!-- a 6-month moving average, run on the plot's rows -->
+<LinePlot
+	{width}
+	{height}
+	data={rows}
+	x="date"
+	y="index"
+	color="division"
+	transforms={[{ type: 'windowY', k: 6, reduce: 'mean' }]}
+/>
+```
+
+![Stacked bars](images/transforms-stack.png)
+
+![Lines smoothed by a moving average](images/transforms-window.png)
+
+| Family    | `type`                                                                                        | Does                                                                                                                                                                                                                             |
+| --------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Stack     | `stackX`, `stackY`, `stackMosaicX`, `stackMosaicY`                                            | Cumulative stacking. Options: `offset` (`'none'`, `'wiggle'`, `'center'`, `'normalize'`, `'diverging'`), `order`, `reverse`                                                                                                      |
+| Bin       | `binX`, `binY`, `bin`                                                                         | Count or reduce rows into bins. Options: `thresholds` (a count, a list, or `'auto'`, `'scott'`, `'sturges'`, `'freedman-diaconis'`), `interval`, `domain`, `cumulative`; reducers by channel (`y: 'count'`, `fill: 'mean'`, ...) |
+| Group     | `groupX`, `groupY`, `groupZ`, `group`                                                         | Reduce rows per category with named reducers (`count`, `sum`, `mean`, `p25`, ...) or functions                                                                                                                                   |
+| Window    | `windowX`, `windowY`                                                                          | Sliding window: `k` (size), `reduce` (`'mean'`, `'median'`, `'sum'`, `'max'`, ...), `anchor`, `strict`                                                                                                                           |
+| Bollinger | `bollingerX`, `bollingerY`                                                                    | Moving average and band: `n`, `k`                                                                                                                                                                                                |
+| Normalize | `normalizeX`, `normalizeY`, `normalizeParallelX`, `normalizeParallelY`                        | Rebase to a reference: `basis` (`'first'`, `'last'`, `'min'`, `'max'`, `'mean'`, `'median'`, `'sum'`, `'deviation'`)                                                                                                             |
+| Map       | `mapX`, `mapY`                                                                                | `map`: `'cumsum'`, `'rank'`, `'quantile'` or a function                                                                                                                                                                          |
+| Interval  | `intervalX`, `intervalY`                                                                      | Turn a value into an `[x1, x2]` interval of a given size                                                                                                                                                                         |
+| Jitter    | `jitterX`, `jitterY`                                                                          | Random offset: `width`, `std`, `distribution` (`'uniform'`, `'normal'`), `seed`                                                                                                                                                  |
+| Shift     | `shiftX`, `shiftY`                                                                            | Move by `by` (a number, or a string offset)                                                                                                                                                                                      |
+| Density   | `densityX`, `densityY`                                                                        | Kernel density estimate: `kernel`, `bandwidth`                                                                                                                                                                                   |
+| Sort      | `sort`, `shuffle`, `reverse`                                                                  | Reorder rows (matters for the path a line takes and which dot lands on top)                                                                                                                                                      |
+| Filter    | `filter`                                                                                      | Keep rows a test holds for                                                                                                                                                                                                       |
+| Select    | `select`, `selectFirst`, `selectLast`, `selectMinX`, `selectMaxX`, `selectMinY`, `selectMaxY` | Keep one row per group, such as each series' last point or peak                                                                                                                                                                  |
+
+Bar stacking is always `stackY`, also for horizontal bars. A transform on a `HistogramPlot` is merged over the plot's default binning, so `{ type: 'binX', thresholds: 20 }` changes the bins and the rest stays.
+
+## Statistics
+
+`statistics` is an array of derived summaries drawn as extra marks. On a plot it computes one per series by default; on a marker it applies to that marker's own rows.
+
+```svelte
+<ScatterPlot
+	{width}
+	{height}
+	data={rows}
+	x="gdp"
+	y="life"
+	statistics={[{ type: 'regression', regressionType: 'linear', confidence: 0.95 }]}
+/>
+```
+
+![A scatter plot with a regression line and confidence band](images/statistics-regression.png)
+
+| `type`          | Draws                                                | Options                                                                                                                                                           |
+| --------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `regression`    | A fitted curve with a confidence band                | `regressionType` (`'linear'`, `'quad'`, `'poly'`, `'exp'`, `'log'`, `'pow'`, `'loess'`), `order`, `base`, `span`, `confidence` (`false` omits the band), `styles` |
+| `movingAverage` | A smoothed line                                      | `k` (required), `reduce`, `styles`                                                                                                                                |
+| `bollinger`     | Moving average and a band of `k` standard deviations | `n`, `k`, `styles`                                                                                                                                                |
+| `density`       | A 1D density curve over `x`                          | `kernel`, `bandwidth`, `styles`                                                                                                                                   |
+| `density2d`     | 2D density contour bands                             | `bandwidth`, `thresholds`, `styles`                                                                                                                               |
+| `box`           | A box plot per category                              | the options of the [`box` marker](markers.md)                                                                                                                     |
+
+Which series a statistic runs over:
+
+- omitted: one statistic per series;
+- `series: ['a', 'b']`: only the named series;
+- `pooled: true`: one statistic over all series combined.
+
+The same summaries are available as markers (`regression`, `bollinger`, `density`, `box`, ...) when more control over the mark is needed.

package/examples/BarValues.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+</script>
+
+<!-- Categories on x, values on y. Swap `x` and `y` for horizontal bars. -->
+<BarPlot
+	width={720}
+	height={400}
+	data={ROWS.filter((d) => d.year === 2023)}
+	x="region"
+	y="value"
+	styles={{ values: { show: true, anchor: 'outside' } }}
+/>

package/examples/CustomTooltip.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { LinePlot, getConfiguration, paletteColor } from '@fundar/data-chart-telling';
+	import TooltipCard from './TooltipCard.svelte';
+	import { ROWS, type Row } from './data';
+
+	const { palette } = getConfiguration();
+	const regions = [...new Set(ROWS.map((d) => d.region))];
+</script>
+
+<!--
+	`content` replaces the tooltip text with your own markup, drawn in a plain
+	card: TooltipCard brings its own background, colors and spacing. It is given
+	every row the hover matched; series colors come from the configuration's palette.
+-->
+{#snippet content({ rows }: { rows: Row[] })}
+	<TooltipCard
+		heading={String(rows[0].year)}
+		footer="Value by region"
+		entries={rows.map((row) => ({
+			label: row.region,
+			color: paletteColor(regions.indexOf(row.region), palette),
+			value: row.value,
+			display: String(row.value)
+		}))}
+	/>
+{/snippet}
+
+<LinePlot
+	width={720}
+	height={400}
+	data={ROWS}
+	x="year"
+	y="value"
+	color="region"
+	tooltip={{ strategy: 'x', content }}
+	markers={[{ type: 'hover' }]}
+/>

package/examples/Facets.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+</script>
+
+<!-- One panel per region, three columns, sharing scales. A tooltip with `sync` shows in every panel on purpose. -->
+<LinePlot
+	width={900}
+	height={360}
+	data={ROWS}
+	x="year"
+	y="value"
+	facet={{ by: 'region', columns: 3, gap: 12, scales: 'shared' }}
+	tooltip={{ sync: true }}
+/>

package/examples/LegendReader.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { useFigure } from '@fundar/data-chart-telling';
+
+	// Call during component init, below a plot or a PlotComposer.
+	const { legend } = useFigure();
+</script>
+
+<p>Hidden series: {legend?.off.join(', ') || 'none'}</p>

package/examples/LegendToggle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+	import LegendReader from './LegendReader.svelte';
+</script>
+
+<!--
+	The automatic legend can toggle series. `mode: 'omit'` drops a hidden series
+	and refits the axes to what is left; 'dim' and 'hide' keep the axes.
+	Anything inside the figure (here, the footer) reads the toggles through
+	`useFigure().legend` - see LegendReader.
+-->
+<LinePlot
+	width={720}
+	height={400}
+	data={ROWS}
+	x="year"
+	y="value"
+	color="region"
+	legend={{ series: { interactive: { enabled: true, disabled: { mode: 'omit' } } } }}
+>
+	{#snippet footer()}
+		<LegendReader />
+	{/snippet}
+</LinePlot>

package/examples/ResponsiveLine.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+
+	// A plot draws at the pixel size it is given. To fill a container (or the
+	// window), bind its size and pass it down.
+	let width = $state(0);
+	let height = $state(0);
+</script>
+
+<div class="fill" bind:clientWidth={width} bind:clientHeight={height}>
+	{#if width > 0 && height > 0}
+		<LinePlot
+			{width}
+			{height}
+			title="Value by region"
+			subtitle="Index, 2016-2023"
+			data={ROWS}
+			x="year"
+			y="value"
+			color="region"
+			scales={{
+				x: { label: 'Year', tickFormat: (d) => String(d) },
+				y: { label: 'Index' }
+			}}
+			styles={{ values: { show: true, format: (v, name) => `${name}: ${v}` } }}
+			margins={{ right: 'auto' }}
+		/>
+	{/if}
+</div>
+
+<style>
+	.fill {
+		width: 100%;
+		height: 100vh;
+	}
+</style>

package/examples/Segments.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import type { LineSegmentStyle, SegmentsConfig } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+
+	// `segments` maps a series name (or 'default' for all series) to its rules.
+	const segments = {
+		default: [
+			{
+				areas: [{ x: { from: 2020, to: 2023 } }],
+				styles: { stroke: { strokeDasharray: '6 4', strokeOpacity: 0.7 } }
+			}
+		]
+	} satisfies SegmentsConfig<LineSegmentStyle>;
+</script>
+
+<LinePlot width={720} height={400} data={ROWS} x="year" y="value" color="region" {segments} />

package/examples/TimelinePlayer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+</script>
+
+<!--
+	`timeline` slices the rows by `accessor`. A timeline is a player by default:
+	play/pause, the current step and a slider in the chrome. `type: 'rule'`
+	draws a guide beside the plot with no controls instead. To build your own
+	widget, read `useFigure().timeline` (seek, play, pause, next, ...).
+-->
+<BarPlot
+	width={720}
+	height={400}
+	data={ROWS}
+	x="region"
+	y="value"
+	scales={{ y: { domain: [0, 200] } }}
+	timeline={{ accessor: 'year', player: { autoplay: false, loop: true } }}
+/>

package/examples/Tooltip.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+</script>
+
+<!--
+	`tooltip` turns the floating box on (`true` for the defaults, or an object
+	to tune it); a `hover` marker draws the in-plot crosshair, dot and label.
+-->
+<LinePlot
+	width={720}
+	height={400}
+	data={ROWS}
+	x="year"
+	y="value"
+	color="region"
+	tooltip={{ strategy: 'x', format: (row) => `${row.region}: ${row.value}` }}
+	markers={[{ type: 'hover' }]}
+/>

package/examples/TooltipCard.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	type Entry = { label: string; color: string; value: number; display: string };
+
+	let { heading, entries, footer }: { heading: string; entries: Entry[]; footer: string } =
+		$props();
+</script>
+
+<div class="rich-tooltip">
+	<div class="rich-tooltip__header">{heading}</div>
+	<div class="rich-tooltip__body">
+		{#each entries as entry (entry.label)}
+			<div class="rich-tooltip__row">
+				<span class="rich-tooltip__label">
+					<span class="rich-tooltip__swatch" style:background={entry.color}></span>
+					{entry.label}
+				</span>
+				<span class="rich-tooltip__value">{entry.display}</span>
+			</div>
+		{/each}
+	</div>
+	<div class="rich-tooltip__footer">{footer}</div>
+</div>
+
+<style>
+	.rich-tooltip {
+		min-width: 200px;
+		background: #fff;
+		color: #1f2937;
+		border-radius: 0.75rem;
+		overflow: hidden;
+		font-family: ui-sans-serif, system-ui, sans-serif;
+	}
+
+	.rich-tooltip__header {
+		padding: 0.6rem 0.9rem;
+		font-weight: 700;
+		font-size: 1rem;
+		text-transform: capitalize;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+	}
+
+	.rich-tooltip__body {
+		padding: 0.2rem 0.9rem;
+	}
+
+	.rich-tooltip__row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1.5rem;
+		padding: 0.35rem 0;
+		font-size: 0.85rem;
+		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+	}
+
+	.rich-tooltip__row:last-child {
+		border-bottom: none;
+	}
+
+	.rich-tooltip__label {
+		display: flex;
+		align-items: center;
+		gap: 0.45rem;
+	}
+
+	.rich-tooltip__swatch {
+		width: 0.65rem;
+		height: 0.65rem;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	.rich-tooltip__value {
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.rich-tooltip__footer {
+		padding: 0.45rem 0.9rem;
+		font-size: 0.7rem;
+		font-style: italic;
+		color: rgba(0, 0, 0, 0.5);
+		border-top: 1px solid rgba(0, 0, 0, 0.08);
+		background: rgba(0, 0, 0, 0.02);
+	}
+</style>

package/examples/data.ts

@@ -0,0 +1,12 @@
+export type Row = { year: number; region: string; value: number };
+
+const REGIONS = ['North', 'Center', 'South'];
+
+/** Tiny deterministic dataset shared by the examples: one value per region and year. */
+export const ROWS: Row[] = REGIONS.flatMap((region, r) =>
+	Array.from({ length: 8 }, (_, i) => ({
+		year: 2016 + i,
+		region,
+		value: 100 + (r + 1) * 4 * i + (i % 3) * 2
+	}))
+);