projection supports dodgeX/dodgeY (#1181)

* projection supports dodgeX/dodgeY

* test plots

* DRY Position

* simpler examples

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

Author: Fil

src/marks/density.js

@@ -1,8 +1,7 @@
 import {contourDensity, create, geoPath} from "d3";
-import {valueObject} from "../channel.js";
 import {isTypedArray, maybeTuple, maybeZ} from "../options.js";
 import {Mark} from "../plot.js";
-import {maybeProject} from "../projection.js";
+import {Position} from "../projection.js";
 import {coerceNumbers} from "../scales.js";
 import {
   applyFrameAnchor,
@@ -93,17 +92,8 @@ function densityInitializer(options, fillDensity, strokeDensity) {
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     const {width, height} = dimensions;
 
-    // Extract the (possibly) scaled values for the x and y channels.
-    const position = valueObject({...(channels.x && {x: channels.x}), ...(channels.y && {y: channels.y})}, scales);
-
-    // Apply the projection.
-    if (context.projection) maybeProject("x", "y", channels, position, context);
-
-    // Coerce the x and y channels to numbers (so that null is properly treated
-    // as an undefined value rather than being coerced to zero).
-    let {x: X, y: Y} = position;
-    if (X) X = coerceNumbers(X);
-    if (Y) Y = coerceNumbers(Y);
+    // Get the (either scaled or projected) xy channels.
+    const {x: X, y: Y} = Position(channels, scales, context);
 
     // Group any of the input channels according to the first index associated
     // with each z-series or facet. Drop any channels not be needed for

src/projection.js

@@ -17,7 +17,9 @@ import {
   geoTransform,
   geoTransverseMercator
 } from "d3";
+import {valueObject} from "./channel.js";
 import {constant, isObject} from "./options.js";
+import {coerceNumbers} from "./scales.js";
 import {warn} from "./warnings.js";
 
 const pi = Math.PI;
@@ -250,3 +252,13 @@ export function projectionAspectRatio(projection, geometry) {
   }
   return defaultAspectRatio;
 }
+
+// Extract the (possibly) scaled values for the x and y channels, and apply the
+// projection if any.
+export function Position(channels, scales, context) {
+  const position = valueObject({...(channels.x && {x: channels.x}), ...(channels.y && {y: channels.y})}, scales);
+  if (context.projection) maybeProject("x", "y", channels, position, context);
+  if (position.x) position.x = coerceNumbers(position.x);
+  if (position.y) position.y = coerceNumbers(position.y);
+  return position;
+}

src/transforms/dodge.js

@@ -3,6 +3,7 @@ import {finite, positive} from "../defined.js";
 import {identity, maybeNamed, number, valueof} from "../options.js";
 import {coerceNumbers} from "../scales.js";
 import {initializer} from "./basic.js";
+import {Position} from "../projection.js";
 
 const anchorXLeft = ({marginLeft}) => [1, marginLeft];
 const anchorXRight = ({width, marginRight}) => [-1, width - marginRight];
@@ -67,9 +68,10 @@ function dodge(y, x, anchor, padding, options) {
     options = {...options, channels: {r: {value: r, scale: "r"}, ...maybeNamed(channels)}};
     if (sort === undefined && reverse === undefined) options.sort = {channel: "r", order: "descending"};
   }
-  return initializer(options, function (data, facets, {[x]: X, r: R}, scales, dimensions) {
-    if (!X) throw new Error(`missing channel: ${x}`);
-    X = coerceNumbers(valueof(X.value, scales[X.scale] || identity));
+  return initializer(options, function (data, facets, channels, scales, dimensions, context) {
+    let {[x]: X, r: R} = channels;
+    if (!channels[x]) throw new Error(`missing channel: ${x}`);
+    ({[x]: X} = Position(channels, scales, context));
     const r = R ? undefined : this.r !== undefined ? this.r : options.r !== undefined ? number(options.r) : 3;
     if (R) R = coerceNumbers(valueof(R.value, scales[R.scale] || identity));
     let [ky, ty] = anchor(dimensions);

src/transforms/hexbin.js

@@ -1,10 +1,8 @@
-import {valueObject} from "../channel.js";
-import {coerceNumbers} from "../scales.js";
 import {sqrt3} from "../symbols.js";
 import {isNoneish, number, valueof} from "../options.js";
 import {initializer} from "./basic.js";
 import {hasOutput, maybeGroup, maybeOutputs, maybeSubgroup} from "./group.js";
-import {maybeProject} from "../projection.js";
+import {Position} from "../projection.js";
 
 // We don’t want the hexagons to align with the edges of the plot frame, as that
 // would cause extreme x-values (the upper bound of the default x-scale domain)
@@ -37,17 +35,8 @@ export function hexbin(outputs = {fill: "count"}, {binWidth, ...options} = {}) {
     if (X === undefined) throw new Error("missing channel: x");
     if (Y === undefined) throw new Error("missing channel: y");
 
-    // Extract the (possibly) scaled values for the x and y channels.
-    const position = valueObject({x: X, y: Y}, scales);
-
-    // Apply the projection.
-    if (context.projection) maybeProject("x", "y", channels, position, context);
-
-    // Coerce the x and y channels to numbers (so that null is properly
-    // treated as an undefined value rather than being coerced to zero).
-    ({x: X, y: Y} = position);
-    X = coerceNumbers(X);
-    Y = coerceNumbers(Y);
+    // Get the (either scaled or projected) xy channels.
+    ({x: X, y: Y} = Position(channels, scales, context));
 
     // Extract the values for channels that are eligible for grouping; not all
     // marks define a z channel, so compute one if it not already computed. If z

test/data/README.md

@@ -30,6 +30,11 @@ https://www.bls.gov/
 1983 ASA Data Exposition
 http://lib.stat.cmu.edu/datasets/
 
+## cities-10k.csv
+Geonames
+https://www.geonames.org/about.html
+https://public.opendatasoft.com/explore/dataset/geonames-all-cities-with-a-population-1000/
+
 ## covid-ihme-projected-deaths.csv
 Institute for Health Metrics and Evaluation
 https://covid19.healthdata.org/