handle collapsed domains (#470)

* handle collapsed domains

* move isCollapsed

* destructure style

Author: mbostock

src/facet.js

@@ -72,7 +72,7 @@ class Facet extends Mark {
     }
     return {index, channels: [...channels, ...subchannels]};
   }
-  render(index, scales, channels, dimensions, axes) {
+  render(I, scales, channels, dimensions, axes) {
     const {marks, marksChannels, marksIndex, marksIndexByFacet} = this;
     const {fx, fy} = scales;
     const fyMargins = fy && {marginTop: 0, marginBottom: 0, height: fy.bandwidth()};

src/marks/bar.js

@@ -1,6 +1,7 @@
 import {create} from "d3";
 import {filter} from "../defined.js";
 import {Mark, number} from "../mark.js";
+import {isCollapsed} from "../scales.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr, applyChannelStyles} from "../style.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
@@ -75,13 +76,13 @@ export class BarX extends AbstractBar {
   _positions({x1: X1, x2: X2, y: Y}) {
     return [X1, X2, Y];
   }
-  _x(scales, {x1: X1, x2: X2}) {
+  _x({x}, {x1: X1, x2: X2}, {marginLeft}) {
     const {insetLeft} = this;
-    return i => Math.min(X1[i], X2[i]) + insetLeft;
+    return isCollapsed(x) ? marginLeft + insetLeft : i => Math.min(X1[i], X2[i]) + insetLeft;
   }
-  _width(scales, {x1: X1, x2: X2}) {
+  _width({x}, {x1: X1, x2: X2}, {marginRight, marginLeft, width}) {
     const {insetLeft, insetRight} = this;
-    return i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight);
+    return isCollapsed(x) ? width - marginRight - marginLeft - insetLeft - insetRight : i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight);
   }
 }
 
@@ -104,13 +105,13 @@ export class BarY extends AbstractBar {
   _positions({y1: Y1, y2: Y2, x: X}) {
     return [Y1, Y2, X];
   }
-  _y(scales, {y1: Y1, y2: Y2}) {
+  _y({y}, {y1: Y1, y2: Y2}, {marginTop}) {
     const {insetTop} = this;
-    return i => Math.min(Y1[i], Y2[i]) + insetTop;
+    return isCollapsed(y) ? marginTop + insetTop : i => Math.min(Y1[i], Y2[i]) + insetTop;
   }
-  _height(scales, {y1: Y1, y2: Y2}) {
+  _height({y}, {y1: Y1, y2: Y2}, {marginTop, marginBottom, height}) {
     const {insetTop, insetBottom} = this;
-    return i => Math.max(0, Math.abs(Y2[i] - Y1[i]) - insetTop - insetBottom);
+    return isCollapsed(y) ? height - marginTop - marginBottom - insetTop - insetBottom : i => Math.max(0, Math.abs(Y2[i] - Y1[i]) - insetTop - insetBottom);
   }
 }
 

src/marks/frame.js

@@ -22,20 +22,17 @@ export class Frame extends Mark {
     this.insetBottom = number(insetBottom);
     this.insetLeft = number(insetLeft);
   }
-  render(
-    index,
-    scales,
-    channels,
-    {marginTop, marginRight, marginBottom, marginLeft, width, height}
-  ) {
+  render(I, scales, channels, dimensions) {
+    const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
+    const {insetTop, insetRight, insetBottom, insetLeft} = this;
     return create("svg:rect")
         .call(applyIndirectStyles, this)
         .call(applyDirectStyles, this)
         .call(applyTransform, null, null, 0.5, 0.5)
-        .attr("x", marginLeft + this.insetLeft)
-        .attr("y", marginTop + this.insetTop)
-        .attr("width", width - marginLeft - marginRight - this.insetLeft - this.insetRight)
-        .attr("height", height - marginTop - marginBottom - this.insetTop - this.insetBottom)
+        .attr("x", marginLeft + insetLeft)
+        .attr("y", marginTop + insetTop)
+        .attr("width", width - marginLeft - marginRight - insetLeft - insetRight)
+        .attr("height", height - marginTop - marginBottom - insetTop - insetBottom)
       .node();
   }
 }

src/marks/rect.js

@@ -1,6 +1,7 @@
 import {create} from "d3";
 import {filter} from "../defined.js";
 import {Mark, number} from "../mark.js";
+import {isCollapsed} from "../scales.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr, applyChannelStyles} from "../style.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
@@ -51,10 +52,10 @@ export class Rect extends Mark {
           .data(index)
           .join("rect")
             .call(applyDirectStyles, this)
-            .attr("x", X1 && X2 ? i => Math.min(X1[i], X2[i]) + insetLeft : marginLeft + insetLeft)
-            .attr("y", Y1 && Y2 ? i => Math.min(Y1[i], Y2[i]) + insetTop : marginTop + insetTop)
-            .attr("width", X1 && X2 ? i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight) : width - marginRight - marginLeft - insetRight - insetLeft)
-            .attr("height", Y1 && Y2 ? i => Math.max(0, Math.abs(Y1[i] - Y2[i]) - insetTop - insetBottom) : height - marginTop - marginBottom - insetTop - insetBottom)
+            .attr("x", X1 && X2 && !isCollapsed(x) ? i => Math.min(X1[i], X2[i]) + insetLeft : marginLeft + insetLeft)
+            .attr("y", Y1 && Y2 && !isCollapsed(y) ? i => Math.min(Y1[i], Y2[i]) + insetTop : marginTop + insetTop)
+            .attr("width", X1 && X2 && !isCollapsed(x) ? i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight) : width - marginRight - marginLeft - insetRight - insetLeft)
+            .attr("height", Y1 && Y2 && !isCollapsed(y) ? i => Math.max(0, Math.abs(Y1[i] - Y2[i]) - insetTop - insetBottom) : height - marginTop - marginBottom - insetTop - insetBottom)
             .call(applyAttr, "rx", rx)
             .call(applyAttr, "ry", ry)
             .call(applyChannelStyles, channels))

src/marks/rule.js

@@ -1,6 +1,7 @@
 import {create} from "d3";
 import {filter} from "../defined.js";
 import {Mark, identity, number} from "../mark.js";
+import {isCollapsed} from "../scales.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, applyChannelStyles} from "../style.js";
 
 const defaults = {
@@ -31,13 +32,10 @@ export class RuleX extends Mark {
     this.insetTop = number(insetTop);
     this.insetBottom = number(insetBottom);
   }
-  render(
-    I,
-    {x, y},
-    channels,
-    {width, height, marginTop, marginRight, marginLeft, marginBottom}
-  ) {
+  render(I, {x, y}, channels, dimensions) {
     const {x: X, y1: Y1, y2: Y2} = channels;
+    const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
+    const {insetTop, insetBottom} = this;
     const index = filter(I, X, Y1, Y2);
     return create("svg:g")
         .call(applyIndirectStyles, this)
@@ -48,8 +46,8 @@ export class RuleX extends Mark {
             .call(applyDirectStyles, this)
             .attr("x1", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
             .attr("x2", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
-            .attr("y1", Y1 ? i => Y1[i] + this.insetTop : marginTop + this.insetTop)
-            .attr("y2", Y2 ? (y.bandwidth ? i => Y2[i] + y.bandwidth() - this.insetBottom : i => Y2[i] - this.insetBottom) : height - marginBottom - this.insetBottom)
+            .attr("y1", Y1 && !isCollapsed(y) ? i => Y1[i] + insetTop : marginTop + insetTop)
+            .attr("y2", Y2 && !isCollapsed(y) ? (y.bandwidth ? i => Y2[i] + y.bandwidth() - insetBottom : i => Y2[i] - insetBottom) : height - marginBottom - insetBottom)
             .call(applyChannelStyles, channels))
       .node();
   }
@@ -78,13 +76,10 @@ export class RuleY extends Mark {
     this.insetRight = number(insetRight);
     this.insetLeft = number(insetLeft);
   }
-  render(
-    I,
-    {x, y},
-    channels,
-    {width, height, marginTop, marginRight, marginLeft, marginBottom}
-  ) {
+  render(I, {x, y}, channels, dimensions) {
     const {y: Y, x1: X1, x2: X2} = channels;
+    const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
+    const {insetLeft, insetRight} = this;
     const index = filter(I, Y, X1, X2);
     return create("svg:g")
         .call(applyIndirectStyles, this)
@@ -93,8 +88,8 @@ export class RuleY extends Mark {
           .data(index)
           .join("line")
             .call(applyDirectStyles, this)
-            .attr("x1", X1 ? i => X1[i] + this.insetLeft : marginLeft + this.insetLeft)
-            .attr("x2", X2 ? (x.bandwidth ? i => X2[i] + x.bandwidth() - this.insetRight : i => X2[i] - this.insetRight) : width - marginRight - this.insetRight)
+            .attr("x1", X1 && !isCollapsed(x) ? i => X1[i] + insetLeft : marginLeft + insetLeft)
+            .attr("x2", X2 && !isCollapsed(x) ? (x.bandwidth ? i => X2[i] + x.bandwidth() - insetRight : i => X2[i] - insetRight) : width - marginRight - insetRight)
             .attr("y1", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
             .attr("y2", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
             .call(applyChannelStyles, channels))

src/marks/text.js

@@ -45,13 +45,9 @@ export class Text extends Mark {
     this.dx = string(dx);
     this.dy = string(dy);
   }
-  render(
-    I,
-    {x, y},
-    channels,
-    {width, height, marginTop, marginRight, marginBottom, marginLeft}
-  ) {
+  render(I, {x, y}, channels, dimensions) {
     const {x: X, y: Y, rotate: R, text: T, fontSize: FS} = channels;
+    const {width, height, marginTop, marginRight, marginBottom, marginLeft} = dimensions;
     const {rotate} = this;
     const index = filter(I, X, Y, R).filter(i => nonempty(T[i]));
     const cx = (marginLeft + width - marginRight) / 2;

src/scales.js

@@ -129,3 +129,18 @@ export function applyScales(channels = [], scales) {
   }
   return values;
 }
+
+// Certain marks have special behavior if a scale is collapsed, i.e. if the
+// domain is degenerate and represents only a single value such as [3, 3]; for
+// example, a rect will span the full extent of the chart along a collapsed
+// dimension (whereas a dot will simply be drawn in the center).
+export function isCollapsed(scale) {
+  const domain = scale.domain();
+  const value = scale(domain[0]);
+  for (let i = 1, n = domain.length; i < n; ++i) {
+    if (scale(domain[i]) - value) {
+      return false;
+    }
+  }
+  return true;
+}

test/output/singleValueBar.svg

@@ -88,6 +88,8 @@ export {default as sfTemperatureBandArea} from "./sf-temperature-band-area.js";
 export {default as simpsonsRatings} from "./simpsons-ratings.js";
 export {default as simpsonsRatingsDots} from "./simpsons-ratings-dots.js";
 export {default as simpsonsViews} from "./simpsons-views.js";
+export {default as singleValueBar} from "./single-value-bar.js";
+export {default as singleValueBin} from "./single-value-bin.js";
 export {default as softwareVersions} from "./software-versions.js";
 export {default as stackedBar} from "./stacked-bar.js";
 export {default as stackedRect} from "./stacked-rect.js";

test/output/singleValueBin.svg

@@ -0,0 +1,10 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  return Plot.plot({
+    marks: [
+      Plot.barY({length: 1}, {x: ["foo"], y1: [0], y2: [0]}),
+      Plot.ruleX(["foo"], {stroke: "red", y1: [0], y2: [0]})
+    ]
+  });
+}

test/plots/index.js

@@ -0,0 +1,5 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  return Plot.rectY([3], Plot.binX()).plot();
+}