clip: geojson

src/mark.d.ts

@@ -1,3 +1,4 @@
+import {GeoPermissibleObjects} from "d3";
 import type {Channel, ChannelDomainSort, ChannelValue, ChannelValues, ChannelValueSpec} from "./channel.js";
 import type {Context} from "./context.js";
 import type {Dimensions} from "./dimensions.js";
@@ -295,11 +296,12 @@ export interface MarkOptions {
    *
    * - *frame* or true - clip to the plot’s frame (inner area)
    * - *sphere* - clip to the projected sphere (*e.g.*, front hemisphere)
+   * - geojson - a GeoJSON object with a (multi-) polygon geometry
    * - null or false - do not clip
    *
    * The *sphere* clip option requires a geographic projection.
    */
-  clip?: "frame" | "sphere" | boolean | null;
+  clip?: "frame" | "sphere" | GeoPermissibleObjects | boolean | null;
 
   /**
    * The horizontal offset in pixels; a constant option. On low-density screens,

src/marks/area.js

@@ -46,7 +46,7 @@ export class Area extends Mark {
   render(index, scales, channels, dimensions, context) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales, 0, 0)
       .call((g) =>
         g

src/marks/arrow.js

@@ -62,7 +62,7 @@ export class Arrow extends Mark {
     const wingScale = headLength / 1.5;
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/bar.js

@@ -25,7 +25,7 @@ export class AbstractBar extends Mark {
     const w = this._width(scales, channels, dimensions);
     const h = this._height(scales, channels, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(this._transform, this, scales)
       .call((g) =>
         g

src/marks/contour.js

@@ -91,7 +91,7 @@ export class Contour extends AbstractRaster {
     const {geometry: G} = channels;
     const path = geoPath();
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) => {
         g.selectAll()

src/marks/delaunay.js

@@ -125,7 +125,7 @@ class DelaunayLink extends Mark {
     }
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
@@ -175,7 +175,7 @@ class AbstractDelaunayMark extends Mark {
     }
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
@@ -249,7 +249,7 @@ class Voronoi extends Mark {
     const {x, y} = scales;
     const {x: X, y: Y, cells: C} = channels;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) => {
         g.selectAll()

src/marks/density.js

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

src/marks/dot.js

@@ -79,7 +79,7 @@ export class Dot extends Mark {
     const size = R ? undefined : r * r * Math.PI;
     if (negative(r)) index = [];
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g

src/marks/frame.js

@@ -37,7 +37,7 @@ export class Frame extends Mark {
     const y2 = height - marginBottom - insetBottom;
     return create(anchor ? "svg:line" : rx1y1 || rx1y2 || rx2y1 || rx2y2 ? "svg:path" : "svg:rect", context)
       .datum(0)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyDirectStyles, this)
       .call(applyChannelStyles, this, channels)
       .call(applyTransform, this, {})

src/marks/geo.js

@@ -1,8 +1,9 @@
-import {geoGraticule10, geoPath, geoTransform} from "d3";
+import {geoGraticule10, geoPath} from "d3";
 import {create} from "../context.js";
 import {negative, positive} from "../defined.js";
 import {Mark} from "../mark.js";
 import {identity, maybeNumberChannel} from "../options.js";
+import {xyProjection} from "../projection.js";
 import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 import {centroid} from "../transforms/centroid.js";
 import {withDefaultSort} from "./dot.js";
@@ -35,12 +36,12 @@ export class Geo extends Mark {
   }
   render(index, scales, channels, dimensions, context) {
     const {geometry: G, r: R} = channels;
-    const path = geoPath(context.projection ?? scaleProjection(scales));
+    const path = geoPath(context.projection ?? xyProjection(scales));
     const {r} = this;
     if (negative(r)) index = [];
     else if (r !== undefined) path.pointRadius(r);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) => {
         g.selectAll()
@@ -55,20 +56,6 @@ 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, options = {}) {
   if (options.tip && options.x === undefined && options.y === undefined) options = centroid(options);
   else if (options.geometry === undefined) options = {...options, geometry: identity};

src/marks/hexgrid.js

@@ -46,7 +46,7 @@ export class Hexgrid extends Mark {
     }
     return create("svg:g", context)
       .datum(0)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {}, offset + ox, offset + oy)
       .call((g) => g.append("path").call(applyDirectStyles, this).call(applyChannelStyles, this, channels).attr("d", d))
       .node();

src/marks/image.js

@@ -82,7 +82,7 @@ export class Image extends Mark {
     const {r, width, height, rotate} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g

src/marks/line.js

@@ -53,7 +53,7 @@ export class Line extends Mark {
     const {x: X, y: Y} = channels;
     const {curve} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/linearRegression.js

@@ -40,7 +40,7 @@ class LinearRegression extends Mark {
     const {x: X, y: Y, z: Z} = channels;
     const {ci} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/link.js

@@ -40,7 +40,7 @@ export class Link extends Mark {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
     const {curve} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/raster.js

@@ -154,7 +154,7 @@ export class Raster extends AbstractRaster {
     context2d.putImageData(image, 0, 0);
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/rect.js

@@ -41,7 +41,7 @@ export class Rect extends Mark {
     const bx = x?.bandwidth ? x.bandwidth() : 0;
     const by = y?.bandwidth ? y.bandwidth() : 0;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {}, 0, 0)
       .call((g) =>
         g

src/marks/rule.js

@@ -35,7 +35,7 @@ export class RuleX extends Mark {
     const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
     const {insetTop, insetBottom} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x}, offset, 0)
       .call((g) =>
         g
@@ -85,7 +85,7 @@ export class RuleY extends Mark {
     const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
     const {insetLeft, insetRight} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {y: Y && y}, 0, offset)
       .call((g) =>
         g

src/marks/text.js

@@ -95,7 +95,7 @@ export class Text extends Mark {
     const {rotate} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyIndirectTextStyles, this, T, dimensions)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>

src/marks/tick.js

@@ -17,7 +17,7 @@ class AbstractTick extends Mark {
   }
   render(index, scales, channels, dimensions, context) {
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(this._transform, this, scales)
       .call((g) =>
         g

src/marks/tip.js

@@ -130,7 +130,7 @@ export class Tip extends Mark {
     // We don’t call applyChannelStyles because we only use the channels to
     // derive the content of the tip, not its aesthetics.
     const g = create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyIndirectTextStyles, this)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>

src/marks/vector.js

@@ -92,7 +92,7 @@ export class Vector extends Mark {
     const {length, rotate, anchor, shape, r} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g

src/marks/waffle.js

@@ -76,7 +76,7 @@ function waffleRender(y) {
     if (ry != null) basePatternRect.setAttribute("ry", ry);
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyIndirectStyles, this, scales, dimensions, context)
       .call(this._transform, this, scales)
       .call((g) =>
         g

src/options.js

@@ -602,12 +602,14 @@ export function maybeNamed(things) {
   return isIterable(things) ? named(things) : things;
 }
 
-// TODO Accept other types of clips (paths, urls, x, y, other marks…)?
-// https://github.com/observablehq/plot/issues/181
 export function maybeClip(clip) {
   if (clip === true) clip = "frame";
   else if (clip === false) clip = null;
-  else if (clip != null) clip = keyword(clip, "clip", ["frame", "sphere"]);
+  else if (
+    clip != null &&
+    !["FeatureCollection", "Feature", "Polygon", "GeometryCollection", "MultiPolygon"].includes(clip.type)
+  )
+    clip = keyword(clip, "clip", ["frame", "sphere"]);
   return clip;
 }
 

src/projection.js

@@ -296,3 +296,17 @@ export function getGeometryChannels(channel) {
   for (const object of channel.value) geoStream(object, sink);
   return [x, y];
 }
+
+// If no projection is specified, default to a projection that passes points
+// through the x and y scales, if any.
+export function xyProjection({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));
+      }
+    });
+  }
+}