daspect: set the default height

closes #836

Author: Fil

README.md

@@ -201,6 +201,8 @@ Quantitative scales can be further customized with additional options:
 
 Clamping is typically used in conjunction with setting an explicit domain since if the domain is inferred, no values will be outside the domain. Clamping is useful for focusing on a subset of the data while ensuring that extreme values remain visible, but use caution: clamped values may need an annotation to avoid misinterpretation. Top-level **clamp** and **nice** options are supported as shorthand for setting *scale*.clamp and *scale*.nice on all scales.
 
+The top-level **daspect** option, if specified, computes a default height such that a variation of 1 unit in the *x* dimension roughly corresponds to the same number of pixels as a variation of *daspect* unit in the *y* dimension. Note: for an exact data aspect ratio, set *fx* and *fy*’s round option to false.
+
 The *scale*.**transform** option allows you to apply a function to all values before they are passed through the scale. This is convenient for transforming a scale’s data, say to convert to thousands or between temperature units.
 
 ```js

src/dimensions.js

@@ -11,7 +11,8 @@ export function Dimensions(
   },
   {
     width = 640,
-    height = autoHeight(scales),
+    daspect,
+    height,
     facet: {
       margin: facetMargin,
       marginTop: facetMarginTop = facetMargin !== undefined ? facetMargin : fxAxis === "top" ? 30 : 0,
@@ -28,7 +29,7 @@ export function Dimensions(
 ) {
   return {
     width,
-    height,
+    height: height !== undefined ? height : autoHeight(scales, {width, marginLeft, marginRight, marginTop, marginBottom}, daspect),
     marginTop,
     marginRight,
     marginBottom,
@@ -40,8 +41,17 @@ export function Dimensions(
   };
 }
 
-function autoHeight({y, fy, fx}) {
+function autoHeight({x, y, fy, fx}, {width, marginLeft, marginRight, marginTop, marginBottom}, daspect) {
   const nfy = fy ? fy.scale.domain().length : 1;
   const ny = y ? (isOrdinalScale(y) ? y.scale.domain().length : Math.max(7, 17 / nfy)) : 1;
+
+  // If a data aspect ratio is given, tweak the height to match
+  if (daspect != null && daspect !== false) {
+    if (!(isFinite(daspect) && daspect > 0)) throw new Error(`invalid data aspect ratio: ${daspect}`);
+    const ratio = Math.abs((y.domain[1] - y.domain[0]) / (x.domain[1] - x.domain[0]) / daspect);
+    const trueWidth = (fx ? fx.scale.bandwidth() : 1) * (width - marginLeft - marginRight);
+    return (ratio * trueWidth) / (fy ? fy.scale.bandwidth() : 1) + marginTop + marginBottom;
+  }
+
   return !!(y || fy) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;
 }