@fundar/data-chart-telling 1.1.0 → 1.2.0

package/dist/markers/dot/DotMarker.svelte

@@ -2,7 +2,8 @@
 	import { Dot } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
+	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import type { DotMarkerConfig } from '../../types/markers/common';
 
 	/**
@@ -69,34 +70,30 @@
 	const strokeDasharray = $derived(styles?.dotStrokeDasharray);
 </script>
 
+{#snippet dots(rows: TData[], fillOpacity: number)}
+	<RowOffsetMarks {marker} {rows}>
+		{#snippet mark(own)}
+			<Dot
+				data={own}
+				x={x ?? 0}
+				y={y ?? 0}
+				{r}
+				{fill}
+				{fillOpacity}
+				{stroke}
+				{strokeWidth}
+				{strokeOpacity}
+				{strokeDasharray}
+				{symbol}
+			/>
+		{/snippet}
+	</RowOffsetMarks>
+{/snippet}
+
 {#if opacityBuckets}
 	{#each opacityBuckets as bucket (bucket.value)}
-		<Dot
-			data={bucket.data}
-			x={x ?? 0}
-			y={y ?? 0}
-			{r}
-			{fill}
-			fillOpacity={bucket.value}
-			{stroke}
-			{strokeWidth}
-			{strokeOpacity}
-			{strokeDasharray}
-			{symbol}
-		/>
+		{@render dots(bucket.data, bucket.value)}
 	{/each}
 {:else}
-	<Dot
-		data={displayData}
-		x={x ?? 0}
-		y={y ?? 0}
-		{r}
-		{fill}
-		fillOpacity={flatFillOpacity}
-		{stroke}
-		{strokeWidth}
-		{strokeOpacity}
-		{strokeDasharray}
-		{symbol}
-	/>
+	{@render dots(displayData, flatFillOpacity)}
 {/if}

package/dist/markers/image/ImageMarker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Image } from 'svelteplot';
+	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import type { ImageMarkerConfig } from '../../types/markers/common';
 
 	/** Renders one `'image'` marker as `<Image>` - an image centered on each row's `x`/`y`. */
@@ -8,15 +9,19 @@
 	const data = $derived(marker.data ?? []);
 </script>
 
-<Image
-	{data}
-	x={marker.x}
-	y={marker.y}
-	src={marker.src}
-	r={marker.r}
-	width={marker.width}
-	height={marker.height}
-	title={marker.title}
-	preserveAspectRatio={marker.preserveAspectRatio}
-	opacity={marker.opacity}
-/>
+<RowOffsetMarks {marker} rows={data}>
+	{#snippet mark(rows)}
+		<Image
+			data={rows}
+			x={marker.x}
+			y={marker.y}
+			src={marker.src}
+			r={marker.r}
+			width={marker.width}
+			height={marker.height}
+			title={marker.title}
+			preserveAspectRatio={marker.preserveAspectRatio}
+			opacity={marker.opacity}
+		/>
+	{/snippet}
+</RowOffsetMarks>

package/dist/markers/inset/InsetMarker.svelte

@@ -2,7 +2,7 @@
 	import { geoPath } from 'd3-geo';
 	import { buildInsetProjection } from './insetProjection';
 	import { insetBox } from './insetLayout';
-	import { filterGeometryParts } from '../../plots/utils/geoAccessors';
+	import { GeoGeometry } from '../../plots/map/geo/GeoGeometry';
 	import Tooltip from '../../layout/tooltip/Tooltip.svelte';
 	import type { GeoInsetMarkerConfig } from '../../types/markers/geo';
 	import type { GeoFeature } from '../../types/plots/data/geo';
@@ -65,7 +65,7 @@
 			if (!marker.featurePartsFilter) return matched;
 			const partsFilter = marker.featurePartsFilter;
 			return matched.flatMap((f) => {
-				const geometry = filterGeometryParts(f.geometry, (part) => partsFilter(part, f));
+				const geometry = GeoGeometry.filterParts(f.geometry, (part) => partsFilter(part, f));
 				return geometry ? [{ ...f, geometry }] : [];
 			});
 		}

