@fundar/data-chart-telling 0.0.19 → 0.0.20

package/dist/plots/geo/Plot.svelte

@@ -6,6 +6,7 @@
   import {
     geometryCentroid,
     geometryLonLatBounds,
+    mercatorAspectRatio,
     geometryPartCentroids,
     filterGeometryParts,
     defaultFeatureId,
@@ -145,13 +146,19 @@
     });
   });
 
-  // ── Tile-layer clipping — the rendered geometry's own lon/lat extent, so
-  // `TileLayer` can clip its raster grid to where the map actually is
-  // instead of a `domain: 'data'` fit's full (possibly letterboxed) box —
-  // see `clipBoundsToData`'s doc comment. Only computed when a tile layer is
-  // actually configured, since it's an O(total coordinate count) pass. ────
+  // ── Data footprint — the rendered geometry's own lon/lat extent. Powers
+  // two independent things below: `TileLayer`'s clip-to-data (see
+  // `clipBoundsToData`'s doc comment) and `containedSize`'s contain-and-center
+  // sizing. Only computed for a `domain: 'data'` fit (see `usesDataFit`) —
+  // that's the specific case where the projection's own scale was chosen to
+  // match *this* extent, so it's also the only case this bbox is a correct
+  // stand-in for "what the projection actually fit to". Cost is a single
+  // O(total coordinate count) pass. ────
+  const usesDataFit = $derived(
+    typeof scales.projection === 'object' && scales.projection?.domain === 'data',
+  );
   const dataLonLatBounds = $derived.by((): [number, number, number, number] | null => {
-    if (!styles.tileLayer) return null;
+    if (!usesDataFit) return null;
     let minLon = Infinity;
     let maxLon = -Infinity;
     let minLat = Infinity;
@@ -167,6 +174,38 @@
     return minLon === Infinity ? null : [minLon, minLat, maxLon, maxLat];
   });
 
