derive x & y scale domains from geometry

Author: mbostock

src/dimensions.js

@@ -38,7 +38,7 @@ export function createDimensions(scales, marks, options = {}) {
   // specified explicitly, adjust the automatic height accordingly.
   let {
     width = 640,
-    height = autoHeight(scales, marks, options, {
+    height = autoHeight(scales, options, {
       width,
       marginTopDefault,
       marginRightDefault,
@@ -89,14 +89,13 @@ export function createDimensions(scales, marks, options = {}) {
 
 function autoHeight(
   {x, y, fy, fx},
-  marks,
   {projection, aspectRatio},
   {width, marginTopDefault, marginRightDefault, marginBottomDefault, marginLeftDefault}
 ) {
   const nfy = fy ? fy.scale.domain().length : 1;
 
   // If a projection is specified, use its natural aspect ratio (if known).
-  const ar = projectionAspectRatio(projection, marks);
+  const ar = projectionAspectRatio(projection);
   if (ar) {
     const nfx = fx ? fx.scale.domain().length : 1;
     const far = ((1.1 * nfy - 0.1) / (1.1 * nfx - 0.1)) * ar; // 0.1 is default facet padding

src/marks/geo.js

@@ -22,7 +22,7 @@ export class Geo extends Mark {
     super(
       data,
       {
-        geometry: {value: options.geometry},
+        geometry: {value: options.geometry, scale: "projection"},
         r: {value: vr, scale: "r", filter: positive, optional: true}
       },
       withDefaultSort(options),

src/plot.js

@@ -13,6 +13,7 @@ import {innerDimensions, outerDimensions} from "./scales.js";
 import {position, registry as scaleRegistry} from "./scales/index.js";
 import {applyInlineStyles, maybeClassName} from "./style.js";
 import {consumeWarnings, warn} from "./warnings.js";
+import {getGeometryChannels} from "./projection.js";
 
 export function plot(options = {}) {
   const {facet, style, caption, ariaLabel, ariaDescription} = options;
@@ -383,15 +384,26 @@ function addScaleChannels(channelsByScale, stateByMark, filter = yes) {
       const channel = channels[name];
       const {scale} = channel;
       if (scale != null && filter(scale)) {
-        const scaleChannels = channelsByScale.get(scale);
-        if (scaleChannels !== undefined) scaleChannels.push(channel);
-        else channelsByScale.set(scale, [channel]);
+        if (scale === "projection") {
+          // TODO only do this if there’s no projection
+          const [x, y] = getGeometryChannels(channel);
+          addScaleChannel(channelsByScale, "x", x);
+          addScaleChannel(channelsByScale, "y", y);
+        } else {
+          addScaleChannel(channelsByScale, scale, channel);
+        }
       }
     }
   }
   return channelsByScale;
 }
 
+function addScaleChannel(channelsByScale, scale, channel) {
+  const scaleChannels = channelsByScale.get(scale);
+  if (scaleChannels !== undefined) scaleChannels.push(channel);
+  else channelsByScale.set(scale, [channel]);
+}
+
 // Returns the facet groups, and possibly fx and fy channels, associated with
 // the top-level facet option {data, x, y}.
 function maybeTopFacet(facet, options) {
@@ -465,8 +477,8 @@ function inferAxes(marks, channelsByScale, options) {
   } = options;
 
   // Disable axes if the corresponding scale is not present.
-  if (projection || (!isScaleOptions(x) && !hasScaleChannel("x", marks))) xAxis = xGrid = null;
-  if (projection || (!isScaleOptions(y) && !hasScaleChannel("y", marks))) yAxis = yGrid = null;
+  if (projection || (!isScaleOptions(x) && !hasPositionChannel("x", marks))) xAxis = xGrid = null;
+  if (projection || (!isScaleOptions(y) && !hasPositionChannel("y", marks))) yAxis = yGrid = null;
   if (!channelsByScale.has("fx")) fxAxis = fxGrid = null;
   if (!channelsByScale.has("fy")) fyAxis = fyGrid = null;
 
@@ -592,10 +604,11 @@ function hasAxis(marks, k) {
   return marks.some((m) => m.ariaLabel?.startsWith(prefix));
 }
 
-function hasScaleChannel(k, marks) {
+function hasPositionChannel(k, marks) {
   for (const mark of marks) {
     for (const key in mark.channels) {
-      if (mark.channels[key].scale === k) {
+      const {scale} = mark.channels[key];
+      if (scale === k || scale === "projection") {
         return true;
       }
     }

src/projection.js

@@ -14,6 +14,7 @@ import {
   geoOrthographic,
   geoPath,
   geoStereographic,
+  geoStream,
   geoTransform,
   geoTransverseMercator
 } from "d3";
@@ -241,10 +242,10 @@ function project(cx, cy, values, projection) {
 // construct the projection), we have to test the raw projection option rather
 // than the materialized projection; therefore we must be extremely careful that
 // the logic of this function exactly matches Projection above!
-export function projectionAspectRatio(projection, marks) {
+export function projectionAspectRatio(projection) {
   if (typeof projection?.stream === "function") return defaultAspectRatio;
   if (isObject(projection)) projection = projection.type;
-  if (projection == null) return hasGeometry(marks) ? defaultAspectRatio : undefined;
+  if (projection == null) return;
   if (typeof projection !== "function") {
     const {aspectRatio} = namedProjection(projection);
     if (aspectRatio) return aspectRatio;
@@ -266,7 +267,22 @@ export function applyPosition(channels, scales, context) {
   return position;
 }
 
-function hasGeometry(marks) {
-  for (const mark of marks) if (mark.channels.geometry) return true;
-  return false;
+export function getGeometryChannels(channel) {
+  const X = [];
+  const Y = [];
+  const x = {scale: "x", value: X};
+  const y = {scale: "y", value: Y};
+  const sink = {
+    point(x, y) {
+      X.push(x);
+      Y.push(y);
+    },
+    lineStart() {},
+    lineEnd() {},
+    polygonStart() {},
+    polygonEnd() {},
+    sphere() {}
+  };
+  for (const object of channel.value) geoStream(object, sink);
+  return [x, y];
 }

src/scales/index.js

@@ -22,6 +22,9 @@ export const opacity = Symbol("opacity");
 // Symbol scales have a default range of categorical symbols.
 export const symbol = Symbol("symbol");
 
+// There isn’t really a projection scale; this represents x and y for geometry.
+export const projection = Symbol("projection");
+
 // TODO Rather than hard-coding the list of known scale names, collect the names
 // and categories for each plot specification, so that custom marks can register
 // custom scales.
@@ -34,5 +37,6 @@ export const registry = new Map([
   ["color", color],
   ["opacity", opacity],
   ["symbol", symbol],
-  ["length", length]
+  ["length", length],
+  ["projection", projection]
 ]);

test/output/geoLine.svg

@@ -0,0 +1,7 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function geoLine() {
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.geo({type: "LineString", coordinates: aapl.map((d) => [d.Date, d.Close])}).plot();
+}

test/output/projectionHeightGeometry.svg

@@ -90,6 +90,7 @@ export * from "./frame.js";
 export * from "./fruit-sales-date.js";
 export * from "./fruit-sales.js";
 export * from "./function-contour.js";
+export * from "./geo-line.js";
 export * from "./geo-link.js";
 export * from "./gistemp-anomaly-moving.js";
 export * from "./gistemp-anomaly-transform.js";