@fundar/data-chart-telling 1.1.0 → 1.3.0

package/docs/timeline.md

@@ -7,7 +7,7 @@
 ```svelte
 <script lang="ts">
 	import { BarPlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!--
@@ -43,7 +43,7 @@
 | `values`                           | The steps, when not every distinct value of `accessor` - read like `accessor`'s values                                                                                                                                                                                          |
 | `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                                                                                                                                                               |
+| `scales`                           | `'shared'` (default): axes span every step, so they hold still while scrubbing; `'free'` refits both to each step; `'free-x'` / `'free-y'` refit one and keep the other still                                                                                                   |
 | `onprogress`, `onvalue`            | Called with the new position (`0`-`1`) and with the step it lands on - a `Date` on a timeline of dates, else the number                                                                                                                                                         |
 | `orientation`, `show`, `thickness` | A rule's direction (`'vertical'` default, beside the plot; `'horizontal'`), visibility and size                                                                                                                                                                                 |
 
@@ -90,7 +90,7 @@ Defaults for `controls`, `speeds` and `stepDuration` come from `timeline.player`
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 
 	// A rule has no controls of its own: the page moves it through `progress` (0 to 1).
 	// One step per year; a line plot shows every row up to the current step.

package/docs/tooltip-and-hover.md

@@ -9,7 +9,7 @@ A plot becomes interactive when it is given a `tooltip`, a `{ type: 'hover' }` m
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!--
@@ -34,14 +34,14 @@ A plot becomes interactive when it is given a `tooltip`, a `{ type: 'hover' }` m
 
 `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). With several rows, they read from the highest value to the lowest (a stacked row by its own value)                                                       |
-| `content`            | A snippet `{#snippet content({ rows })}` replacing the text with custom markup. It gets the rows as the hover matched them, unsorted, and is drawn in a plain card, so the markup brings its own order, 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                                          |
+| 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). With several rows, they read from the highest value to the lowest (a stacked row by its own value)                                                                                                                                                                                   |
+| `content`            | A snippet `{#snippet content({ rows })}` replacing the text with custom markup. It gets the rows as the hover matched them, unsorted, each one your row plus a `seriesColor`: the one the plot draws it in (the series color, from `scales.color` or the palette). It is drawn in a plain card, so the markup brings its own order, 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                                                                                                                                                                      |
 
 <!-- example: examples/CustomTooltip.svelte -->
 
@@ -49,7 +49,7 @@ A plot becomes interactive when it is given a `tooltip`, a `{ type: 'hover' }` m
 <script lang="ts">
 	import { LinePlot, getConfiguration, paletteColor } from '@fundar/data-chart-telling';
 	import TooltipCard from './TooltipCard.svelte';
-	import { REGION_VALUES, type RegionRow } from './data';
+	import { REGION_VALUES, type RegionRow } from './datasets';
 
 	const { palette } = getConfiguration();
 	const regions = [...new Set(REGION_VALUES.map((row) => row.region))];

package/docs/transforms-and-statistics.md

@@ -11,7 +11,7 @@ Both derive rows from the data before drawing. A **transform** reshapes the rows
 ```svelte
 <script lang="ts">
 	import { BarPlot } from '@fundar/data-chart-telling';
-	import { SEX_SHARES } from './data';
+	import { SEX_SHARES } from './datasets';
 </script>
 
 <!-- Each sex's share of the population per census, stacked with `stackY` so a bar adds up to 100%. -->
@@ -35,7 +35,7 @@ Both derive rows from the data before drawing. A **transform** reshapes the rows
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- A 6-month moving average, run on the plot's rows. -->
@@ -82,14 +82,14 @@ Bar stacking is always `stackY`, also for horizontal bars. A transform on a `His
 ```svelte
 <script lang="ts">
 	import { ScatterPlot } from '@fundar/data-chart-telling';
-	import { COUNTRIES } from './data';
+	import { COUNTRIES_AT_2007 } from './datasets';
 </script>
 
 <!-- A linear regression with its 95% confidence band. -->
 <ScatterPlot
 	width={720}
 	height={400}
-	data={COUNTRIES}
+	data={COUNTRIES_AT_2007}
 	x="gdp"
 	y="life"
 	statistics={[{ type: 'regression', regressionType: 'linear', confidence: 0.95 }]}
@@ -100,14 +100,15 @@ Bar stacking is always `stackY`, also for horizontal bars. A transform on a `His
 
 ![A scatter plot with a regression line and confidence band](images/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)                                                                                                                     |
