@fundar/data-chart-telling 1.0.0 → 1.1.0

package/examples/FacetsCarousel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!-- A carousel shows `visible` panels at a time, with navigation below. -->
+<LinePlot
+	width={720}
+	height={340}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	facet={{ by: 'region', columns: 3, mode: 'carousel', visible: 2, navLayout: 'below' }}
+/>

package/examples/FacetsRowsCols.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	// 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 and sector; `scales: 'free'` fits each panel to its own data. -->
+<LinePlot
+	width={720}
+	height={420}
+	data={rows}
+	x="date"
+	y="value"
+	facet={{ rows: 'region', cols: 'sector', scales: 'free' }}
+/>

package/examples/FirstPlot.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!-- The smallest useful plot: rows, the fields to map and a pixel size. -->
+<LinePlot width={720} height={400} data={REGION_VALUES} x="date" y="value" color="region" />

package/examples/Gaps.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE_GAPS } from './data';
+</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 }]}
+	scales={{ x: { edgeTicks: true }, y: { domain: [55, 85] } }}
+	styles={{
+		gaps: {
+			default: {
+				middle: { interpolate: 'linear', style: { stroke: { strokeDasharray: '4 4' } } },
+				start: { x: 1940, style: { stroke: { strokeOpacity: 0.4 } } },
+				end: { x: 2025, y: 81.1 }
+			}
+		}
+	}}
+/>

package/examples/GroupedBars.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { PROVINCE_VALUES } from './data';
+</script>
+
+<!-- Vertical bars, grouped by `color`. -->
+<BarPlot
+	width={720}
+	height={400}
+	data={PROVINCE_VALUES}
+	x="province"
+	y="value"
+	color="sex"
+	scales={{ y: { domain: [70, 85] } }}
+/>

package/examples/Heatmap.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { HeatmapPlot } from '@fundar/data-chart-telling';
+	import { HOUSEHOLDS } from './data';
+</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" />

package/examples/HeatmapSegments.svelte

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

package/examples/Histogram.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { HistogramPlot } from '@fundar/data-chart-telling';
+	import { HEIGHTS } from './data';
+</script>
+
+<!-- Two overlapping distributions, one per `grouping` value. -->
+<HistogramPlot
+	width={720}
+	height={400}
+	data={HEIGHTS}
+	x="height"
+	grouping="group"
+	segments={{ default: [{ styles: { fillOpacity: 0.7 } }] }}
+/>

package/examples/HorizontalBars.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { PROVINCE_VALUES } from './data';
+</script>
+
+<!-- Horizontal bars: the categories go on `y`, the values on `x`. -->
+<BarPlot
+	width={720}
+	height={400}
+	data={PROVINCE_VALUES}
+	x="value"
+	y="province"
+	color="sex"
+	scales={{ x: { domain: [70, 85] } }}
+/>

package/examples/LegendSections.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!-- An explicit legend: a discrete section of toggles and a continuous ramp. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	legend={[
+		{
+			type: 'discrete',
+			title: 'Region',
+			interactive: { enabled: true },
+			items: [
+				{ name: 'GBA', color: '#4f46e5', symbol: 'line' },
+				{ name: 'Cuyo', color: '#e6580d', symbol: 'line' },
+				{ name: 'Northwest', color: '#16a34a', symbol: 'line' }
+			]
+		},
+		{ type: 'continuous', title: 'Share', min: 0, max: 100, scheme: 'blues' }
+	]}
+/>

package/examples/LegendToggle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { ROWS } from './data';
+	import { REGION_VALUES } from './data';
 	import LegendReader from './LegendReader.svelte';
 </script>
 
@@ -13,8 +13,8 @@
 <LinePlot
 	width={720}
 	height={400}
-	data={ROWS}
-	x="year"
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
 	legend={{ series: { interactive: { enabled: true, disabled: { mode: 'omit' } } } }}

