@fundar/data-chart-telling 1.0.0 → 1.2.0

package/examples/CustomTooltip.svelte

@@ -1,35 +1,42 @@
 <script lang="ts">
 	import { LinePlot, getConfiguration, paletteColor } from '@fundar/data-chart-telling';
 	import TooltipCard from './TooltipCard.svelte';
-	import { ROWS, type Row } from './data';
+	import { REGION_VALUES, type RegionRow } from './datasets';
 
 	const { palette } = getConfiguration();
-	const regions = [...new Set(ROWS.map((d) => d.region))];
+	const regions = [...new Set(REGION_VALUES.map((row) => row.region))];
 </script>
 
 <!--
 	`content` replaces the tooltip text with your own markup, drawn in a plain
 	card: TooltipCard brings its own background, colors and spacing. It is given
-	every row the hover matched; series colors come from the configuration's palette.
+	every row the hover matched, in no particular order, so it sorts them itself;
+	series colors come from the configuration's palette.
 -->
-{#snippet content({ rows }: { rows: Row[] })}
+{#snippet content({ rows }: { rows: RegionRow[] })}
 	<TooltipCard
-		heading={String(rows[0].year)}
-		footer="Value by region"
-		entries={rows.map((row) => ({
-			label: row.region,
-			color: paletteColor(regions.indexOf(row.region), palette),
-			value: row.value,
-			display: String(row.value)
-		}))}
+		heading={rows[0].date.toLocaleDateString('en-US', {
+			month: 'long',
+			year: 'numeric',
+			timeZone: 'UTC'
+		})}
+		footer="Monthly inflation (%)"
+		entries={[...rows]
+			.sort((a, b) => b.value - a.value)
+			.map((row) => ({
+				label: row.region,
+				color: paletteColor(regions.indexOf(row.region), palette),
+				value: row.value,
+				display: String(row.value)
+			}))}
 	/>
 {/snippet}
 
 <LinePlot
 	width={720}
 	height={400}
-	data={ROWS}
-	x="year"
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
 	tooltip={{ strategy: 'x', content }}

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,14 +1,14 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-	import { ROWS } 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. -->
 <LinePlot
 	width={900}
 	height={360}
-	data={ROWS}
-	x="year"
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	facet={{ by: 'region', columns: 3, gap: 12, scales: 'shared' }}
 	tooltip={{ sync: true }}

package/examples/FacetsCarousel.svelte

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	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: FEMALE_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 './datasets';
+</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 { PENGUIN_COUNTS } from './datasets';
+</script>
+
+<!-- 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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { HeatmapPlot } from '@fundar/data-chart-telling';
+	import { PENGUIN_COUNTS } from './datasets';
+</script>
+
+<!-- Segments on a heatmap: an outlined column and a filled block of cells. -->
+<HeatmapPlot
+	width={560}
+	height={360}
+	data={PENGUIN_COUNTS}
+	x="island"
+	y="species"
+	color="count"
+	segments={{
+		default: [
+			{
+				areas: [{ x: { from: 'Biscoe', to: 'Biscoe' } }],
+				styles: { stroke: '#f59e0b', strokeWidth: 2 }
+			},
+			{
+				areas: [{ x: { from: 'Dream', to: 'Torgersen' }, y: { from: 'Chinstrap', to: 'Gentoo' } }],
+				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 './datasets';
+</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 './datasets';
+</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 './datasets';
+</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 './datasets';
 	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 './datasets';
+</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 './datasets';
+</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/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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './datasets';
+</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 './datasets';
+</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,14 @@
+<script lang="ts">
+	import { PyramidPlot } from '@fundar/data-chart-telling';
+	import { POPULATION_BY_AGE_AT_2022 } from './datasets';
+</script>
+
+<!-- A population pyramid: one side per `color` value. -->
+<PyramidPlot
+	width={720}
+	height={400}
+	data={POPULATION_BY_AGE_AT_2022}
+	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_AT_2007 } from './datasets';
+</script>
+
+<!-- A linear regression with its 95% confidence band. -->
+<ScatterPlot
+	width={720}
+	height={400}
+	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 { ROWS } 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.
@@ -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 './datasets';
+</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_AT_2007 } from './datasets';
+</script>
+
+<!-- Points sized by `r`, colored by `color` and shaped by `symbol`. -->
+<ScatterPlot
+	width={720}
+	height={420}
+	data={COUNTRIES_AT_2007}
+	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 './datasets';
+
+	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 './datasets';
 
 	// `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 './datasets';
+</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/Slope.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { SlopePlot } from '@fundar/data-chart-telling';
+	import { AGE_SHARES } from './datasets';
+
+	const censuses = AGE_SHARES.filter(({ year }) => year === 1991 || year === 2022);
+</script>
+
+<!-- Each age group's share of Buenos Aires City's population between two censuses, labelled at both ends. -->
+<SlopePlot
+	width={720}
+	height={400}
+	data={censuses}
+	x="year"
+	y="share"
+	color="ageGroup"
+	styles={{ values: { show: true } }}
+/>