+  /**
+   * The box the map itself actually renders into — `width`/`height`
+   * shrunk (never grown) to `dataLonLatBounds`' own Mercator aspect ratio,
+   * the same way `object-fit: contain` sizes an image. Without this, a
+   * `domain: 'data'` fit already internally letterboxes the *projection*
+   * to preserve the data's true shape whenever the outer box's aspect
+   * doesn't match it (e.g. a tall/narrow country handed a short/wide facet
+   * cell) — but previously the outer SVG itself stayed stretched to the
+   * full box regardless, leaving that letterboxed margin as dead space
+   * (blank, or — before `clipBoundsToData` — filled with irrelevant tiles).
+   * Shrinking the actual rendered box to match removes that margin instead
+   * of just hiding what was in it; the template below centers this smaller
+   * box within the full `{width}×{height}` area so the map still occupies
+   * the same visual position within its facet cell.
+   *
+   * Margins (`margins`/`GEO_MARGIN_ESTIMATE`) are deliberately not netted
+   * out of this fit — they're small relative to typical facet-cell sizes,
+   * and doing this exactly would mean duplicating `BasePlotLayout`'s own
+   * private margin resolution here.
+   */
+  const containedSize = $derived.by((): { width: number; height: number } => {
+    const full = { width, height };
+    if (!dataLonLatBounds) return full;
+    const aspect = mercatorAspectRatio(dataLonLatBounds);
+    if (!aspect) return full;
+    const boxAspect = width / height;
+    if (!(boxAspect > 0)) return full;
+    return aspect > boxAspect
+      ? { width, height: width / aspect }
+      : { width: height * aspect, height };
+  });
+
   // ── Tile-layer / projection compatibility ────────────────────────────────
   $effect(() => {
     if (!styles.tileLayer) return;
@@ -506,8 +545,8 @@
         {@const insetContentBox = {
           left: numericMargins.left,
           top: numericMargins.top,
-          width: Math.max(0, width - numericMargins.left - numericMargins.right),
-          height: Math.max(0, height - numericMargins.top - numericMargins.bottom),
+          width: Math.max(0, containedSize.width - numericMargins.left - numericMargins.right),
+          height: Math.max(0, containedSize.height - numericMargins.top - numericMargins.bottom),
         }}
         <InsetMarker
           marker={marker as GeoInsetMarker<TProps>}
@@ -535,9 +574,10 @@
   `equirectangular` projection, whose x/y truly are linear in lon/lat) and
   is a no-op for every other mark type.
 -->
+<div class="dct-geo-contain" style:width="{width}px" style:height="{height}px">
 <BasePlotLayout
-  {width}
-  {height}
+  width={containedSize.width}
+  height={containedSize.height}
   data={hoverCandidates}
   getX={hoverGetX}
   getY={hoverGetY}
@@ -558,8 +598,8 @@
 >
   {#snippet children({ matchedPoints, numericMargins })}
     <GeoLayout
-      {width}
-      {height}
+      width={containedSize.width}
+      height={containedSize.height}
       {numericMargins}
       zoomTransform={geoZoom.transform}
       tileLayer={styles.tileLayer}
@@ -605,3 +645,17 @@
     {/if}
   {/snippet}
 </BasePlotLayout>
+</div>
+
+<style>
+  /**
+   * Centers `BasePlotLayout`'s own (possibly smaller, `containedSize`-fit)
+   * box within the full area the facet grid actually allotted this plot —
+   * see `containedSize`'s doc comment.
+   */
+  .dct-geo-contain {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/dist/plots/utils/geoAccessors.d.ts

@@ -20,6 +20,25 @@ export declare function geometryCentroid(geometry: GeoJSON.Geometry): [number, n
  * fit box (see `clipBoundsToData`).
  */
 export declare function geometryLonLatBounds(geometry: GeoJSON.Geometry): [number, number, number, number] | null;
+/**
+ * The width:height aspect ratio a Mercator(-family) projection naturally
+ * produces for a `[minLon, minLat, maxLon, maxLat]` bounding box — i.e.
+ * what a `domain: 'data'`-style projection fit (see `resolveProjection.ts`)
+ * implicitly commits to before any letterboxing into a differently-shaped
+ * box. `null` for a degenerate box: no lon or lat span, or a latitude
+ * at/past ±90° where Mercator's `y` isn't finite.
+ *
+ * Longitude maps linearly to Mercator's `x`; latitude maps through the
+ * standard `ln(tan(π/4 + φ/2))` transform to `y` — the same one
+ * `tiles.ts`'s `latToTileY` uses, left unscaled by tile count here since
+ * only the *ratio* between the two axes is wanted. Both axes share the same
+ * scale by construction (Mercator is conformal), so this ratio is exactly
+ * what a real `d3-geo` fit would produce for the same bbox — used by
+ * `GeoPlot` to size itself down to its own data's footprint instead of
+ * stretching into whatever box a facet grid happens to hand it (see
+ * `Plot.svelte`'s `containedSize`).
+ */
+export declare function mercatorAspectRatio(bounds: [number, number, number, number]): number | null;
 /**
  * Splits a geometry into its disjoint parts: one `Polygon` per element of a
  * `MultiPolygon`'s `coordinates`, one `LineString` per element of a

package/dist/plots/utils/geoAccessors.js

@@ -93,6 +93,36 @@ export function geometryLonLatBounds(geometry) {
     }
     return [minLon, minLat, maxLon, maxLat];
 }
+/**
+ * The width:height aspect ratio a Mercator(-family) projection naturally
+ * produces for a `[minLon, minLat, maxLon, maxLat]` bounding box — i.e.
+ * what a `domain: 'data'`-style projection fit (see `resolveProjection.ts`)
+ * implicitly commits to before any letterboxing into a differently-shaped
+ * box. `null` for a degenerate box: no lon or lat span, or a latitude
+ * at/past ±90° where Mercator's `y` isn't finite.
+ *
+ * Longitude maps linearly to Mercator's `x`; latitude maps through the
+ * standard `ln(tan(π/4 + φ/2))` transform to `y` — the same one
+ * `tiles.ts`'s `latToTileY` uses, left unscaled by tile count here since
+ * only the *ratio* between the two axes is wanted. Both axes share the same
+ * scale by construction (Mercator is conformal), so this ratio is exactly
+ * what a real `d3-geo` fit would produce for the same bbox — used by
+ * `GeoPlot` to size itself down to its own data's footprint instead of
+ * stretching into whatever box a facet grid happens to hand it (see
+ * `Plot.svelte`'s `containedSize`).
+ */
+export function mercatorAspectRatio(bounds) {
+    const [minLon, minLat, maxLon, maxLat] = bounds;
+    if (minLat <= -90 || maxLat >= 90)
+        return null;
+    const toRad = (deg) => (deg * Math.PI) / 180;
+    const lonSpan = toRad(maxLon - minLon);
+    const mercatorY = (lat) => Math.log(Math.tan(Math.PI / 4 + toRad(lat) / 2));
+    const latSpan = Math.abs(mercatorY(maxLat) - mercatorY(minLat));
+    if (!(lonSpan > 0) || !(latSpan > 0) || !Number.isFinite(latSpan))
+        return null;
+    return lonSpan / latSpan;
+}
 /**
  * Splits a geometry into its disjoint parts: one `Polygon` per element of a
  * `MultiPolygon`'s `coordinates`, one `LineString` per element of a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "files": [
     "dist"