package/examples/LineByRegion.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!-- One line per region, with a title, the automatic legend, end-of-line values and a tooltip. -->
+<LinePlot
+	width={720}
+	height={400}
+	title="Monthly inflation by region (%)"
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	tooltip
+	scales={{ x: { label: false } }}
+	styles={{ values: { show: true } }}
+/>

package/examples/LineDates.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- A line per commodity over a date axis, with end-of-line labels. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	styles={{ values: { show: true, format: (v, name) => `${name}: ${v}` } }}
+/>

package/examples/Markers.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './data';
+</script>
+
+<!-- Markers add marks to a plot: a hover highlight, a reference rule and a delta between two series. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={LIFE}
+	x="year"
+	y="value"
+	color="sex"
+	scales={{ x: { edgeTicks: true } }}
+	markers={[
+		{ type: 'hover' },
+		{ type: 'rule', axis: 'x', value: 2001, styles: { stroke: '#999', strokeDasharray: '4 4' } },
+		{
+			type: 'delta',
+			axis: 'x',
+			at: 1980,
+			from: { type: 'series', series: 'female' },
+			to: { type: 'series', series: 'male' },
+			formatDiff: (difference) => difference.toFixed(1)
+		}
+	]}
+/>

package/examples/MovingAverage.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- A 6-month moving average, run on the plot's rows. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	transforms={[{ type: 'windowY', k: 6, reduce: 'mean' }]}
+/>

package/examples/Pyramid.svelte

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

package/examples/Regression.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ScatterPlot } from '@fundar/data-chart-telling';
+	import { COUNTRIES } from './data';
+</script>
+
+<!-- A linear regression with its 95% confidence band. -->
+<ScatterPlot
+	width={720}
+	height={400}
+	data={COUNTRIES}
+	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 { ROWS } from './data';
+	import { REGION_VALUES } 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.
@@ -13,15 +13,15 @@
 		<LinePlot
 			{width}
 			{height}
-			title="Value by region"
-			subtitle="Index, 2016-2023"
-			data={ROWS}
-			x="year"
+			title="Monthly inflation by region"
+			subtitle="Change from the previous month, 2023-2026"
+			data={REGION_VALUES}
+			x="date"
 			y="value"
 			color="region"
 			scales={{
-				x: { label: 'Year', tickFormat: (d) => String(d) },
-				y: { label: 'Index' }
+				x: { label: 'Month' },
+				y: { label: 'Inflation (%)' }
 			}}
 			styles={{ values: { show: true, format: (v, name) => `${name}: ${v}` } }}
 			margins={{ right: 'auto' }}

package/examples/Scales.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- Axis labels, a fixed domain with gridlines and a color per series. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	scales={{
+		x: { label: 'Month' },
+		y: { label: 'Index (Jan 2021 = 100)', domain: [0, 600], grid: true },
+		color: {
+			scheme: {
+				'Brent oil': '#1b9e77',
+				'Natural gas': '#d95f02',
+				Coal: '#7570b3',
+				Wheat: '#e7298a'
+			}
+		}
+	}}
+/>

package/examples/Scatter.svelte

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

package/examples/SegmentHighlight.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	const gba = REGION_VALUES.filter((row) => row.region === 'GBA');
+</script>
+
+<!-- A grey line with the 2023-2024 surge drawn in red. -->
+<LinePlot
+	width={720}
+	height={380}
+	series={[{ name: 'GBA', x: 'date', y: 'value', data: gba }]}
+	segments={{
+		GBA: [
+			{ styles: { stroke: { stroke: '#94a3b8', strokeWidth: 1 } } },
+			{
+				areas: [{ x: { from: new Date('2023-07-01'), to: new Date('2024-03-01') } }],
+				styles: { stroke: { stroke: '#ef4444', strokeWidth: 3 } }
+			}
+		]
+	}}
+/>

package/examples/Segments.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
 	import type { LineSegmentStyle, SegmentsConfig } from '@fundar/data-chart-telling';
