projection autoheight

Author: Fil

src/dimensions.js

@@ -1,4 +1,4 @@
-import {hasProjection} from "./projection.js";
+import {projectionAspectRatio} from "./projection.js";
 import {isOrdinalScale} from "./scales.js";
 import {offset} from "./style.js";
 
@@ -52,7 +52,7 @@ export function Dimensions(scales, geometry, axes, options = {}) {
   // specified explicitly, adjust the automatic height accordingly.
   let {
     width = 640,
-    height = autoHeight(scales, geometry || hasProjection(options)) +
+    height = autoHeight(scales, projectionAspectRatio(options, geometry), width - marginLeft - marginRight) +
       Math.max(0, marginTop - marginTopDefault + marginBottom - marginBottomDefault)
   } = options;
 
@@ -74,8 +74,17 @@ export function Dimensions(scales, geometry, axes, options = {}) {
   };
 }
 
-function autoHeight({y, fy, fx}, geometry) {
+function autoHeight({y, fy, fx}, projectionRatio, width) {
+  if (projectionRatio > 0) {
+    return Math.max(
+      200,
+      Math.min(
+        1200,
+        Math.ceil((fx ? fx.scale.bandwidth() : 1) * width * projectionRatio) / (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)) : geometry ? 17 : 1;
-  return !!(y || fy || geometry) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;
+  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

@@ -20,6 +20,10 @@ import {
 import {constant, isObject} from "./options.js";
 import {warn} from "./warnings.js";
 
+const pi = Math.PI;
+const tau = 2 * pi;
+const golden = 1.618;
+
 export function Projection(
   {
     projection,
@@ -76,6 +80,7 @@ export function Projection(
   let transform;
 
   // If a domain is specified, fit the projection to the frame.
+  let ratio = projection.ratio;
   if (domain != null) {
     const [[x0, y0], [x1, y1]] = geoPath(projection).bounds(domain);
     const k = Math.min(dx / (x1 - x0), dy / (y1 - y0));
@@ -87,6 +92,7 @@ export function Projection(
           this.stream.point(x * k + tx, y * k + ty);
         }
       });
+      ratio = Math.max(0.5, Math.min(golden, (y1 - y0) / (x1 - x0)));
     } else {
       warn(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
     }
@@ -101,20 +107,21 @@ export function Projection(
           }
         });
 
-  return {stream: (s) => projection.stream(transform.stream(clip(s)))};
+  return {stream: (s) => projection.stream(transform.stream(clip(s))), ratio};
 }
 
-export function hasProjection({projection} = {}) {
-  if (projection == null) return false;
-  if (typeof projection.stream === "function") return true; // d3 projection
-  if (isObject(projection)) ({type: projection} = projection);
-  if (typeof projection !== "function") projection = namedProjection(projection);
-  return projection != null;
+// 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;
 }
 
-const pi = Math.PI;
-const tau = 2 * pi;
-
 function namedProjection(projection) {
   switch (`${projection}`.toLowerCase()) {
     case "albers-usa":
@@ -142,7 +149,7 @@ function namedProjection(projection) {
     case "reflect-y":
       return reflectY;
     case "mercator":
-      return scaleProjection(geoMercator, tau, tau);
+      return scaleProjection(geoMercator, tau, tau, 1);
     case "orthographic":
       return scaleProjection(geoOrthographic, 2, 2);
     case "stereographic":
@@ -165,14 +172,15 @@ function maybePostClip(clip, x1, y1, x2, y2) {
   }
 }
 
-function scaleProjection(createProjection, kx, ky) {
+function scaleProjection(createProjection, kx, ky, ratio) {
   return ({width, height, rotate, precision = 0.15, clip}) => {
     const projection = createProjection();
     if (precision != null) projection.precision?.(precision);
     if (rotate != null) projection.rotate?.(rotate);
     if (typeof clip === "number") projection.clipAngle?.(clip);
     projection.scale(Math.min(width / kx, height / ky));
     projection.translate([width / 2, height / 2]);
+    if (ratio > 0) projection.ratio = ratio;
     return projection;
   };
 }

test/plots/projection-fit-conic.js

@@ -6,6 +6,8 @@ export default async function () {
   const world = await d3.json("data/countries-110m.json");
   const land = feature(world, world.objects.land);
   return Plot.plot({
+    width: 640,
+    height: 400,
     projection: {
       type: "conic-equal-area",
       parallels: [-42, -5],