autoHeight

the height for projections (including the null projection when Plot.geo is used) is computed for a target frame with an aspect ratio that defaults to the golden ratio. When using facets, the computation takes into account the number of rows and columns, with similar limits to what total size is acceptable (1260px).

The projection's preferred aspect ratio is adapted for a few named projections. For example "equal-earth" and "equirectangular" are wider than tall, "mercator" and a few azimuthal projections default to a square.

closes #1136
supersedes #1162

Author: Fil

src/dimensions.js

@@ -1,4 +1,4 @@
-import {hasProjection} from "./projection.js";
+import {projectionFitRatio} from "./projection.js";
 import {isOrdinalScale} from "./scales.js";
 import {offset} from "./style.js";
 
@@ -49,11 +49,17 @@ export function Dimensions(scales, geometry, axes, options = {}) {
   marginLeft = +marginLeft;
 
   // Compute the outer dimensions of the plot. If the top and bottom margins are
-  // specified explicitly, adjust the automatic height accordingly.
+  // specified explicitly, adjust the automatic height accordingly. If a
+  // projection is specified, base the computation on the projection’s default
+  // fit ratio.
   let {
     width = 640,
-    height = autoHeight(scales, geometry || hasProjection(options)) +
-      Math.max(0, marginTop - marginTopDefault + marginBottom - marginBottomDefault)
+    height = (autoHeightProjection(
+      scales,
+      projectionFitRatio(options, geometry),
+      640 - marginLeftDefault - marginRightDefault,
+      marginTopDefault + marginBottomDefault
+    ) ?? autoHeight(scales)) + Math.max(0, marginTop - marginTopDefault + marginBottom - marginBottomDefault)
   } = options;
 
   // Coerce the width and height.
@@ -74,8 +80,19 @@ export function Dimensions(scales, geometry, axes, options = {}) {
   };
 }
 
-function autoHeight({y, fy, fx}, geometry) {
+function autoHeight({y, fy, fx}) {
   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;
+}
+
+function autoHeightProjection({fy, fx}, ratio, width, marginY) {
+  if (ratio > 0) {
+    return Math.round(
+      Math.max(
+        140,
+        Math.min(1260, (width * (fx ? fx.scale.bandwidth() : 1) * ratio) / (fy ? fy.scale.bandwidth() : 1))
+      ) + marginY
+    );
+  }
 }

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,
@@ -57,8 +61,8 @@ export function Projection(
     if (projection == null) return;
   }
 
-  // For named projections, retrieve the corresponding projection initializer.
-  if (typeof projection !== "function") projection = namedProjection(projection);
+  // For named projections, retrieve the corresponding projection initializer and default aspect ratio.
+  if (typeof projection !== "function") ({projection} = namedProjection(projection));
 
   // Compute the frame dimensions and invoke the projection initializer.
   const {width, height, marginLeft, marginRight, marginTop, marginBottom} = dimensions;
@@ -104,51 +108,40 @@ export function Projection(
   return {stream: (s) => projection.stream(transform.stream(clip(s)))};
 }
 
-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;
-}
-
-const pi = Math.PI;
-const tau = 2 * pi;
-
 function namedProjection(projection) {
   switch (`${projection}`.toLowerCase()) {
     case "albers-usa":
-      return scaleProjection(geoAlbersUsa, 0.7463, 0.4673);
+      return {projection: scaleProjection(geoAlbersUsa, 0.7463, 0.4673), ratio: 610 / 975};
     case "albers":
-      return conicProjection(geoAlbers, 0.7463, 0.4673);
+      return {projection: conicProjection(geoAlbers, 0.7463, 0.4673), ratio: 610 / 975};
     case "azimuthal-equal-area":
-      return scaleProjection(geoAzimuthalEqualArea, 4, 4);
+      return {projection: scaleProjection(geoAzimuthalEqualArea, 4, 4), ratio: 1};
     case "azimuthal-equidistant":
-      return scaleProjection(geoAzimuthalEquidistant, tau, tau);
+      return {projection: scaleProjection(geoAzimuthalEquidistant, tau, tau), ratio: 1};
     case "conic-conformal":
-      return conicProjection(geoConicConformal, tau, tau);
+      return {projection: conicProjection(geoConicConformal, tau, tau)};
     case "conic-equal-area":
-      return conicProjection(geoConicEqualArea, 6.1702, 2.9781);
+      return {projection: conicProjection(geoConicEqualArea, 6.1702, 2.9781)};
     case "conic-equidistant":
-      return conicProjection(geoConicEquidistant, 7.312, 3.6282);
+      return {projection: conicProjection(geoConicEquidistant, 7.312, 3.6282)};
     case "equal-earth":
-      return scaleProjection(geoEqualEarth, 5.4133, 2.6347);
+      return {projection: scaleProjection(geoEqualEarth, 5.4133, 2.6347), ratio: 0.4867};
     case "equirectangular":
-      return scaleProjection(geoEquirectangular, tau, pi);
+      return {projection: scaleProjection(geoEquirectangular, tau, pi), ratio: 0.5};
     case "gnomonic":
-      return scaleProjection(geoGnomonic, 3.4641, 3.4641);
+      return {projection: scaleProjection(geoGnomonic, 3.4641, 3.4641)};
     case "identity":
-      return identity;
+      return {projection: identity};
     case "reflect-y":
-      return reflectY;
+      return {projection: reflectY};
     case "mercator":
-      return scaleProjection(geoMercator, tau, tau);
+      return {projection: scaleProjection(geoMercator, tau, tau), ratio: 1};
     case "orthographic":
-      return scaleProjection(geoOrthographic, 2, 2);
+      return {projection: scaleProjection(geoOrthographic, 2, 2), ratio: 1};
     case "stereographic":
-      return scaleProjection(geoStereographic, 2, 2);
+      return {projection: scaleProjection(geoStereographic, 2, 2)};
     case "transverse-mercator":
-      return scaleProjection(geoTransverseMercator, tau, tau);
+      return {projection: scaleProjection(geoTransverseMercator, tau, tau), ratio: 1};
     default:
       throw new Error(`unknown projection type: ${projection}`);
   }
@@ -232,3 +225,15 @@ function applyProjection(cx, cy, 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 projectionFitRatio({projection} = {}, geometry) {
+  if (isObject(projection)) projection = projection.type;
+  if (typeof projection === "string") {
+    const {ratio} = namedProjection(projection);
+    if (ratio) return ratio;
+  }
+  return geometry ? golden - 1 : 0;
+}

test/output/projectionHeightAlbers.svg

@@ -182,6 +182,11 @@ 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 projectionHeightGeometry} from "./projection-height-geometry.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/output/projectionHeightEqualEarth.svg

@@ -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],

test/output/projectionHeightGeometry.svg

@@ -0,0 +1,19 @@
+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({
+    projection: {
+      type: "albers-usa"
+    },
+    marks: [
+      Plot.geo(conus, {strokeWidth: 1.5}),
+      Plot.geo(countymesh, {strokeOpacity: 0.1}),
+      Plot.frame({stroke: "red", strokeDasharray: 4})
+    ]
+  });
+}