@fundar/data-chart-telling 1.1.0 → 1.2.0

package/docs/styles-and-segments.md

@@ -21,7 +21,7 @@
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { PRICES } from './data';
+	import { PRICES } from './datasets';
 </script>
 
 <!-- End-of-line value labels with a custom format and font size. -->
@@ -46,14 +46,17 @@
 
 ![End-of-line value labels](images/value-labels.png)
 
-| Field          | Meaning                                                                                                                                        |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show`         | Draws the labels. Off by default, except on a heatmap                                                                                          |
-| `anchor`       | `'outside'`, `'start'`, `'middle'`, `'end'` - where a label sits on its mark                                                                   |
-| `format`       | `(value, seriesName) => string`                                                                                                                |
-| `hoverIsolate` | Hovering a label dims every other series                                                                                                       |
-| `fontStyle`    | Text style: `fontSize`, `fill`, `dx`, `dy`, `textAnchor`, `lineAnchor`, `rotate`, `class`, ... Overrides the anchor's placement field by field |
-| `strokeStyle`  | Style of the connector lines drawn from labels that had to move apart                                                                          |
+| Field          | Meaning                                                                                                                                                                                                                   |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show`         | Draws the labels. Off by default, except on a heatmap                                                                                                                                                                     |
+| `anchor`       | `'outside'`, `'start'`, `'middle'`, `'end'` - where a label sits on its mark                                                                                                                                              |
+| `select`       | Which row of each group is labelled: `'first'`, `'last'`, `'min'`, `'max'`, or a list of them. A group is a series on a line or area plot (default `'last'`), a category on the plots that join dots (default: every dot) |
+| `series`       | Labels only these series, by name                                                                                                                                                                                         |
+| `color`        | `'series'` writes each label in its series' color; any other CSS color writes them all in it (`fontStyle.fill` wins)                                                                                                      |
+| `format`       | `(value, seriesName, row) => string`; `row` is the labelled row, for its other fields                                                                                                                                     |
+| `hoverIsolate` | Hovering a label dims every other series                                                                                                                                                                                  |
+| `fontStyle`    | Text style: `fontSize`, `fill`, `dx`, `dy`, `textAnchor`, `lineAnchor`, `rotate`, `class`, ... Overrides the anchor's placement field by field                                                                            |
+| `strokeStyle`  | Style of the connector lines drawn from labels that had to move apart                                                                                                                                                     |
 
 Where the labels go depends on the plot: the end of each series on a line or area plot, one per bar on a bar, pyramid or histogram, one per point on a scatter, one per cell on a heatmap. On lines, overlapping labels spread apart, share one column and are joined to their points by elbow connectors; the right margin grows to fit them when it is `'auto'`. The spread is tuned by `text.declutter` in the [configuration](theming.md).
 
@@ -70,14 +73,14 @@ A row whose value is `null`, `undefined` or `NaN` breaks a line. `styles.gaps` b
 ```svelte
 <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: {
@@ -137,7 +140,7 @@ A baseline color with a highlighted range:
 ```svelte
 <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>
@@ -170,7 +173,7 @@ Per-series colors, plus dots over a range shared by every series:
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { LIFE } from './data';
+	import { LIFE } from './datasets';
 </script>
 
 <!-- Segments per series name, plus `default` for rules shared by every series. -->