package/dist/markers/line/LineMarker.svelte

@@ -21,6 +21,7 @@
 	x={marker.x}
 	y={marker.y}
 	z={marker.grouping}
+	curve={marker.curve ?? cfg.line.curve}
 	stroke={channelStroke ?? marker.styles?.stroke}
 	strokeWidth={marker.styles?.strokeWidth}
 	strokeOpacity={marker.styles?.strokeOpacity}

package/dist/markers/link/LinkMarker.svelte

@@ -1,47 +1,192 @@
 <script lang="ts">
 	import { Geo } from 'svelteplot';
-	import { resolveAccessor } from '../../plots/utils/accessors';
-	import { greatCircleInterpolate } from '../../plots/utils/geoAccessors';
+	import { geoPath } from 'd3-geo';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { GeoGeometry } from '../../plots/map/geo/GeoGeometry';
+	import { toProjectionLike, type StreamingProjection } from '../../plots/utils/tiles';
 	import type { GeoLinkMarkerConfig } from '../../types/markers/geo';
 
-	/** Renders one `'link'` marker - geodesic-aware lines between point pairs, as a synthetic `LineString` fed through `<Geo>`. */
+	/**
+	 * Renders one `'link'` marker - lines between point pairs. A plain `'auto'`
+	 * link follows the great circle, as a `LineString` fed through `<Geo>`; a
+	 * `'linear'` one, or any with an `altitude`, is a path drawn from the
+	 * projected positions.
+	 */
 	let { marker }: { marker: GeoLinkMarkerConfig } = $props();
 
+	type Point = [number, number];
+	const STEPS = 64;
+
+	const plot = usePlot().svelteplot;
+
 	const getX1 = $derived(resolveAccessor(marker.x1));
 	const getY1 = $derived(resolveAccessor(marker.y1));
 	const getX2 = $derived(resolveAccessor(marker.x2));
 	const getY2 = $derived(resolveAccessor(marker.y2));
+	const altitude = $derived(marker.altitude ?? 0);
+	const drawn = $derived(marker.curve === 'linear' || altitude > 0);
 
