almost there, but still a bit off with faceting

Author: Fil

src/dimensions.js

@@ -75,16 +75,15 @@ export function Dimensions(scales, geometry, axes, options = {}) {
 }
 
 function autoHeight({y, fy, fx}, projectionRatio, width) {
+  const nfy = fy ? fy.scale.domain().length : 1;
   if (projectionRatio > 0) {
-    return Math.max(
-      200,
-      Math.min(
-        1200,
-        Math.ceil((fx ? fx.scale.bandwidth() : 1) * width * projectionRatio) / (fy ? fy.scale.bandwidth() : 1)
+    return Math.ceil(
+      Math.max(
+        200,
+        Math.min(1200, (width * projectionRatio * (fx ? fx.scale.bandwidth() : 1)) / (fy ? fy.scale.bandwidth() : 1))
       )
     );
   }
-  const nfy = fy ? fy.scale.domain().length : 1;
   const ny = y ? (isOrdinalScale(y) ? y.scale.domain().length : Math.max(7, 17 / nfy)) : 1;
   return !!(y || fy) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;
 }

src/projection.js

@@ -110,52 +110,40 @@ export function Projection(
   return {stream: (s) => projection.stream(transform.stream(clip(s))), ratio};
 }
 
-// When a projection is specified, try to determine a good value for the
-// projection’s height, if it is a named projection. When we don’t have a way to
-// know, the golden ratio is our best guess.
-export function projectionAspectRatio({projection} = {}, geometry) {
-  projection = Projection(
-    {projection},
-    {width: 100, height: 300, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0}
-  );
-  if (projection == null) return geometry ? golden - 1 : 0;
-  return projection.ratio ?? golden - 1;
-}
-
 function namedProjection(projection) {
   switch (`${projection}`.toLowerCase()) {
     case "albers-usa":
-      return scaleProjection(geoAlbersUsa, 0.7463, 0.4673);
+      return scaleProjection(geoAlbersUsa, 0.7463, 0.4673, 610 / 975);
     case "albers":
-      return conicProjection(geoAlbers, 0.7463, 0.4673);
+      return conicProjection(geoAlbers, 0.7463, 0.4673, 610 / 975);
     case "azimuthal-equal-area":
-      return scaleProjection(geoAzimuthalEqualArea, 4, 4);
+      return scaleProjection(geoAzimuthalEqualArea, 4, 4, 1);
     case "azimuthal-equidistant":
-      return scaleProjection(geoAzimuthalEquidistant, tau, tau);
+      return scaleProjection(geoAzimuthalEquidistant, tau, tau, 1);
     case "conic-conformal":
       return conicProjection(geoConicConformal, tau, tau);
     case "conic-equal-area":
       return conicProjection(geoConicEqualArea, 6.1702, 2.9781);
     case "conic-equidistant":
       return conicProjection(geoConicEquidistant, 7.312, 3.6282);
     case "equal-earth":
-      return scaleProjection(geoEqualEarth, 5.4133, 2.6347);
+      return scaleProjection(geoEqualEarth, 5.4133, 2.6347, 0.4867);
     case "equirectangular":
-      return scaleProjection(geoEquirectangular, tau, pi);
+      return scaleProjection(geoEquirectangular, tau, pi, 0.5);
     case "gnomonic":
-      return scaleProjection(geoGnomonic, 3.4641, 3.4641);
+      return scaleProjection(geoGnomonic, 3.4641, 3.4641, 1);
     case "identity":
       return identity;
     case "reflect-y":
       return reflectY;
     case "mercator":
       return scaleProjection(geoMercator, tau, tau, 1);
     case "orthographic":
-      return scaleProjection(geoOrthographic, 2, 2);
+      return scaleProjection(geoOrthographic, 2, 2, 1);
     case "stereographic":
-      return scaleProjection(geoStereographic, 2, 2);
+      return scaleProjection(geoStereographic, 2, 2, 1);
     case "transverse-mercator":
-      return scaleProjection(geoTransverseMercator, tau, tau);
+      return scaleProjection(geoTransverseMercator, tau, tau, 1);
     default:
       throw new Error(`unknown projection type: ${projection}`);
   }
@@ -226,3 +214,15 @@ export function applyProjection(values, projection) {
     stream.point(x[i], y[i]);
   }
 }
+
+// When a projection is specified, try to determine a good value for the
+// projection’s height, if it is a named projection. When we don’t have a way to
+// know, the golden ratio is our best guess.
+export function projectionAspectRatio({projection} = {}, geometry) {
+  projection = Projection(
+    {projection},
+    {width: 100, height: 300, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0}
+  );
+  if (projection == null) return geometry ? golden - 1 : 0;
+  return projection.ratio ?? golden - 1;
+}

test/plots/index.js

@@ -181,6 +181,10 @@ export {default as projectionFitBertin1953} from "./projection-fit-bertin1953.js
 export {default as projectionFitConic} from "./projection-fit-conic.js";
 export {default as projectionFitIdentity} from "./projection-fit-identity.js";
 export {default as projectionFitUsAlbers} from "./projection-fit-us-albers.js";
+export {default as projectionHeightAlbers} from "./projection-height-albers.js";
+export {default as projectionHeightEqualEarth} from "./projection-height-equal-earth.js";
+export {default as projectionHeightMercator} from "./projection-height-mercator.js";
+export {default as projectionHeightOrthographic} from "./projection-height-orthographic.js";
 export {default as randomBins} from "./random-bins.js";
 export {default as randomBinsXY} from "./random-bins-xy.js";
 export {default as randomQuantile} from "./random-quantile.js";

test/plots/projection-height-albers.js

@@ -0,0 +1,21 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {mesh} from "topojson-client";
+
+export default async function () {
+  const [conus, countymesh] = await d3
+    .json("data/us-counties-10m.json")
+    .then((us) => [mesh(us, us.objects.states, (a, b) => a === b), mesh(us, us.objects.counties, (a, b) => a !== b)]);
+  return Plot.plot({
+    width: 975,
+    // expected height: 610,
+    projection: {
+      type: "albers-usa"
+    },
+    marks: [
+      Plot.geo(conus, {strokeWidth: 1.5}),
+      Plot.geo(countymesh, {strokeOpacity: 0.1}),
+      Plot.frame({stroke: "red"})
+    ]
+  });
+}

test/plots/projection-height-equal-earth.js

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {feature} from "topojson-client";
+
+export default async function () {
+  const world = await d3.json("data/countries-110m.json");
+  const land = feature(world, world.objects.land);
+  return Plot.plot({
+    facet: {data: [0, 1], x: [0, 1]},
+    projection: "equal-earth",
+    marks: [Plot.geo(land, {fill: "currentColor"}), Plot.graticule(), Plot.sphere(), Plot.frame({stroke: "red"})]
+  });
+}

test/plots/projection-height-mercator.js

@@ -0,0 +1,14 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {feature} from "topojson-client";
+
+export default async function () {
+  const world = await d3.json("data/countries-110m.json");
+  const land = feature(world, world.objects.land);
+  return Plot.plot({
+    width: 400,
+    facet: {data: [0, 1], y: [0, 1]},
+    projection: "mercator",
+    marks: [Plot.geo(land, {fill: "currentColor"}), Plot.graticule(), Plot.sphere(), Plot.frame({stroke: "red"})]
+  });
+}

test/plots/projection-height-orthographic.js

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {feature} from "topojson-client";
+
+export default async function () {
+  const world = await d3.json("data/countries-110m.json");
+  const land = feature(world, world.objects.land);
+  return Plot.plot({
+    facet: {data: [0, 1, 2, 3], x: (d) => d % 2, y: (d) => d >> 1},
+    projection: "orthographic",
+    marks: [Plot.geo(land, {fill: "currentColor"}), Plot.graticule(), Plot.sphere(), Plot.frame({stroke: "red"})]
+  });
+}