@@ -218,25 +221,25 @@ Heatmap columns and cells:
 ```svelte
 <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/docs/theming.md

@@ -31,26 +31,27 @@ resetConfiguration(); // back to the shipped defaults
 
 ## Sections
 
-| Key                                                             | Controls                                                                                                                                                                                                                                                                                  |
-| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `font`, `color`, `background`                                   | Base text of every figure                                                                                                                                                                                                                                                                 |
-| `palette`                                                       | Categorical series colors, in order                                                                                                                                                                                                                                                       |
-| `symbols`                                                       | Shape cycle for the `symbol` channel                                                                                                                                                                                                                                                      |
-| `continuous`                                                    | Default ramp endpoints, label color and opacity range for continuous color and opacity                                                                                                                                                                                                    |
-| `spacing`, `chrome`                                             | Padding around header, legend and caption; the chrome `order` and `rowGap`                                                                                                                                                                                                                |
-| `title`, `subtitle`, `caption`                                  | Text blocks: `font`, `size`, `weight`, `color`, `leading`, `spacing`                                                                                                                                                                                                                      |
-| `divider`                                                       | The line a `'divider'` in the chrome `order` draws                                                                                                                                                                                                                                        |
-| `legend`                                                        | Text, gaps, swatches, `disabledOpacity`, paginated nav buttons, the continuous bar, its handles, ticks and labels, and the `seriesTitle` and `sizeScale` options                                                                                                                          |
-| `axis`                                                          | Axis color, font and tick sizes, `grid`, and the number locale (below)                                                                                                                                                                                                                    |
-| `tooltip`                                                       | Tooltip background, color, font size, padding, radius, border                                                                                                                                                                                                                             |
-| `margins`                                                       | Default margin per side (`'auto'` or a number)                                                                                                                                                                                                                                            |
-| `line`, `area`, `bar`, `pyramid`, `histogram`, `box`, `scatter` | Per-kind defaults: stroke width, dot radius, series padding, gap fills, fill opacity, inset, box padding                                                                                                                                                                                  |
-| `text`                                                          | `declutter` geometry of value labels and connectors                                                                                                                                                                                                                                       |
-| `hover`                                                         | Look of the hover marker: `rule`, `dot`, `font`, `area`                                                                                                                                                                                                                                   |
-| `delta`                                                         | The `delta` marker's label, per axis the delta is taken on: `text.x` (beside a vertical delta: `dx: 12`, `textAnchor: 'start'`) and `text.y` (above a horizontal one: `dy: -10`, `textAnchor: 'middle'`). `lineAnchor` picks where along the delta the label sits and how it aligns there |
-| `timeline`                                                      | The rule (`rule`) and the player bar (`player`: controls, speeds, `stepDuration`, button, track, thumb, toggle)                                                                                                                                                                           |
-| `facet`                                                         | The position badge and prev/next buttons                                                                                                                                                                                                                                                  |
-| `frameClip`                                                     | Tolerance for clipping marks to the plot frame                                                                                                                                                                                                                                            |
+| Key                                                                                                                                                                 | Controls                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `font`, `color`, `background`                                                                                                                                       | Base text of every figure                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `palette`                                                                                                                                                           | Categorical series colors, in order: a list of colors, or the name of a [d3-scale-chromatic](https://d3js.org/d3-scale-chromatic) scheme - a color list (`'dark2'`, `'tableau10'`) or a ramp (`'viridis'`, `'blues'`) - or `{ scheme, count, schemeRange }` for a ramp with its own number of colors (8 by default) and part of the ramp (`[0.3, 1]` skips the near-white start of `'blues'`). A name is turned into the list of colors when it is set |
+| `symbols`                                                                                                                                                           | Shape cycle for the `symbol` channel                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `continuous`                                                                                                                                                        | Default ramp endpoints, label color and opacity range for continuous color and opacity                                                                                                                                                                                                                                                                                                                                                                 |
+| `spacing`, `chrome`                                                                                                                                                 | Padding around header, legend and caption; the chrome `order` and `rowGap`                                                                                                                                                                                                                                                                                                                                                                             |
+| `title`, `subtitle`, `caption`                                                                                                                                      | Text blocks: `font`, `size`, `weight`, `color`, `leading`, `spacing`                                                                                                                                                                                                                                                                                                                                                                                   |
+| `divider`                                                                                                                                                           | The line a `'divider'` in the chrome `order` draws                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `legend`                                                                                                                                                            | Text, gaps, swatches, `disabledOpacity`, paginated nav buttons, the continuous bar, its handles, ticks and labels, and the `seriesTitle` and `sizeScale` options                                                                                                                                                                                                                                                                                       |
+| `axis`                                                                                                                                                              | Axis color, font and tick sizes, `grid`, and the number locale (below)                                                                                                                                                                                                                                                                                                                                                                                 |
+| `tooltip`                                                                                                                                                           | Tooltip background, color, font size, padding, radius, border                                                                                                                                                                                                                                                                                                                                                                                          |
+| `margins`                                                                                                                                                           | Default margin per side (`'auto'` or a number)                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `line`, `area`, `bar`, `pyramid`, `histogram`, `density`, `violin`, `box`, `lollipop`, `dumbbell`, `cleveland`, `forest`, `bullet`, `slope`, `sparkline`, `scatter` | Per-kind defaults: line curve (`'auto'`, straight segments), stroke width, dot radius, series padding, gap fills, fill opacity, inset, density stroke width, violin padding and box width, box, lollipop, dumbbell, Cleveland and forest padding, stem width, forest caps, bullet bar thickness, ranges and target tick, slope stroke width, dot radius and padding, sparkline stroke width and dot radius                                             |
+| `text`                                                                                                                                                              | `declutter` geometry of value labels and connectors                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `connector`                                                                                                                                                         | What `styles.connector` falls back to on lollipop, dumbbell, Cleveland and forest plots: `sign` (`positive`, `negative`, `zero` colors), `lengthScheme` and `differenceScheme` (color ramps), `arrow` (`width`, `headLength`, `headAngle` of a connector drawn as an arrow), `outsideOpacity` (the part of a connector outside its `from`-`to` stretch), `capLength` (px, of a forest plot's end caps), `labelFontSize` and `labelGap`                 |
+| `hover`                                                                                                                                                             | Look of the hover marker: `rule`, `dot`, `font`, `area`                                                                                                                                                                                                                                                                                                                                                                                                |
+| `delta`                                                                                                                                                             | The `delta` marker's label, per axis the delta is taken on: `text.x` (beside a vertical delta: `dx: 12`, `textAnchor: 'start'`) and `text.y` (above a horizontal one: `dy: -10`, `textAnchor: 'middle'`). `lineAnchor` picks where along the delta the label sits and how it aligns there                                                                                                                                                              |
+| `timeline`                                                                                                                                                          | The rule (`rule`) and the player bar (`player`: controls, speeds, `stepDuration`, button, track, thumb, toggle)                                                                                                                                                                                                                                                                                                                                        |
+| `facet`                                                                                                                                                             | The position badge and prev/next buttons                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `frameClip`                                                                                                                                                         | Tolerance for clipping marks to the plot frame                                                                                                                                                                                                                                                                                                                                                                                                         |
 
 ## Locale
 
@@ -70,6 +71,8 @@ setConfiguration({ axis: { locale: 'en-US', compactDisplay: 'long' } });
 setConfiguration({ axis: { edgeTicks: { x: { enabled: true, collision: 'extend' } } } });
 ```
 
+`axis.autoRotate` (default `true`) lets a category axis whose labels do not fit turn them to 45 or 90 degrees, and leave some out when that is not enough; an axis with its own `scales.x.tickRotate` is never touched, and `autoRotate: false` turns it off for every plot. It is read when a plot mounts.
+
 A plot overrides it with `scales.x.edgeTicks` or `scales.y.edgeTicks` (see [Scales](scales.md)).
 
 ## CSS variables

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/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`. -->