project x & y; re-fix #1043

Author: mbostock

src/channel.js

@@ -1,5 +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 {registry} from "./scales/index.js";
 import {maybeReduce} from "./transforms/group.js";
 
@@ -24,13 +25,17 @@ export function Channels(descriptors, data) {
 }
 
 // TODO Use Float64Array for scales with numeric ranges, e.g. position?
-export function valueObject(channels, scales) {
-  return Object.fromEntries(
+export function valueObject(channels, scales, {projection}) {
+  const values = Object.fromEntries(
     Object.entries(channels).map(([name, {scale: scaleName, value}]) => {
       const scale = scales[scaleName];
       return [name, scale === undefined ? value : map(value, scale)];
     })
   );
+  if (projection) {
+    applyProjection(values, projection);
+  }
+  return values;
 }
 
 // Note: mutates channel.domain! This is set to a function so that it is lazily

src/marks/delaunay.js

@@ -65,6 +65,7 @@ class DelaunayLink extends Mark {
     markers(this, options);
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, z: Z} = channels;
     const {curve} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
@@ -124,7 +125,7 @@ class DelaunayLink extends Mark {
 
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
           ? (g) =>
@@ -155,6 +156,7 @@ class AbstractDelaunayMark extends Mark {
     );
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, z: Z} = channels;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     const xi = X ? (i) => X[i] : constant(cx);
@@ -173,7 +175,7 @@ class AbstractDelaunayMark extends Mark {
 
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
           ? (g) =>
@@ -223,6 +225,7 @@ class Voronoi extends Mark {
     );
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, z: Z} = channels;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     const xi = X ? (i) => X[i] : constant(cx);
@@ -243,7 +246,7 @@ class Voronoi extends Mark {
 
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
           ? (g) =>

src/marks/density.js

@@ -50,7 +50,7 @@ export class Density extends Mark {
     const path = geoPath();
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {})
       .call((g) =>
         g
           .selectAll()

src/marks/dot.js

@@ -60,12 +60,13 @@ export class Dot extends Mark {
     }
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, r: R, rotate: A, symbol: S} = channels;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     const circle = this.symbol === symbolCircle;
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g
           .selectAll()

src/marks/image.js

@@ -6,10 +6,10 @@ import {
   applyChannelStyles,
   applyDirectStyles,
   applyIndirectStyles,
-  applyTransform,
   applyAttr,
   impliedString,
-  applyFrameAnchor
+  applyFrameAnchor,
+  applyTransform
 } from "../style.js";
 
 const defaults = {
@@ -66,11 +66,12 @@ export class Image extends Mark {
     this.frameAnchor = maybeFrameAnchor(frameAnchor);
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, width: W, height: H, src: S} = channels;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g
           .selectAll()

src/marks/rect.js

@@ -58,7 +58,7 @@ export class Rect extends Mark {
     const {insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, {x: X1 && X2 ? x : null, y: Y1 && Y2 ? y : null}, 0, 0)
+      .call(applyTransform, this, {x: X1 && X2 && x, y: Y1 && Y2 && y}, 0, 0)
       .call((g) =>
         g
           .selectAll()

src/marks/text.js

@@ -82,13 +82,14 @@ export class Text extends Mark {
     this.frameAnchor = maybeFrameAnchor(frameAnchor);
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, rotate: R, text: T, fontSize: FS} = channels;
     const {rotate} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
       .call(applyIndirectTextStyles, this, T, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g
           .selectAll()
@@ -140,7 +141,7 @@ function applyMultilineText(selection, {monospace, lineAnchor, lineHeight, lineW
   selection.each(function (i) {
     const lines = linesof(formatDefault(T[i]));
     const n = lines.length;
-    const y = lineAnchor === "top" ? 0.71 : lineAnchor === "bottom" ? -0.29 - n : (164 - n * 100) / 200;
+    const y = lineAnchor === "top" ? 0.71 : lineAnchor === "bottom" ? 1 - n : (164 - n * 100) / 200;
     if (n > 1) {
       for (let i = 0; i < n; ++i) {
         if (!lines[i]) continue;

src/marks/vector.js

@@ -40,6 +40,7 @@ export class Vector extends Mark {
     this.frameAnchor = maybeFrameAnchor(frameAnchor);
   }
   render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
     const {x: X, y: Y, length: L, rotate: R} = channels;
     const {length, rotate, anchor} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
@@ -51,7 +52,7 @@ export class Vector extends Mark {
     return create("svg:g", context)
       .attr("fill", "none")
       .call(applyIndirectStyles, this, scales, dimensions)
-      .call(applyTransform, this, scales)
+      .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g
           .selectAll()

src/plot.js

@@ -160,9 +160,9 @@ export function plot(options = {}) {
 
   autoScaleLabels(channelsByScale, scaleDescriptors, axes, dimensions, options);
 
-  // Compute value objects, applying scales as needed.
+  // Compute value objects, applying scales and projection as needed.
   for (const state of stateByMark.values()) {
-    state.values = valueObject(state.channels, scales);
+    state.values = valueObject(state.channels, scales, context);
   }
 
   const {width, height} = dimensions;

src/projection.js

@@ -16,3 +16,17 @@ export function maybeProjection(projection, dimensions) {
   }
   throw new Error(`invalid projection: ${projection}`);
 }
+
+export function applyProjection(values, projection) {
+  const {x, y} = values;
+  if (x && y) {
+    const n = x.length;
+    const X = (values.x = new Float64Array(n));
+    const Y = (values.y = new Float64Array(n));
+    for (let i = 0; i < n; ++i) {
+      const p = projection([x[i], y[i]]);
+      if (p) (X[i] = p[0]), (Y[i] = p[1]);
+      else X[i] = Y[i] = NaN;
+    }
+  }
+}

src/scales.js

@@ -52,6 +52,7 @@ export function Scales(
     zero,
     align,
     padding,
+    projection,
     ...options
   } = {}
 ) {
@@ -65,6 +66,7 @@ export function Scales(
       zero,
       align,
       padding,
+      projection,
       ...scaleOptions
     });
     if (scale) {
@@ -300,10 +302,15 @@ function formatScaleType(type) {
   return typeof type === "symbol" ? type.description : type;
 }
 
-function inferScaleType(key, channels, {type, domain, range, scheme, pivot}) {
+function inferScaleType(key, channels, {type, domain, range, scheme, pivot, projection}) {
   // The facet scales are always band scales; this cannot be changed.
   if (key === "fx" || key === "fy") return "band";
 
+  // If a projection is specified, the x- and y-scales are disabled; these
+  // channels will be projected rather than scaled. TODO Throw an error if these
+  // scales are specified in conjunction with a projection.
+  if ((key === "x" || key === "y") && projection != null) return;
+
   // If a channel dictates a scale type, make sure that it is consistent with
   // the user-specified scale type (if any) and all other channels. For example,
   // barY requires x to be a band scale and disallows any other scale type.

test/data/us-state-capitals.csv

@@ -0,0 +1,51 @@
+state,capital,latitude,longitude
+Alabama,Montgomery,32.377716,-86.300568
+Alaska,Juneau,58.301598,-134.420212
+Arizona,Phoenix,33.448143,-112.096962
+Arkansas,Little Rock,34.746613,-92.288986
+California,Sacramento,38.576668,-121.493629
+Colorado,Denver,39.739227,-104.984856
+Connecticut,Hartford,41.764046,-72.682198
+Delaware,Dover,39.157307,-75.519722
+Hawaii,Honolulu,21.307442,-157.857376
+Florida,Tallahassee,30.438118,-84.281296
+Georgia,Atlanta,33.749027,-84.388229
+Idaho,Boise,43.617775,-116.199722
+Illinois,Springfield,39.798363,-89.654961
+Indiana,Indianapolis,39.768623,-86.162643
+Iowa,Des Moines,41.591087,-93.603729
+Kansas,Topeka,39.048191,-95.677956
+Kentucky,Frankfort,38.186722,-84.875374
+Louisiana,Baton Rouge,30.457069,-91.187393
+Maine,Augusta,44.307167,-69.781693
+Maryland,Annapolis,38.978764,-76.490936
+Massachusetts,Boston,42.358162,-71.063698
+Michigan,Lansing,42.733635,-84.555328
+Minnesota,St. Paul,44.955097,-93.102211
+Mississippi,Jackson,32.303848,-90.182106
+Missouri,Jefferson City,38.579201,-92.172935
+Montana,Helena,46.585709,-112.018417
+Nebraska,Lincoln,40.808075,-96.699654
+Nevada,Carson City,39.163914,-119.766121
+New Hampshire,Concord,43.206898,-71.537994
+New Jersey,Trenton,40.220596,-74.769913
+New Mexico,Santa Fe,35.68224,-105.939728
+North Carolina,Raleigh,35.78043,-78.639099
+North Dakota,Bismarck,46.82085,-100.783318
+New York,Albany,42.652843,-73.757874
+Ohio,Columbus,39.961346,-82.999069
+Oklahoma,Oklahoma City,35.492207,-97.503342
+Oregon,Salem,44.938461,-123.030403
+Pennsylvania,Harrisburg,40.264378,-76.883598
+Rhode Island,Providence,41.830914,-71.414963
+South Carolina,Columbia,34.000343,-81.033211
+South Dakota,Pierre,44.367031,-100.346405
+Tennessee,Nashville,36.16581,-86.784241
+Texas,Austin,30.27467,-97.740349
+Utah,Salt Lake City,40.777477,-111.888237
+Vermont,Montpelier,44.262436,-72.580536
+Virginia,Richmond,37.538857,-77.43364
+Washington,Olympia,47.035805,-122.905014
+West Virginia,Charleston,38.336246,-81.612328
+Wisconsin,Madison,43.074684,-89.384445
+Wyoming,Cheyenne,41.140259,-104.820236

test/output/penguinAnnotated.svg

@@ -232,6 +232,7 @@ export {default as usPresidentGallery} from "./us-president-gallery.js";
 export {default as usPresidentialElection2020} from "./us-presidential-election-2020.js";
 export {default as usPresidentialForecast2016} from "./us-presidential-forecast-2016.js";
 export {default as usRetailSales} from "./us-retail-sales.js";
+export {default as usStateCapitals} from "./us-state-capitals.js";
 export {default as usStatePopulationChange} from "./us-state-population-change.js";
 export {default as vectorField} from "./vector-field.js";
 export {default as vectorFrame} from "./vector-frame.js";

test/output/usStateCapitals.svg

@@ -10,20 +10,12 @@ export default async function () {
       Plot.frame(),
       Plot.barX(
         penguins,
-        Plot.groupY(
-          {x: "count"},
-          {
-            y: "species",
-            fill: "sex",
-            title: "sex",
-            sort: {y: "x", reverse: true}
-          }
-        )
+        Plot.groupY({x: "count"}, {y: "species", fill: "sex", title: "sex", sort: {y: "x", reverse: true}})
       ),
       Plot.text(["Count of penguins\ngrouped by species\n and colored by sex"], {
         frameAnchor: "bottom-right",
         dx: -3,
-        lineHeight: 1.2,
+        dy: -3,
         fontStyle: "italic"
       })
     ]

test/plots/index.js

@@ -0,0 +1,29 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {feature, mesh} from "topojson-client";
+
+export default async function () {
+  const [[states, statemesh], capitals] = await Promise.all([
+    d3
+      .json("data/us-counties-10m.json")
+      .then((us) => [feature(us, us.objects.states), mesh(us, us.objects.states, (a, b) => a !== b)]),
+    d3.csv("data/us-state-capitals.csv", d3.autoType)
+  ]);
+  return Plot.plot({
+    width: 960,
+    height: 600,
+    projection: "albers-usa",
+    marks: [
+      Plot.geometry(states, {fill: "#ccc"}),
+      Plot.geometry(statemesh, {stroke: "white"}),
+      Plot.dot(capitals, {x: "longitude", y: "latitude", fill: "currentColor"}),
+      Plot.text(capitals, {
+        x: "longitude",
+        y: "latitude",
+        frameAnchor: "bottom",
+        text: (d) => `${d.capital}\n${d.state}`,
+        dy: -6
+      })
+    ]
+  });
+}