geometries and projections

package.json

@@ -65,6 +65,7 @@
     "prettier": "^2.7.1",
     "rollup": "2",
     "rollup-plugin-terser": "7",
+    "topojson-client": "^3.1.0",
     "tsx": "^3.8.0",
     "typescript": "^4.6.4",
     "typescript-module-alias": "^1.0.2",

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/context.js

@@ -1,7 +1,8 @@
 import {creator, select} from "d3";
+import {maybeProjection} from "./projection.js";
 
-export function Context({document = window.document} = {}) {
-  return {document};
+export function Context({document = window.document, projection} = {}, dimensions) {
+  return {document, projection: maybeProjection(projection, dimensions)};
 }
 
 export function create(name, {document}) {

src/dimensions.js

@@ -5,8 +5,9 @@ export function Dimensions(
   scales,
   {x: {axis: xAxis} = {}, y: {axis: yAxis} = {}, fx: {axis: fxAxis} = {}, fy: {axis: fyAxis} = {}},
   {
+    projection,
     width = 640,
-    height = autoHeight(scales),
+    height = autoHeight(scales, projection),
     facet: {
       margin: facetMargin,
       marginTop: facetMarginTop = facetMargin !== undefined ? facetMargin : fxAxis === "top" ? 30 : 0,
@@ -43,8 +44,8 @@ export function Dimensions(
   };
 }
 
-function autoHeight({y, fy, fx}) {
+function autoHeight({y, fy, fx}, projection) {
   const nfy = fy ? fy.scale.domain().length : 1;
-  const ny = y ? (isOrdinalScale(y) ? y.scale.domain().length : Math.max(7, 17 / nfy)) : 1;
-  return !!(y || fy) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;
+  const ny = y ? (isOrdinalScale(y) ? y.scale.domain().length : Math.max(7, 17 / nfy)) : projection != null ? 17 : 1;
+  return !!(y || fy || projection != null) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;
 }

src/index.js

@@ -8,6 +8,7 @@ export {delaunayLink, delaunayMesh, hull, voronoi, voronoiMesh} from "./marks/de
 export {Density, density} from "./marks/density.js";
 export {Dot, dot, dotX, dotY, circle, hexagon} from "./marks/dot.js";
 export {Frame, frame} from "./marks/frame.js";
+export {Geometry, geometry} from "./marks/geometry.js";
 export {Hexgrid, hexgrid} from "./marks/hexgrid.js";
 export {Image, image} from "./marks/image.js";
 export {Line, line, lineX, lineY} from "./marks/line.js";

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/geometry.js

@@ -0,0 +1,70 @@
+import {geoPath} from "d3";
+import {create} from "../context.js";
+import {identity} from "../options.js";
+import {Mark} from "../plot.js";
+import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
+
+const defaults = {
+  ariaLabel: "geometry",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeMiterlimit: 1
+};
+
+export class Geometry extends Mark {
+  constructor(data, options = {}) {
+    const {geometry = identity} = options;
+    super(
+      data,
+      {
+        geometry: {value: geometry}
+      },
+      options,
+      defaults
+    );
+  }
+  render(index, scales, channels, dimensions, context) {
+    const {geometry} = channels;
+    const {projection} = context;
+    const path = geoPath(projection);
+    return create("svg:g", context)
+      .call(applyIndirectStyles, this, scales, dimensions)
+      .call(applyTransform, this, scales)
+      .call((g) =>
+        g
+          .selectAll()
+          .data(index)
+          .enter()
+          .append("path")
+          .call(applyDirectStyles, this)
+          .attr("d", (i) => path(geometry[i]))
+          .call(applyChannelStyles, this, channels)
+      )
+      .node();
+  }
+}
+
+export function geometry(data, options) {
+  switch (data?.type) {
+    case "FeatureCollection":
+      data = data.features;
+      break;
+    case "GeometryCollection":
+      data = data.geometries;
+      break;
+    case "Feature":
+    case "LineString":
+    case "MultiLineString":
+    case "MultiPoint":
+    case "MultiPolygon":
+    case "Point":
+    case "Polygon":
+    case "Sphere":
+      data = [data];
+      break;
+  }
+  return new Geometry(data, options);
+}

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

@@ -120,7 +120,7 @@ export function plot(options = {}) {
   const scales = ScaleFunctions(scaleDescriptors);
   const axes = Axes(scaleDescriptors, options);
   const dimensions = Dimensions(scaleDescriptors, axes, options);
-  const context = Context(options);
+  const context = Context(options, dimensions);
 
   autoScaleRange(scaleDescriptors, dimensions);
   autoAxisTicks(scaleDescriptors, axes);
@@ -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

@@ -0,0 +1,32 @@
+import {geoAlbersUsa} from "d3";
+
+// TODO
+// - more named projections
+// - apply x and y scales as linear projection by default?
+// - disallow non-default projection if x and y scales exist?
+export function maybeProjection(projection, dimensions) {
+  if (projection == null) return;
+  if (typeof projection === "function") return projection;
+  const {width, height} = dimensions;
+  switch (`${projection}`.toLowerCase()) {
+    case "albers-usa":
+      return geoAlbersUsa()
+        .scale(Math.min(1.34 * width, 2.14 * height))
+        .translate([width / 2, height / 2]);
+  }
+  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.