default scale projection (#1170)

* fix #1169; default scale projection

* test scale projection

Author: mbostock

src/marks/geo.js

@@ -1,4 +1,4 @@
-import {geoGraticule10, geoPath} from "d3";
+import {geoGraticule10, geoPath, geoTransform} from "d3";
 import {create} from "../context.js";
 import {negative, positive} from "../defined.js";
 import {identity, maybeNumberChannel} from "../options.js";
@@ -32,7 +32,7 @@ export class Geo extends Mark {
   }
   render(index, scales, channels, dimensions, context) {
     const {geometry: G, r: R} = channels;
-    const path = geoPath(context.projection);
+    const path = geoPath(context.projection ?? scaleProjection(scales));
     const {r} = this;
     if (negative(r)) index = [];
     else if (r !== undefined) path.pointRadius(r);
@@ -52,6 +52,20 @@ export class Geo extends Mark {
   }
 }
 
+// If no projection is specified, default to a projection that passes points
+// through the x and y scales, if any.
+function scaleProjection({x: X, y: Y}) {
+  if (X || Y) {
+    X ??= (x) => x;
+    Y ??= (y) => y;
+    return geoTransform({
+      point(x, y) {
+        this.stream.point(X(x), Y(y));
+      }
+    });
+  }
+}
+
 export function geo(data, {geometry = identity, ...options} = {}) {
   switch (data?.type) {
     case "FeatureCollection":

test/output/walmartsDensityUnprojected.svg

@@ -254,6 +254,7 @@ export {default as vectorFrame} from "./vector-frame.js";
 export {default as walmarts} from "./walmarts.js";
 export {default as walmartsDecades} from "./walmarts-decades.js";
 export {default as walmartsDensity} from "./walmarts-density.js";
+export {default as walmartsDensityUnprojected} from "./walmarts-density-unprojected.js";
 export {default as wealthBritainBar} from "./wealth-britain-bar.js";
 export {default as wealthBritainProportionPlot} from "./wealth-britain-proportion-plot.js";
 export {default as wordCloud} from "./word-cloud.js";

test/plots/index.js

@@ -0,0 +1,18 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function () {
+  const walmarts = await d3.tsv("data/walmarts.tsv", d3.autoType);
+  return Plot.plot({
+    width: 960,
+    height: 600,
+    grid: true,
+    color: {
+      scheme: "blues"
+    },
+    marks: [
+      Plot.density(walmarts, {x: "longitude", y: "latitude", bandwidth: 12, fill: "density"}),
+      Plot.geo({type: "MultiPoint", coordinates: walmarts.map((d) => [d.longitude, d.latitude])})
+    ]
+  });
+}