-	const linkFeatures = $derived(
+	const ends = (d: Record<string, unknown>): [Point, Point] => [
+		[Number(getX1(d)), Number(getY1(d))],
+		[Number(getX2(d)), Number(getY2(d))]
+	];
+
+	const arcFeatures = $derived(
 		marker.data.map((d) => ({
 			type: 'Feature' as const,
 			properties: {},
-			geometry: {
-				type: 'LineString' as const,
-				coordinates:
-					marker.curve === 'linear'
-						? [
-								[Number(getX1(d)), Number(getY1(d))],
-								[Number(getX2(d)), Number(getY2(d))]
-							]
-						: greatCircleInterpolate(
-								Number(getX1(d)),
-								Number(getY1(d)),
-								Number(getX2(d)),
-								Number(getY2(d))
-							)
-			}
+			geometry: { type: 'LineString' as const, coordinates: GeoGeometry.greatCircle(...ends(d)) }
 		}))
 	);
+
+	// The same shared, already-fitted projection every other map mark draws through.
+	const projection = $derived(
+		toProjectionLike(plot.scales.projection as unknown as StreamingProjection)
+	);
+
+	/** The projected globe's center and width; a projection that clips (a globe) is lifted radially, a flat one upward. */
+	const frame = $derived.by(() => {
+		const sphere = geoPath(plot.scales.projection as unknown as Parameters<typeof geoPath>[0]);
+		const [[x0, y0], [x1, y1]] = sphere.bounds({ type: 'Sphere' });
+		const probes: Point[] = [
+			[-170, 0],
+			[-90, 0],
+			[0, 0],
+			[90, 0],
+			[170, 0]
+		];
+		return {
+			center: [(x0 + x1) / 2, (y0 + y1) / 2] as Point,
+			width: x1 - x0,
+			globe: probes.some((probe) => projection(probe) === null)
+		};
+	});
+
+	/** Unit vector of a lon/lat on the sphere. */
+	const toVector = ([lon, lat]: Point): [number, number, number] => {
+		const [lambda, phi] = [(lon * Math.PI) / 180, (lat * Math.PI) / 180];
+		return [Math.cos(phi) * Math.cos(lambda), Math.cos(phi) * Math.sin(lambda), Math.sin(phi)];
+	};
+	const toLonLat = ([x, y, z]: [number, number, number]): Point => [
+		(Math.atan2(y, x) * 180) / Math.PI,
+		(Math.atan2(z, Math.hypot(x, y)) * 180) / Math.PI
+	];
+
+	/** The point of the sphere facing the viewer, on a globe. */
+	const facing = $derived.by(() => {
+		if (!frame.globe) return undefined;
+		const lonLat = projection.invert?.(frame.center);
+		return lonLat ? toVector(lonLat) : undefined;
+	});
+
+	/**
+	 * Where a point sits on screen, and whether it faces the viewer. On a
+	 * globe, a point on the far side shows where its mirror image across the
+	 * view plane does - that is where a lifted arc over the horizon is drawn.
+	 */
+	function place(point: Point): { xy: Point; front: boolean } | null {
+		const xy = projection(point);
+		if (xy) return { xy, front: true };
+		if (marker.occlusion !== 'globe' || !facing) return null;
+		const vector = toVector(point);
+		const depth = vector.reduce((sum, value, index) => sum + value * facing[index], 0);
+		const mirrored = vector.map((value, index) => value - 2 * depth * facing[index]);
+		const shown = projection(toLonLat(mirrored as [number, number, number]));
+		return shown ? { xy: shown, front: false } : null;
+	}
+
+	/** A point lifted off a globe's surface; one from the far side counts only once it clears the globe's outline. */
+	function lifted([x, y]: Point, rise: number, front: boolean): Point | null {
+		const [cx, cy] = frame.center;
+		const out: Point = [cx + (x - cx) * (1 + rise), cy + (y - cy) * (1 + rise)];
+		return front || Math.hypot(out[0] - cx, out[1] - cy) > frame.width / 2 ? out : null;
+	}
+
+	/** One route as projected runs of points; a run ends where the projection clips or the line wraps around a flat map. */
+	function runsOf(d: Record<string, unknown>): Point[][] {
+		const [from, to] = ends(d);
+		const start = projection(from);
+		const end = projection(to);
+		// A straight line needs both ends on screen; an arc keeps whatever part of it shows.
+		if (marker.curve === 'linear' && (!start || !end)) return [];
+		const steps = altitude > 0 ? STEPS : 1;
+		const projected: ({ xy: Point; front: boolean } | null)[] =
+			marker.curve === 'linear'
+				? Array.from({ length: steps + 1 }, (_, index) => ({
+						xy: [
+							start![0] + ((end![0] - start![0]) * index) / steps,
+							start![1] + ((end![1] - start![1]) * index) / steps
+						] as Point,
+						front: true
+					}))
+				: (altitude > 0 ? GeoGeometry.parallelPath : GeoGeometry.greatCircle)(from, to, steps).map(
+						(point) => place(point)
+					);
+		const chord = start && end ? Math.hypot(end[0] - start[0], end[1] - start[1]) : 0;
+
+		const runs: Point[][] = [];
+		let run: Point[] = [];
+		projected.forEach((point, index) => {
+			const rise = altitude * Math.sin((Math.PI * index) / steps);
+			const next: Point | null = !point
+				? null
+				: frame.globe
+					? lifted(point.xy, rise, point.front)
+					: [point.xy[0], point.xy[1] - chord * rise];
+			const previous = run[run.length - 1];
+			const wrapped =
+				next &&
+				previous &&
+				marker.curve !== 'linear' &&
+				!frame.globe &&
+				Math.abs(next[0] - previous[0]) > frame.width / 2;
+			if (!next || wrapped) {
+				if (run.length > 1) runs.push(run);
+				run = next ? [next] : [];
+			} else {
+				run.push(next);
+			}
+		});
+		if (run.length > 1) runs.push(run);
+		return runs;
+	}
+
+	const paths = $derived(
+		drawn
+			? marker.data.flatMap((d) => {
+					const runs = runsOf(d);
+					return runs.length
+						? [runs.map((run) => 'M' + run.map(([x, y]) => `${x},${y}`).join('L')).join('')]
+						: [];
+				})
+			: []
+	);
 </script>
 
-<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
-<Geo
-	class="link"
-	data={linkFeatures}
-	stroke={marker.styles?.stroke ?? 'currentColor'}
-	strokeWidth={marker.styles?.strokeWidth ?? 1}
-	strokeOpacity={marker.styles?.strokeOpacity}
-	strokeDasharray={marker.styles?.strokeDasharray}
-	style="vector-effect: non-scaling-stroke"
-/>
+{#if drawn}
+	<g class="link">
+		{#each paths as d, index (index)}
+			<path
+				{d}
+				fill="none"
+				stroke={marker.styles?.stroke ?? 'currentColor'}
+				stroke-width={marker.styles?.strokeWidth ?? 1}
+				stroke-opacity={marker.styles?.strokeOpacity}
+				stroke-dasharray={marker.styles?.strokeDasharray}
+				style="vector-effect: non-scaling-stroke"
+			/>
+		{/each}
+	</g>
+{:else}
+	<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
+	<Geo
+		class="link"
+		data={arcFeatures}
+		stroke={marker.styles?.stroke ?? 'currentColor'}
+		strokeWidth={marker.styles?.strokeWidth ?? 1}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+		style="vector-effect: non-scaling-stroke"
+	/>
+{/if}

package/dist/markers/regression/RegressionMarker.svelte

@@ -21,40 +21,23 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const RegressionMark = $derived(isHorizontal ? RegressionX : RegressionY);
 
 	const data = $derived(marker.data ?? []);
 </script>
 
-{#if isHorizontal}
-	<RegressionX
-		{data}
-		x={marker.x}
-		y={marker.y}
-		type={marker.regressionType}
-		order={marker.order}
-		base={marker.base}
-		span={marker.span}
-		confidence={marker.confidence}
-		stroke={marker.styles?.stroke ?? 'currentColor'}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-		fill={marker.confidence !== false ? 'currentColor' : undefined}
-	/>
-{:else}
-	<RegressionY
-		{data}
-		x={marker.x}
-		y={marker.y}
-		type={marker.regressionType}
-		order={marker.order}
-		base={marker.base}
-		span={marker.span}
-		confidence={marker.confidence}
-		stroke={marker.styles?.stroke ?? 'currentColor'}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-		fill={marker.confidence !== false ? 'currentColor' : undefined}
-	/>
-{/if}
+<RegressionMark
+	{data}
+	x={marker.x}
+	y={marker.y}
+	type={marker.regressionType}
+	order={marker.order}
+	base={marker.base}
+	span={marker.span}
+	confidence={marker.confidence}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	fill={marker.confidence !== false ? 'currentColor' : undefined}
+/>

package/dist/markers/rule/RuleMarker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { RuleX, RuleY } from 'svelteplot';
 	import type { AxisValue } from '../../types/layout/mapping';
+	import { RowStroke } from '../utils/RowStroke';
 	import type { RuleMarkerConfig } from '../../types/markers/common';
 
 	/**
@@ -29,6 +30,11 @@
 	 * single synthetic `{v: value}` row.
 	 */
 	const position = $derived(data ? value : (d: { v: AxisValue }) => d.v);
+
+	/** Each row's own stroke, over the marker's `styles`. */
+	const row = $derived(
+		RowStroke.of(marker, styles, { stroke: 'currentColor', strokeWidth: 1, strokeOpacity: 1 })
+	);
 </script>
 
 <RuleMark
@@ -40,8 +46,8 @@
 	{...axis === 'x'
 		? { insetTop: marker.insetTop, insetBottom: marker.insetBottom }
 		: { insetLeft: marker.insetLeft, insetRight: marker.insetRight }}
-	stroke={styles?.stroke ?? 'currentColor'}
-	strokeWidth={styles?.strokeWidth ?? 1}
-	strokeOpacity={styles?.strokeOpacity ?? 1}
+	stroke={row.stroke}
+	strokeWidth={row.strokeWidth}
+	strokeOpacity={row.strokeOpacity}
 	strokeDasharray={styles?.strokeDasharray}
 />

package/dist/markers/text/Declutter.d.ts

@@ -31,5 +31,9 @@ export declare class Declutter {
             top: number;
             bottom: number;
         };
+        /** Aligns the labels on the shared column even when none of them overlaps. */
+        forceAligned?: boolean;
+        /** Lets a leftward fan with no room flip right. Defaults to `true`. */
+        flip?: boolean;
     }): Map<K, LabelLane>;
 }

package/dist/markers/text/Declutter.js

@@ -11,20 +11,22 @@ export class Declutter {
      * axis's tick labels sit there) flips right instead.
      */
     static buildLanes(args) {
-        const { items, dx, fontSize, geometry, bounds } = args;
+        const { items, dx, fontSize, geometry, bounds, forceAligned, flip = true } = args;
         const lanes = new Map();
-        if (items.length < 2)
+        if (items.length < 2 && !forceAligned)
             return lanes;
         const sorted = [...items].sort((a, b) => a.py - b.py);
         const originals = sorted.map((item) => item.py);
         const minGap = Math.max(16, fontSize * 1.4);
-        const { finals, connected } = Declutter.#spread(originals, minGap, [bounds.top, bounds.bottom]);
+        const { finals, connected } = sorted.length > 1
+            ? Declutter.#spread(originals, minGap, [bounds.top, bounds.bottom])
+            : { finals: originals, connected: [] };
         const ranks = Declutter.#assignLanes(originals, finals, connected);
-        const aligned = ranks.some((r) => r.runSize > 1);
+        const aligned = !!forceAligned || ranks.some((r) => r.runSize > 1);
         const lanesUsed = aligned ? Math.max(...ranks.map((r) => r.runSize)) : 1;
         const reach = geometry.elbowGap + (lanesUsed - 1) * geometry.laneStep + geometry.labelGap;
         let dir = Math.sign(dx) || 1;
-        if (aligned && dir === -1) {
+        if (aligned && dir === -1 && flip) {
             // Unknown room (no x position yet) counts as none: flipping right is never wrong.
             const rooms = sorted.flatMap((item) => (item.px == null ? [] : [item.px - bounds.left]));
             if ((rooms.length > 0 ? Math.min(...rooms) : -Infinity) < reach)
@@ -142,12 +144,25 @@ export class Declutter {
             const runSize = end - start + 1;
             if (runSize < 2)
                 continue;
-            const order = Array.from({ length: runSize }, (_, k) => start + k).sort((a, b) => {
-                const aNearer = saferNearer(a, b);
-                if (aNearer !== saferNearer(b, a))
-                    return aNearer ? -1 : 1;
-                return distance(b) - distance(a);
-            });
+            const members = Array.from({ length: runSize }, (_, k) => start + k);
+            // The pairs the geometry decides: `before` holds the members that must take a nearer lane than each key.
+            const before = new Map(members.map((k) => [k, new Set()]));
+            for (const i of members) {
+                for (const j of members) {
+                    if (i !== j && saferNearer(i, j) && !saferNearer(j, i))
+                        before.get(j).add(i);
+                }
+            }
+            // Nearest lane first, each member only once everything that must precede it has a lane; the one that traveled furthest goes first among the free ones.
+            const order = [];
+            const placed = new Set();
+            while (order.length < runSize) {
+                const left = members.filter((k) => !placed.has(k));
+                const free = left.filter((k) => [...before.get(k)].every((i) => placed.has(i)));
+                const next = (free.length ? free : left).reduce((best, k) => distance(k) > distance(best) ? k : best);
+                order.push(next);
+                placed.add(next);
+            }
             order.forEach((k, rank) => {
                 out[k] = { rank, runSize };
             });