@samizdata/create-mozaic 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samizdata/create-mozaic",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Scaffold a mozaic analysis project: R/Python data scripts plus Svelte charts built as static embeds.",
   "license": "GPL-3.0-or-later",
   "author": "Nicu Calcea",

package/template/.claude/skills/mozaic-chart/SKILL.md

@@ -8,14 +8,14 @@ description: Build or change a chart in this mozaic analysis project. Use when a
 1. **Data.** Find or create the tidy CSV in `data/processed/`. If it does not exist, add a step to
    the analysis script (`analysis/R` or `analysis/py`) that writes it, and run it.
 2. **Form.** Pick the chart from what the data must show: magnitude → bars; change over time →
-   lines; parts of a whole → stacked bars (`StackedBarChart`) or a waffle; parts of a whole across groups of different sizes → mosaic (`MosaicChart`); distribution → beeswarm or histogram;
+   lines; parts of a whole → stacked bars (`StackedBarChart`) or a waffle; parts of a whole across groups of different sizes → mosaic (`MosaicChart`); distribution → beeswarm or histogram; where a reader's own value sits in published percentiles ("how do you compare?") → `PercentileChart`;
    geography → choropleth; two values per item → dumbbell or slope; one item at two dates → arrow plot (`ArrowChart`), or bars
    with a dot for the earlier date (`BarDotChart`) when the latest value matters most. One number → no chart.
 3. **Files.** Copy `src/charts/example/` to `src/charts/<slug>/`. Edit `data.ts` (import the CSV
    with `?raw`, parse with `csvParse(raw, autoType)`, type the rows), `messages.ts` (title,
    subtitle, alt, notes, source per language) and `Chart.svelte`.
 4. **Compose.** If a recipe in `@samizdata/mozaic/recipes` fits (`BarChart`, `ColumnChart`, `LineChart`,
-   `ScatterChart`, `ArrowChart`, `BarDotChart`, `StackedBarChart`, `MosaicChart`), wrap it: pass the data, accessors and strings. A new
+   `ScatterChart`, `ArrowChart`, `BarDotChart`, `StackedBarChart`, `MosaicChart`, `PercentileChart`), wrap it: pass the data, accessors and strings. A new
    form that other charts could reuse goes into mozaic as a recipe, not into this project.
    Otherwise use `Chart` / `Header` / `Plot` / `Svg` / marks / guides / `Footer` from mozaic.
    Prefer existing marks (`Bars`, `Line`, `Area`, `Points`, `Rects`, `Text`, `GeoPath`, `Treemap`,

package/template/AGENTS.md

@@ -22,6 +22,10 @@ the mozaic chart library (Svelte 5 + d3). House style: `src/lib/theme.ts`. Langu
   Text uses text colours (`var(--mz-color-text)`), never data colours.
 - Every chart needs `alt` text, a legend for 2+ series, and strings in every language.
 - Use the theme's breakpoints (`plot.breakpoint`) for small-screen layouts.
+- Name the y unit once, on the top tick: `<AxisY unit="lei/m³" />`.
+- Tooltips: `<Tooltip title items>`, one item per series (label, value, colour), so values line up.
+- Event markers on a time axis: `<RefLine x={date} label="…" dotted labelY={-30} />`, labels above the plot.
+- No `<DataTable>` ("Show the data" button) unless asked for.
 
 ## Before you finish
 

package/template/src/charts/example/Chart.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { scaleLinear } from 'd3-scale';
 	import { extent, max } from 'd3-array';
-	import { Chart, Header, Title, Subtitle, Footer, Notes, Source, DataTable } from '@samizdata/mozaic/frame';
+	import { Chart, Header, Title, Subtitle, Footer, Notes, Source } from '@samizdata/mozaic/frame';
 	import { Plot, Svg, Html } from '@samizdata/mozaic/core';
 	import { Line, LineEndLabels, Points } from '@samizdata/mozaic/marks';
 	import { AxisX, AxisY, GridY, Legend } from '@samizdata/mozaic/guides';
@@ -73,12 +73,20 @@
 			</Svg>
 			<Html>
 				{#if hoverYear !== null}
-					<Tooltip x={plot.x(hoverYear) ?? 0} y={plot.height / 2}>
-						<strong>{hoverYear}</strong>
-						{#each rows.filter((d) => d.year === hoverYear).toSorted((a, b) => b.value - a.value) as d (d.region)}
-							<div>{t.regions[d.region] ?? d.region}: <strong>{fmt.number(d.value)}</strong></div>
-						{/each}
-					</Tooltip>
+					<Tooltip
+						x={plot.x(hoverYear) ?? 0}
+						y={plot.height / 2}
+						title={String(hoverYear)}
+						items={rows
+							.filter((d) => d.year === hoverYear)
+							.toSorted((a, b) => b.value - a.value)
+							.map((d) => ({
+								label: t.regions[d.region] ?? d.region,
+								value: fmt.number(d.value),
+								color: color[d.region],
+								shape: 'line'
+							}))}
+					/>
 				{/if}
 			</Html>
 		{/snippet}
@@ -88,13 +96,4 @@
 		<Notes>{t.notes}</Notes>
 		<Source>{t.source}</Source>
 	</Footer>
-	<DataTable
-		data={rows}
-		columns={[
-			{ key: 'region', label: t.region, value: (d: Row) => t.regions[d.region] ?? d.region },
-			{ key: 'year', label: t.year, value: (d: Row) => d.year, format: String },
-			{ key: 'value', label: t.value, value: (d: Row) => d.value }
-		]}
-		maxRows={10}
-	/>
 </Chart>