Observable Plot - Changelog
Year: Current (2025) · 2024 · 2023 · 2022 · 2021
0.6.17
Released TDB, 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:
![a map of world airports with a Voronoi mesh clipped to land]()
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.
![a map of water vapor measurements in the United States]()
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:
![the value of atan2 across the unit disc, encoded as color]()
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 out unit tests showing these anchoring points for various amounts of waffling. Baffling!
For earlier changes, continue to the 2024 CHANGELOG.
observablehq
</picture>