projection support for x1/y1 x2/y2 marks (#1139)

* support for x1/y1 x2/y2 marks

* Update README.md

* remove projectionParty

* stricter, and improve error messages

* revert change to isCollapsed

* pRetTIEr

* simpler

Co-authored-by: Mike Bostock <mbostock@gmail.com>

Author: Fil

README.md

@@ -313,7 +313,7 @@ Top-level options are also supported as shorthand: **grid** (for *x* and *y* onl
 
 ### Projection options
 
-The top-level **projection** option applies a two-dimensional (often geographic) projection in place of *x* and *y* scales. It is typically used in conjunction with a [geo mark](#geo) to produce a map, but can be used with any mark that supports *x* and *y* channels, such as [dot](#dot) and [text](#text). The following built-in named projections are supported:
+The top-level **projection** option applies a two-dimensional (often geographic) projection in place of *x* and *y* scales. It is typically used in conjunction with a [geo mark](#geo) to produce a map, but can be used with any mark that supports *x* and *y* channels, such as [dot](#dot), [text](#text), [arrow](#arrow), and [rect](#rect). For marks that use *x1*, *y1*, *x2*, and *y2* channels, the two projected points are ⟨*x1*, *y1*⟩ and ⟨*x2*, *y2*⟩; otherwise, the projected point is ⟨*x*, *y*⟩. The following built-in named projections are supported:
 
 * *equirectangular* - the equirectangular, or *plate carrée*, projection
 * *orthographic* - the orthographic projection

src/channel.js

@@ -1,6 +1,6 @@
 import {ascending, descending, rollup, sort} from "d3";
 import {first, isIterable, labelof, map, maybeValue, range, valueof} from "./options.js";
-import {applyProjection} from "./projection.js";
+import {maybeApplyProjection} from "./projection.js";
 import {registry} from "./scales/index.js";
 import {maybeReduce} from "./transforms/group.js";
 
@@ -26,33 +26,28 @@ export function Channels(descriptors, data) {
 
 // TODO Use Float64Array for scales with numeric ranges, e.g. position?
 export function valueObject(channels, scales, {projection}) {
-  let x, y; // names of channels bound to x and y scale
-
   const values = Object.fromEntries(
     Object.entries(channels).map(([name, {scale: scaleName, value}]) => {
       let scale;
       if (scaleName !== undefined) {
-        if (scaleName === "x") x = x === undefined ? name : "*";
-        else if (scaleName === "y") y = y === undefined ? name : "*";
         scale = scales[scaleName];
       }
       return [name, scale === undefined ? value : map(value, scale)];
     })
   );
 
-  // If there is a projection, and there are both x and y channels, and those x
-  // and y channels are associated with the x and y scale respectively (and not
-  // already in screen coordinates as with an initializer), then apply the
-  // projection, replacing the x and y values. Note that the x and y scales
-  // themselves don’t exist if there is a projection, but whether the channels
-  // are associated with scales still determines whether the projection should
-  // apply; think of the projection as a combination xy-scale.
+  // If there is a projection, and there are both x and y channels (or x1 and
+  // y1, or x2 andy2 channels), and those channels are associated with the x and
+  // y scale respectively (and not already in screen coordinates as with an
+  // initializer), then apply the projection, replacing the x and y values. Note
+  // that the x and y scales themselves don’t exist if there is a projection,
+  // but whether the channels are associated with scales still determines
+  // whether the projection should apply; think of the projection as a
+  // combination xy-scale.
   if (projection) {
-    if (x === "x" && y === "y") {
-      applyProjection(values, projection);
-    } else if (x || y) {
-      throw new Error("projection requires x and y channels");
-    }
+    maybeApplyProjection("x", "y", channels, values, projection);
+    maybeApplyProjection("x1", "y1", channels, values, projection);
+    maybeApplyProjection("x2", "y2", channels, values, projection);
   }
 
   return values;

src/marks/rect.js

@@ -55,6 +55,7 @@ export class Rect extends Mark {
     const {x, y} = scales;
     const {x1: X1, y1: Y1, x2: X2, y2: Y2} = channels;
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
+    const {projection} = context;
     const {insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions, context)
@@ -66,17 +67,27 @@ export class Rect extends Mark {
           .enter()
           .append("rect")
           .call(applyDirectStyles, this)
-          .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(
+            "x",
+            X1 && X2 && (projection || !isCollapsed(x))
+              ? (i) => Math.min(X1[i], X2[i]) + insetLeft
+              : marginLeft + insetLeft
+          )
+          .attr(
+            "y",
+            Y1 && Y2 && (projection || !isCollapsed(y))
+              ? (i) => Math.min(Y1[i], Y2[i]) + insetTop
+              : marginTop + insetTop
+          )
           .attr(
             "width",
-            X1 && X2 && !isCollapsed(x)
+            X1 && X2 && (projection || !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)
+            Y1 && Y2 && (projection || !isCollapsed(y))
               ? (i) => Math.max(0, Math.abs(Y1[i] - Y2[i]) - insetTop - insetBottom)
               : height - marginTop - marginBottom - insetTop - insetBottom
           )

src/projection.js

@@ -202,11 +202,25 @@ function conicProjection(createProjection, kx, ky) {
   };
 }
 
-export function applyProjection(values, projection) {
-  const {x, y} = values;
+// Applies a point-wise projection to the given paired x and y channels.
+export function maybeApplyProjection(cx, cy, channels, values, projection) {
+  const x = channels[cx] && channels[cx].scale === "x";
+  const y = channels[cy] && channels[cy].scale === "y";
+  if (x && y) {
+    applyProjection(cx, cy, values, projection);
+  } else if (x) {
+    throw new Error(`projection requires paired x and y channels; ${cx} is missing ${cy}`);
+  } else if (y) {
+    throw new Error(`projection requires paired x and y channels; ${cy} is missing ${cx}`);
+  }
+}
+
+function applyProjection(cx, cy, values, projection) {
+  const x = values[cx];
+  const y = values[cy];
   const n = x.length;
-  const X = (values.x = new Float64Array(n).fill(NaN));
-  const Y = (values.y = new Float64Array(n).fill(NaN));
+  const X = (values[cx] = new Float64Array(n).fill(NaN));
+  const Y = (values[cy] = new Float64Array(n).fill(NaN));
   let i;
   const stream = projection.stream({
     point(x, y) {

test/marks/rule-test.js

@@ -192,5 +192,8 @@ it("ruleY(data, {x1, x2, y}) specifies x1, x2, y", () => {
 });
 
 it("rule() is incompatible with a projection", () => {
-  assert.throws(() => Plot.ruleX([]).plot({projection: {stream: () => ({})}}), /projection requires x and y channels/);
+  assert.throws(
+    () => Plot.ruleX([]).plot({projection: {stream: () => ({})}}),
+    /projection requires paired x and y channels; x is missing y/
+  );
 });

test/output/boundingBoxes.svg

@@ -0,0 +1,40 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {geoChamberlinAfrica} from "d3-geo-projection";
+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);
+  const countries = feature(world, world.objects.countries).features;
+  return Plot.plot({
+    width: 600,
+    height: 600,
+    projection: {
+      type: geoChamberlinAfrica,
+      domain: {
+        type: "MultiPoint",
+        coordinates: [
+          [-20, 0],
+          [55, 0]
+        ]
+      }
+    },
+    marks: [
+      Plot.geo(land),
+      Plot.rect(countries, {
+        transform: (data, facets) => ({
+          data: data.map((c) => d3.geoBounds(c).flat()), // returns [x1, y1, x2, y2]
+          facets
+        }),
+        x1: "0",
+        y1: "1",
+        x2: "2",
+        y2: "3",
+        stroke: "green"
+      }),
+      Plot.arrow([1], {x1: -10, y1: 10, x2: 20, y2: -32, bend: true, stroke: "red"}),
+      Plot.sphere()
+    ]
+  });
+}

test/plots/bounding-boxes.js

@@ -29,6 +29,7 @@ export {default as beagle} from "./beagle.js";
 export {default as beckerBarley} from "./becker-barley.js";
 export {default as binStrings} from "./bin-strings.js";
 export {default as binTimestamps} from "./bin-timestamps.js";
+export {default as boundingBoxes} from "./bounding-boxes.js";
 export {default as boxplot} from "./boxplot.js";
 export {default as caltrain} from "./caltrain.js";
 export {default as caltrainDirection} from "./caltrain-direction.js";