curve: "projection" (#1156)

* curve: "geodesic" for Plot.line

closes #1146

* Line handles the "sphere" curve to follow great circles on spherical projections.

* fix filtering, input normalization

* Update README

* curve: "projection"

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

README.md

@@ -2836,8 +2836,9 @@ The following named curve methods are supported:
 * *step* - a piecewise constant function where *y* changes at the midpoint of *x*
 * *step-after* - a piecewise constant function where *y* changes after *x*
 * *step-before* - a piecewise constant function where *x* changes after *y*
+* *projection* - use the (possibly spherical) [projection](#projection-options)
 
-If *curve* is a function, it will be invoked with a given *context* in the same fashion as a [D3 curve factory](https://github.com/d3/d3-shape/blob/main/README.md#custom-curves).
+If *curve* is a function, it will be invoked with a given *context* in the same fashion as a [D3 curve factory](https://github.com/d3/d3-shape/blob/main/README.md#custom-curves). The *projection* curve is only available for the [line mark](#line) and is typically used in conjunction with a spherical [projection](#projection-options) to interpolate along [geodesics](https://en.wikipedia.org/wiki/Geodesic).
 
 The tension option only has an effect on bundle, cardinal and Catmull–Rom splines (*bundle*, *cardinal*, *cardinal-open*, *cardinal-closed*, *catmull-rom*, *catmull-rom-open*, and *catmull-rom-closed*). For bundle splines, it corresponds to [beta](https://github.com/d3/d3-shape/blob/main/README.md#curveBundle_beta); for cardinal splines, [tension](https://github.com/d3/d3-shape/blob/main/README.md#curveCardinal_tension); for Catmull–Rom splines, [alpha](https://github.com/d3/d3-shape/blob/main/README.md#curveCatmullRom_alpha).
 

src/marks/line.js

@@ -1,8 +1,9 @@
-import {line as shapeLine} from "d3";
+import {geoPath, line as shapeLine} from "d3";
 import {create} from "../context.js";
 import {Curve} from "../curve.js";
 import {indexOf, identity, maybeTuple, maybeZ} from "../options.js";
 import {Mark} from "../plot.js";
+import {coerceNumbers} from "../scales.js";
 import {
   applyDirectStyles,
   applyIndirectStyles,
@@ -23,28 +24,40 @@ const defaults = {
   strokeMiterlimit: 1
 };
 
+const curveProjection = Symbol("projection");
+
+// For the “projection” curve, return a symbol instead of a curve
+// implementation; we’ll use d3.geoPath instead of d3.line to render.
+function LineCurve({curve, tension}) {
+  return typeof curve !== "function" && `${curve}`.toLowerCase() === "projection"
+    ? curveProjection
+    : Curve(curve, tension);
+}
+
 export class Line extends Mark {
   constructor(data, options = {}) {
-    const {x, y, z, curve, tension} = options;
+    const {x, y, z} = options;
+    const curve = LineCurve(options);
     super(
       data,
       {
-        x: {value: x, scale: "x"},
-        y: {value: y, scale: "y"},
+        x: {value: x, scale: curve === curveProjection ? undefined : "x"}, // unscaled if projected
+        y: {value: y, scale: curve === curveProjection ? undefined : "y"}, // unscaled if projected
         z: {value: maybeZ(options), optional: true}
       },
       options,
       defaults
     );
     this.z = z;
-    this.curve = Curve(curve, tension);
+    this.curve = curve;
     markers(this, options);
   }
   filter(index) {
     return index;
   }
   render(index, scales, channels, dimensions, context) {
     const {x: X, y: Y} = channels;
+    const {curve} = this;
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
@@ -59,17 +72,39 @@ export class Line extends Mark {
           .call(applyGroupedMarkers, this, channels)
           .attr(
             "d",
-            shapeLine()
-              .curve(this.curve)
-              .defined((i) => i >= 0)
-              .x((i) => X[i])
-              .y((i) => Y[i])
+            curve === curveProjection
+              ? sphereLine(context.projection, X, Y)
+              : shapeLine()
+                  .curve(curve)
+                  .defined((i) => i >= 0)
+                  .x((i) => X[i])
+                  .y((i) => Y[i])
           )
       )
       .node();
   }
 }
 
+function sphereLine(projection, X, Y) {
+  const path = geoPath(projection);
+  X = coerceNumbers(X);
+  Y = coerceNumbers(Y);
+  return (I) => {
+    let line = [];
+    const lines = [line];
+    for (const i of I) {
+      // Check for undefined value; see groupIndex.
+      if (i === -1) {
+        line = [];
+        lines.push(line);
+      } else {
+        line.push([X[i], Y[i]]);
+      }
+    }
+    return path({type: "MultiLineString", coordinates: lines});
+  };
+}
+
 /** @jsdoc line */
 export function line(data, options = {}) {
   let {x, y, ...remainingOptions} = options;

test/data/README.md

@@ -19,6 +19,9 @@ https://www.flother.is/2017/olympic-games-data/
 ## barley.csv
 http://search.r-project.org/R/library/lattice/html/barley.html
 
+## beagle.csv
+https://observablehq.com/@bmschmidt/data-driven-projections-darwins-world
+
 ## bls-metro-unemployment.csv
 Bureau of Labor Statistics
 https://www.bls.gov/