-	import { ROWS } from './data';
+	import { REGION_VALUES } from './data';
 
 	// `segments` maps a series name (or 'default' for all series) to its rules.
 	const segments = {
 		default: [
 			{
-				areas: [{ x: { from: 2020, to: 2023 } }],
+				areas: [{ x: { from: new Date('2025-01-01'), to: new Date('2026-08-01') } }],
 				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} />
+<LinePlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	{segments}
+/>

package/examples/SegmentsBySeries.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './data';
+</script>
+
+<!-- Segments per series name, plus `default` for rules shared by every series. -->
+<LinePlot
+	width={720}
+	height={380}
+	data={LIFE}
+	x="year"
+	y="value"
+	color="sex"
+	scales={{ x: { edgeTicks: true } }}
+	segments={{
+		female: [{ styles: { stroke: { stroke: 'steelblue' } } }],
+		male: [{ styles: { stroke: { stroke: 'tomato' } } }],
+		default: [
+			{
+				areas: [{ x: { from: 1965, to: 1980 } }],
+				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+			}
+		]
+	}}
+/>

package/examples/StackedArea.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AreaPlot } from '@fundar/data-chart-telling';
+	import { AGE_SHARES } from './data';
+</script>
+
+<!-- Each age group's share of the population, stacked with `stackY` so the bands add up to 100%. -->
+<AreaPlot
+	width={720}
+	height={400}
+	data={AGE_SHARES}
+	x="year"
+	y="share"
+	color="ageGroup"
+	scales={{ x: { ticks: [1991, 2001, 2010, 2022] } }}
+	transforms={[{ type: 'stackY' }]}
+/>

package/examples/StackedBars.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { SEX_SHARES } from './data';
+</script>
+
+<!-- Each sex's share of the population per census, stacked with `stackY` so a bar adds up to 100%. -->
+<BarPlot
+	width={720}
+	height={400}
+	data={SEX_SHARES}
+	x="year"
+	y="share"
+	color="sex"
+	transforms={[{ type: 'stackY' }]}
+/>

package/examples/TimelinePlayer.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
 	import { BarPlot } from '@fundar/data-chart-telling';
-	import { ROWS } from './data';
+	import { REGION_VALUES } 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, ...).
+	play/pause, the current step and a slider in the chrome. `progress` sets where
+	it starts. `type: 'rule'` draws a guide beside the plot with no controls
+	instead (see TimelineRule). To build your own widget, read
+	`useFigure().timeline` (seek, play, pause, next, ...).
 -->
 <BarPlot
 	width={720}
 	height={400}
-	data={ROWS}
+	data={REGION_VALUES}
 	x="region"
 	y="value"
-	scales={{ y: { domain: [0, 200] } }}
-	timeline={{ accessor: 'year', player: { autoplay: false, loop: true } }}
+	scales={{ y: { domain: [0, 30] } }}
+	timeline={{ accessor: 'date', progress: 0.25, player: { autoplay: false, loop: true } }}
 />

package/examples/TimelineRule.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	// 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.
+	let progress = $state(0.5);
+</script>
+
+<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
+<LinePlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	timeline={{ accessor: (row) => row.date.getUTCFullYear(), type: 'rule', progress }}
+/>

package/examples/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { ROWS } from './data';
+	import { REGION_VALUES } from './data';
 </script>
 
 <!--
@@ -10,8 +10,8 @@
 <LinePlot
 	width={720}
 	height={400}
-	data={ROWS}
-	x="year"
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
 	tooltip={{ strategy: 'x', format: (row) => `${row.region}: ${row.value}` }}

package/examples/ValueLabels.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- End-of-line value labels with a custom format and font size. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	styles={{
+		values: {
+			show: true,
+			format: (value, seriesName) => `${seriesName}: ${value.toFixed(0)}`,
+			fontStyle: { fontSize: 13 }
+		}
+	}}
+/>