+| `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)                                                                                                                                                                                                                                                                                                |
+| `deviation`     | A rule at an estimator and a band around it, along the plot's value axis | `estimator` (`'mean'`, `'median'`, `'midrange'`), `spread` (`'stdev'`, `'mad'`), `k` (band half-width in spreads, default 1), `rule` and `band` (styles, or `false` to omit), each with a `label` (`true`, or `{ text, styles }` with a `FontStyle`; the band's also `edge` (`'lower'`, `'upper'`) and `position` (`'inside'`, `'outside'`)) |
 
 Which series a statistic runs over:
 

package/examples/BarValues.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BarPlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES, MONTHS } from './data';
+	import { REGION_VALUES, MONTHS } from './datasets';
 </script>
 
 <!-- Categories on x, values on y. Swap `x` and `y` for horizontal bars. -->

package/examples/Box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BoxPlot } from '@fundar/data-chart-telling';
-	import { HEIGHTS } from './data';
+	import { HEIGHTS } from './datasets';
 </script>
 
 <!-- One box per group: quartiles, median, whiskers and outliers of each height distribution. -->

package/examples/Bullet.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { BulletPlot } from '@fundar/data-chart-telling';
+	import { PROVINCE_LIFE } from './datasets';
+</script>
+
+<!-- Female life expectancy at birth by province: the bar, against a target of 80 years, over bands for under 76, 76 to 80 and over 80. -->
+<BulletPlot
+	width={720}
+	height={400}
+	data={PROVINCE_LIFE}
+	x="female"
+	y="province"
+	target={80}
+	ranges={[76, 80, 85]}
+	scales={{ x: { domain: [70, 85] } }}
+	styles={{ values: { show: true } }}
+/>

package/examples/Chrome.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- A plot carries its own chrome: title, subtitle, legend and caption. -->

package/examples/ChromeOrder.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- `order` places the chrome blocks; `divider` draws a rule between them. -->

package/examples/Cleveland.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ClevelandPlot } from '@fundar/data-chart-telling';
+	import { AGE_SHARES } from './datasets';
+</script>
+
+<!-- One dot per census year in each age group, joined from the lowest share to the highest. The years follow one another, so they take a sequential blues ramp. -->
+<ClevelandPlot
+	width={720}
+	height={400}
+	data={AGE_SHARES}
+	x="share"
+	y="ageGroup"
+	grouping="year"
+	scales={{ color: { scheme: 'blues', schemeRange: [0.3, 1] } }}
+/>

package/examples/Composer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { PlotComposer, LinePlot, BarPlot, ScatterPlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES, PROVINCE_VALUES, COUNTRIES } from './data';
+	import { REGION_VALUES, PROVINCE_VALUES, COUNTRIES_AT_2007 } from './datasets';
 </script>
 
 <!-- Several plots in one figure, placed on named areas of a grid. -->
@@ -19,5 +19,5 @@
 		x="province"
 		y="value"
 	/>
-	<ScatterPlot area="c" data={COUNTRIES} x="gdp" y="life" />
+	<ScatterPlot area="c" data={COUNTRIES_AT_2007} x="gdp" y="life" />
 </PlotComposer>

package/examples/CustomTooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { LinePlot, getConfiguration, paletteColor } from '@fundar/data-chart-telling';
 	import TooltipCard from './TooltipCard.svelte';
-	import { REGION_VALUES, type RegionRow } from './data';
+	import { REGION_VALUES, type RegionRow } from './datasets';
 
 	const { palette } = getConfiguration();
 	const regions = [...new Set(REGION_VALUES.map((row) => row.region))];

package/examples/Density.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DensityPlot } from '@fundar/data-chart-telling';
+	import { HEIGHTS } from './datasets';
+</script>
+
+<!-- A smoothed distribution per `grouping` value, the continuous pair of a histogram. -->
+<DensityPlot width={720} height={400} data={HEIGHTS} x="height" grouping="group" />

package/examples/Dumbbell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DumbbellPlot } from '@fundar/data-chart-telling';
+	import { PROVINCE_VALUES } from './datasets';
+</script>
+
+<!-- Two dots per province, one per sex, joined by a connector: the gap in life expectancy at birth. -->
+<DumbbellPlot
+	width={720}
+	height={400}
+	data={PROVINCE_VALUES}
+	x="value"
+	y="province"
+	color="sex"
+	scales={{ x: { domain: [70, 85] } }}
+	styles={{ values: { show: true } }}
+/>

package/examples/Facets.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!-- One panel per region, three columns, sharing scales. A tooltip with `sync` shows in every panel on purpose. -->

package/examples/FacetsCarousel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!-- A carousel shows `visible` panels at a time, with navigation below. -->

package/examples/FacetsRowsCols.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 
 	// Each region's value split into two sectors.
 	const SECTORS = [

package/examples/FacetsScoped.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './datasets';
+
+	// Each region's value split into two sectors.
+	const SECTORS = [
+		{ sector: 'Goods', share: 0.8 },
+		{ sector: 'Services', share: 1.4 }
+	];
+	const rows = REGION_VALUES.flatMap((row) =>
+		SECTORS.map(({ sector, share }) => ({ ...row, sector, value: row.value * share }))
+	);
+</script>
+
+<!-- One panel per region. `facet` on a marker or a segment limits it to the panels it names: the rule is drawn in GBA only, and Services is dashed in Cuyo only. -->
+<LinePlot
+	width={900}
+	height={360}
+	data={rows}
+	x="date"
+	y="value"
+	color="sector"
+	facet={{ by: 'region', columns: 3 }}
+	markers={[{ type: 'rule', axis: 'y', value: 10, facet: 'GBA' }]}
+	segments={{ Services: [{ facet: 'Cuyo', styles: { stroke: { strokeDasharray: '4 4' } } }] }}
+/>

package/examples/FirstPlot.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!-- The smallest useful plot: rows, the fields to map and a pixel size. -->

package/examples/Forest.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ForestPlot } from '@fundar/data-chart-telling';
+	import { INFLATION_RANGES } from './datasets';
+</script>
+
+<!-- One row per region and year: the mean monthly inflation as a dot, on a stem from its lowest to its highest month. -->
+<ForestPlot
+	width={720}
+	height={480}
+	data={INFLATION_RANGES}
+	x="mean"
+	y="period"
+	lower="min"
+	upper="max"
+	color="region"
+	scales={{ x: { label: 'Monthly inflation (%)' } }}
+/>

package/examples/Gaps.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { LIFE_GAPS } from './data';
+	import { FEMALE_LIFE_GAPS } from './datasets';
 </script>
 
 <!-- Missing values bridged: dashed in the middle, faded at the start, extended to the 2025 projection at the end. -->
 <LinePlot
 	width={720}
 	height={400}
-	series={[{ name: 'female', x: 'year', y: 'value', data: LIFE_GAPS }]}
+	series={[{ name: 'female', x: 'year', y: 'value', data: FEMALE_LIFE_GAPS }]}
 	scales={{ x: { edgeTicks: true }, y: { domain: [55, 85] } }}
 	styles={{
 		gaps: {

package/examples/GroupedBars.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BarPlot } from '@fundar/data-chart-telling';
-	import { PROVINCE_VALUES } from './data';
+	import { PROVINCE_VALUES } from './datasets';
 </script>
 
 <!-- Vertical bars, grouped by `color`. -->

package/examples/Heatmap.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { HeatmapPlot } from '@fundar/data-chart-telling';
-	import { HOUSEHOLDS } from './data';
+	import { PENGUIN_COUNTS } from './datasets';
 </script>
 
-<!-- One cell per number of rooms and of people, colored by the share of households. -->
-<HeatmapPlot width={560} height={360} data={HOUSEHOLDS} x="rooms" y="people" color="share" />
+<!-- One cell per island and species, colored by the number of penguins. -->
+<HeatmapPlot width={560} height={360} data={PENGUIN_COUNTS} x="island" y="species" color="count" />

package/examples/HeatmapSegments.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
 	import { HeatmapPlot } from '@fundar/data-chart-telling';
-	import { HOUSEHOLDS } from './data';
+	import { PENGUIN_COUNTS } from './datasets';
 </script>
 
-<!-- Segments on a heatmap: an outlined column and a filled block of overcrowded households. -->
+<!-- Segments on a heatmap: an outlined column and a filled block of cells. -->
 <HeatmapPlot
 	width={560}
 	height={360}
-	data={HOUSEHOLDS}
-	x="rooms"
-	y="people"
-	color="share"
+	data={PENGUIN_COUNTS}
+	x="island"
+	y="species"
+	color="count"
 	segments={{
 		default: [
 			{
-				areas: [{ x: { from: '1', to: '1' } }],
+				areas: [{ x: { from: 'Biscoe', to: 'Biscoe' } }],
 				styles: { stroke: '#f59e0b', strokeWidth: 2 }
 			},
 			{
-				areas: [{ x: { from: '1', to: '2' }, y: { from: '4', to: '5+' } }],
+				areas: [{ x: { from: 'Dream', to: 'Torgersen' }, y: { from: 'Chinstrap', to: 'Gentoo' } }],
 				styles: { fill: '#ef4444', fillOpacity: 0.8 }
 			}
 		]

package/examples/Histogram.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { HistogramPlot } from '@fundar/data-chart-telling';
-	import { HEIGHTS } from './data';
+	import { HEIGHTS } from './datasets';
 </script>
 
 <!-- Two overlapping distributions, one per `grouping` value. -->

package/examples/HorizontalBars.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BarPlot } from '@fundar/data-chart-telling';
-	import { PROVINCE_VALUES } from './data';
+	import { PROVINCE_VALUES } from './datasets';
 </script>
 
 <!-- Horizontal bars: the categories go on `y`, the values on `x`. -->

package/examples/LegendSections.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!-- An explicit legend: a discrete section of toggles and a continuous ramp. -->

package/examples/LegendToggle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 	import LegendReader from './LegendReader.svelte';
 </script>
 

package/examples/LineByRegion.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 </script>
 
 <!-- One line per region, with a title, the automatic legend, end-of-line values and a tooltip. -->

package/examples/LineDates.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- A line per commodity over a date axis, with end-of-line labels. -->

package/examples/LineStep.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './datasets';
+</script>
+
+<!-- A step plot is a line plot with a step curve: each life table holds its value until the next one. -->
+<LinePlot
+	width={720}
+	height={380}
+	data={LIFE}
+	x="year"
+	y="value"
+	color="sex"
+	scales={{ x: { edgeTicks: true } }}
+	styles={{ curve: 'step-after' }}
+/>

package/examples/LineStepSegment.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './datasets';
+</script>
+
+<!-- A segment sets its own curve: the female line is straight until 1980 and steps from then on. -->
+<LinePlot
+	width={720}
+	height={380}
+	data={LIFE}
+	x="year"
+	y="value"
+	color="sex"
+	scales={{ x: { edgeTicks: true } }}
+	segments={{
+		female: [{ areas: [{ x: { from: 1980 } }], styles: { curve: 'step-after' } }]
+	}}
+/>

package/examples/Lollipop.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { LollipopPlot } from '@fundar/data-chart-telling';
+	import { PROVINCE_VALUES } from './datasets';
+
+	const female = PROVINCE_VALUES.filter((row) => row.sex === 'female');
+</script>
+
+<!-- One dot on a stem per province: female life expectancy at birth, with its value beside it. -->
+<LollipopPlot
+	width={720}
+	height={400}
+	data={female}
+	x="value"
+	y="province"
+	scales={{ x: { domain: [70, 85] } }}
+	styles={{ values: { show: true } }}
+/>

package/examples/Markers.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { LIFE } from './data';
+	import { LIFE } from './datasets';
 </script>
 
 <!-- Markers add marks to a plot: a hover highlight, a reference rule and a delta between two series. -->

package/examples/MovingAverage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- A 6-month moving average, run on the plot's rows. -->

package/examples/Pyramid.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { PyramidPlot } from '@fundar/data-chart-telling';
-	import { AGES } from './data';
+	import { POPULATION_BY_AGE_AT_2022 } from './datasets';
 </script>
 
 <!-- A population pyramid: one side per `color` value. -->
-<PyramidPlot width={720} height={400} data={AGES} x="share" y="ageGroup" color="sex" />
+<PyramidPlot
+	width={720}
+	height={400}
+	data={POPULATION_BY_AGE_AT_2022}
+	x="share"
+	y="ageGroup"
+	color="sex"
+/>

package/examples/Regression.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { ScatterPlot } from '@fundar/data-chart-telling';
-	import { COUNTRIES } from './data';
+	import { COUNTRIES_AT_2007 } from './datasets';
 </script>
 
 <!-- A linear regression with its 95% confidence band. -->
 <ScatterPlot
 	width={720}
 	height={400}
-	data={COUNTRIES}
+	data={COUNTRIES_AT_2007}
 	x="gdp"
 	y="life"
 	statistics={[{ type: 'regression', regressionType: 'linear', confidence: 0.95 }]}

package/examples/ResponsiveLine.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 
 	// A plot draws at the pixel size it is given. To fill a container (or the
 	// window), bind its size and pass it down.

package/examples/Scales.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- Axis labels, a fixed domain with gridlines and a color per series. -->

package/examples/Scatter.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { ScatterPlot } from '@fundar/data-chart-telling';
-	import { COUNTRIES } from './data';
+	import { COUNTRIES_AT_2007 } from './datasets';
 </script>
 
 <!-- Points sized by `r`, colored by `color` and shaped by `symbol`. -->
 <ScatterPlot
 	width={720}
 	height={420}
-	data={COUNTRIES}
+	data={COUNTRIES_AT_2007}
 	x="gdp"
 	y="life"
 	r="population"

package/examples/SegmentHighlight.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 
 	const gba = REGION_VALUES.filter((row) => row.region === 'GBA');
 </script>