Observable Plot - Changelog

Year: Current (2025) · 2024 · 2023 · 2022 · 2021

0.6.17

Released February 14, 2025.

The clip mark option now supports GeoJSON objects 🌎 in addition to the named frame and sphere clipping methods, allowing the visual extent of marks to be limited to arbitrary polygons. For instance, this Voronoi mesh of world airports is clipped to land boundaries:

Plot.plot({
  projection: {type: "orthographic", rotate: [110, -50]},
  marks: [
    Plot.dot(airports, {x: "longitude", y: "latitude", fill: "red", r: 1}),
    Plot.voronoiMesh(airports, {x: "longitude", y: "latitude", clip: land}),
    Plot.sphere(),
    Plot.geo(land)
  ]
})

The GeoJSON object passed to the clip option is rendered as a clipPath element using the same path data that a geo mark would produce, respecting the plot’s top-level projection option, if any. For performance, clipPath elements are shared by marks clipped with the same GeoJSON object. For example, the raster mark and contour mark below show atmospheric water vapor measurements across the United States from NASA Earth Observations; both marks are clipped to the nation’s boundary, censoring the (absurd) values that would otherwise be interpolated between Alaska, Southern California, and Hawai’i.

Plot.raster(vapor, {
  fill: Plot.identity,
  width: 360,
  height: 180,
  x1: -180, y1: 90, x2: 180, y2: -90,
  interpolate: "barycentric",
  blur: 10,
  clip: nation
}).plot()

[The code for the map above is too long to reproduce here in its entirety; click the image above for the complete code.]

The clip mark option can also be used to clip against arbitrary polygons, not just geographic boundaries. For example, to show the value of Math.atan2 over the unit circle:

Plot.raster({
  x1: -1, x2: 1, y1: -1, y2: 1,
  fill: (x, y) => Math.atan2(y, x),
  clip: {
    type: "Polygon",
    coordinates: [
      d3.range(0, 2 * Math.PI, 0.1).map((angle) => [Math.cos(angle), Math.sin(angle)])
    ]
  }
}).plot({width: 300, aspectRatio: 1})

The interactive tip associated with a waffle mark is now anchored to the “center” of the visual representation of the associated datum. That center depends on the shape that is referenced. For fun, here’s a chart from our unit tests showing these anchoring points for various amounts of waffling. Baffling!

For earlier changes, continue to the 2024 CHANGELOG.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!