@fundar/data-chart-telling 1.1.0 → 1.2.0

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>

package/examples/Segments.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
 	import type { LineSegmentStyle, SegmentsConfig } from '@fundar/data-chart-telling';
-	import { REGION_VALUES } from './data';
+	import { REGION_VALUES } from './datasets';
 
 	// `segments` maps a series name (or 'default' for all series) to its rules.
 	const segments = {

package/examples/SegmentsBySeries.svelte

@@ -1,6 +1,6 @@
 <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. -->

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 } }}
+/>

package/examples/Sparkline.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { SparklinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './datasets';
+</script>
+
+<!-- One sparkline per region: monthly inflation as a thin line, with its last value beside a dot. -->
+<SparklinePlot
+	width={360}
+	height={300}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	facet={{ by: 'region', columns: 1, gap: 4 }}
+/>

package/examples/StackedArea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AreaPlot } from '@fundar/data-chart-telling';
-	import { AGE_SHARES } from './data';
+	import { AGE_SHARES } from './datasets';
 </script>
 
 <!-- Each age group's share of the population, stacked with `stackY` so the bands add up to 100%. -->

package/examples/StackedBars.svelte

@@ -1,6 +1,6 @@
 <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%. -->

package/examples/TimelinePlayer.svelte

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

package/examples/TimelineRule.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 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/examples/Tooltip.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>
 
 <!--

package/examples/ValueLabels.svelte

@@ -1,6 +1,6 @@
 <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. -->

package/examples/Violin.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ViolinPlot } from '@fundar/data-chart-telling';
+	import { IRIS } from './datasets';
+</script>
+
+<!-- The sepal length of the flowers of each species: its density, mirrored, with a box inside. -->
+<ViolinPlot
+	width={720}
+	height={400}
+	data={IRIS}
+	x="species"
+	y="sepalLength"
+	scales={{ y: { label: 'Sepal length (cm)' } }}
+/>

package/examples/datasets/argentina-chile-trends.ts

@@ -0,0 +1,34 @@
+// ── Argentina and Chile, 1987-2007 ──────────────────────────────────────────
+// Gapminder, via the countries-over-time series: each country's GDP per capita
+// and population, as an index with 1987 = 100 so both metrics share one axis.
+
+import { COUNTRIES_OVER_TIME } from './countries-over-time';
+
+/** One country's GDP per capita or population, one row per year. */
+export type CountryTrendRow = {
+	year: number;
+	country: string;
+	metric: string;
+	value: number;
+};
+
+export const ARGENTINA_CHILE_TRENDS: CountryTrendRow[] = ['Argentina', 'Chile'].flatMap(
+	(country) => {
+		const rows = COUNTRIES_OVER_TIME.filter((row) => row.country === country);
+		const [first] = rows;
+		return rows.flatMap(({ year, gdp, population }) => [
+			{
+				year,
+				country,
+				metric: 'GDP per capita',
+				value: Math.round((gdp / first.gdp) * 100)
+			},
+			{
+				year,
+				country,
+				metric: 'Population',
+				value: Math.round((population / first.population) * 100)
+			}
+		]);
+	}
+);

package/examples/datasets/commodity-prices.ts

@@ -0,0 +1,48 @@
+// ── International commodity prices ──────────────────────────────────────────
+// IMF, Primary Commodity Prices (PCPS), via DBnomics. Monthly, 2021-2024, as
+// an index with January 2021 = 100 so every commodity shares one axis.
+
+export type PriceRow = { date: Date; commodity: string; index: number };
+
+const PRICE_INDEX_BY_COMMODITY = [
+	{
+		commodity: 'Brent oil',
+		index: [
+			100, 113, 119, 119, 124, 133, 135, 128, 135, 152, 146, 135, 155, 171, 204, 192, 203, 213, 191,
+			177, 164, 170, 165, 148, 152, 151, 144, 151, 137, 136, 145, 154, 168, 161, 149, 140, 143, 148,
+			154, 161, 150, 150, 152, 143, 132, 136, 133, 133
+		]
+	},
+	{
+		commodity: 'Natural gas',
+		index: [
+			100, 110, 99, 101, 112, 124, 144, 152, 192, 210, 193, 146, 160, 169, 188, 255, 308, 286, 268,
+			331, 296, 230, 245, 217, 131, 92, 91, 83, 87, 94, 100, 100, 102, 120, 115, 96, 103, 68, 66,
+			67, 91, 106, 84, 79, 91, 97, 113, 130
+		]
+	},
+	{
+		commodity: 'Coal',
+		index: [
+			100, 102, 105, 108, 115, 145, 168, 191, 207, 265, 195, 199, 255, 299, 388, 368, 460, 470, 477,
+			492, 514, 469, 405, 470, 445, 268, 215, 221, 197, 152, 155, 168, 185, 166, 145, 164, 155, 141,
+			151, 151, 163, 158, 156, 167, 163, 168, 165, 154
+		]
+	},
+	{
+		commodity: 'Wheat',
+		index: [
+			100, 101, 97, 101, 117, 100, 102, 116, 113, 124, 133, 136, 137, 146, 163, 171, 187, 167, 135,
+			136, 146, 149, 145, 136, 135, 140, 130, 131, 126, 119, 117, 101, 96, 91, 91, 97, 95, 92, 89,
+			88, 96, 86, 77, 74, 79, 83, 78, 78
+		]
+	}
+];
+
+export const PRICES: PriceRow[] = PRICE_INDEX_BY_COMMODITY.flatMap(({ commodity, index }) =>
+	index.map((value, monthIndex) => ({
+		date: new Date(Date.UTC(2021, monthIndex, 1)),
+		commodity,
+		index: value
+	}))
+);