0.6.16 (#2122)

* checkpoint changelog

* update changelog

* fix image widths

* more changelog

* more changelog

* more changelog

* more changelog

* upgrade dependencies

* Update CHANGELOG.md

---------

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

CHANGELOG.md

@@ -2,6 +2,113 @@
 
 Year: **Current (2024)** · [2023](./CHANGELOG-2023.md) · [2022](./CHANGELOG-2022.md) · [2021](./CHANGELOG-2021.md)
 
+## 0.6.16
+
+[Released August 6, 2024.](https://github.com/observablehq/plot/releases/tag/v0.6.16)
+
+The new [waffle mark](https://observablehq.com/plot/marks/waffle) 🧇 displays a quantity (or quantitative extent) for a given category; unlike a [bar](https://observablehq.com/plot/marks/bar), a waffle is subdivided into cells that allow easier counting, making waffles useful for reading and comparing exact quantities. Plot’s waffle mark is highly configurable: it supports stacking, positive and negative values, rounded corners, partial cells for fractional counts, automatic row or column size determination (with optional override), and more!
+
+[<img src="./img/waffle.png" width="708" alt="a waffle chart of Olympic athletes by weight">](https://observablehq.com/plot/marks/waffle)
+
+```js
+Plot.plot({
+  fx: {interval: 10},
+  color: {legend: true},
+  marks: [Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fill: "sex", sort: "sex", fx: "weight", unit: 10}))]
+})
+```
+
+
+All marks now support GeoJSON data and GeoJSON property shorthand, making it easier to work with GeoJSON. For example, below the data `counties` is a GeoJSON FeatureCollection, and `unemployment` refers to a property on each feature; the **fill** option is thus shorthand for `(d) => d.properties.unemployment`. The [geo mark](https://observablehq.com/plot/marks/geo) now also supports the **tip** option (via an implicit [centroid transform](https://observablehq.com/plot/transforms/centroid)), making it easier to use Plot’s [interactive tooltips](https://observablehq.com/plot/interactions/pointer).
+
+[<img src="./img/geo-tip.png" width="708" alt="a choropleth map of unemployment by U.S. county">](https://observablehq.com/plot/marks/geo)
+
+```js
+Plot.plot({
+  projection: "albers-usa",
+  color: {
+    type: "quantile",
+    n: 9,
+    scheme: "blues",
+    label: "Unemployment (%)",
+    legend: true
+  },
+  marks: [
+    Plot.geo(counties, {
+      fill: "unemployment",
+      title: (d) => `${d.properties.name} ${d.properties.unemployment}%`,
+      tip: true
+    })
+  ]
+})
+```
+
+All marks now also support column name channel shorthand when using Apache Arrow tables as data, and we’ve added detection of Arrow date-type columns. (Arrow represents temporal data using BigInt rather than Date.)
+
+```js
+Plot.dot(gistemp, {x: "Date", y: "Anomaly"}).plot() // gistemp is an Arrow Table!
+```
+
+The rect-like marks ([rect](https://observablehq.com/plot/marks/rect), [bar](https://observablehq.com/plot/marks/bar), [cell](https://observablehq.com/plot/marks/cell), and [frame](https://observablehq.com/plot/marks/frame)) now support individual rounding options for each side (**rx1**, **ry1**, *etc.*) and corner (**rx1y1**, **rx2y1**, *etc.*). This allows you to round just the top side of rects. You can even use a negative corner radius on the bottom side for seamless stacking, as in the histogram of Olympic athletes below.
+
+[<img src="./img/rect-rounded.png" width="708" alt="a histogram of Olympic athletes by weight">](https://observablehq.com/plot/marks/rect)
+
+```js
+Plot.plot({
+  color: {legend: true},
+  marks: [
+    Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight", fill: "sex", ry2: 4, ry1: -4, clip: "frame"})),
+    Plot.ruleY([0])
+  ]
+})
+```
+
+Plot now respects the projection **domain** when determining the default plot height. Previously, the map below would use a default square aspect ratio for the *conic-conformal* projection regardless of the specified **domain**, but now the map is perfectly sized to fit North Carolina. (Plot also now chooses a smarter default plot height when the ordinal *y* scale domain is empty.)
+
+<img src="./img/geo-nc.png" width="659" alt="an unlabeled map showing the outline and counties of North Carolina">
+
+```js
+Plot.plot({
+  projection: {.
+    type: "conic-conformal",
+    parallels: [34 + 20 / 60, 36 + 10 / 60],
+    rotate: [79, 0],
+    domain: state
+  },
+  marks: [
+    Plot.geo(counties, {strokeOpacity: 0.2}),
+    Plot.geo(state)
+  ]
+})
+```
+
+The [marker options](https://observablehq.com/plot/features/markers) now render as intended on marks with varying aesthetics, such as the spiraling arrows of varying thickness and color below.
+
+<img src="./img/group-marker.png" width="659" alt="several spiraling lines emanate from the center of the image, with rainbow color and increasing thickness, each capped with a pointed arrow at the end">
+
+```js
+Plot.plot({
+  inset: 40,
+  axis: null,
+  marks: [
+    Plot.line(d3.range(400), {
+      x: (i) => i * Math.sin(i / 100 + ((i % 5) * 2 * Math.PI) / 5),
+      y: (i) => i * Math.cos(i / 100 + ((i % 5) * 2 * Math.PI) / 5),
+      z: (i) => i % 5,
+      stroke: (i) => -i,
+      strokeWidth: (i) => i ** 1.1 / 100,
+      markerEnd: "arrow"
+    })
+  ]
+})
+```
+
+This release includes a few more new features, bug fixes, and improvements:
+
+The new **className** [mark option](https://observablehq.com/plot/features/marks#mark-options) specifies an optional `class` attribute for rendered marks, allowing styling of marks via external stylesheets or easier selection via JavaScript; thanks, @RLesser! Plot now reuses `clipPath` elements, when possible, when the **clip** mark option is set to *frame* or *projection*.
+
+The [difference mark](https://observablehq.com/plot/marks/difference) now supports a horizontal orientation via [differenceX](https://observablehq.com/plot/marks/difference#differenceX), and the [shift transform](https://observablehq.com/plot/transforms/shift) now likewise supports [shiftY](https://observablehq.com/plot/transforms/shift#shiftY). The [Voronoi mark](https://observablehq.com/plot/marks/delaunay) is now compatible with the pointer transform: only the pointed Voronoi cell is rendered; the Voronoi mark now also renders as intended with non-exclusive facets (as when using the *exclude* facet mode). The [tip mark](https://observablehq.com/plot/marks/tip) no longer displays channels containing literal color values by default.
+
 ## 0.6.15
 
 [Released June 11, 2024.](https://github.com/observablehq/plot/releases/tag/v0.6.15)

docs/features/marks.md

@@ -220,7 +220,7 @@ linedata = [
 ```
 
 :::tip
-For larger datasets, you can more efficiently pass data using an [Apache Arrow](https://arrow.apache.org/docs/js/) table as a columnar data representation. <VersionBadge pr="2115" />
+For larger datasets, you can more efficiently pass data using an [Apache Arrow](https://arrow.apache.org/docs/js/) table as a columnar data representation. <VersionBadge version="0.6.16" pr="2115" />
 :::
 
 Then you can pass the data to the line mark, and extract named columns from the data for the desired options:
@@ -243,7 +243,7 @@ Plot.lineY(linedata, {
 ```
 :::
 
-For greater efficiency, Plot also supports columnar data: you can use an [Apache Arrow](https://arrow.apache.org/docs/js/) table as data instead of an array of objects. <VersionBadge pr="2115" /> You can even pass parallel arrays of values, or Apache Arrow vectors, to each channel.
+For greater efficiency, Plot also supports columnar data: you can use an [Apache Arrow](https://arrow.apache.org/docs/js/) table as data instead of an array of objects. <VersionBadge version="0.6.16" pr="2115" /> You can even pass parallel arrays of values, or Apache Arrow vectors, to each channel.
 
 ```js
 Plot.lineY({length: linedata.length}, {
@@ -486,7 +486,7 @@ All marks support the following style options:
 * **dx** - horizontal offset (in pixels; defaults to 0)
 * **dy** - vertical offset (in pixels; defaults to 0)
 * **target** - link target (e.g., “_blank” for a new window); for use with the **href** channel
-* **className** - the [class attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class), if any (defaults to null) <VersionBadge pr="1098" />
+* **className** - the [class attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class), if any (defaults to null) <VersionBadge version="0.6.16" pr="1098" />
 * **ariaDescription** - a textual description of the mark’s contents
 * **ariaHidden** - if true, hide this content from the accessibility tree
 * **pointerEvents** - the [pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) (*e.g.*, *none*)
@@ -561,7 +561,7 @@ Insets default to zero. Insets are commonly used to create a one-pixel gap betwe
 
 ### Rounded corners
 
-Rect-like marks support rounded corners. Each corner (or side) is individually addressable <VersionBadge pr="2099" /> using the following options:
+Rect-like marks support rounded corners. Each corner (or side) is individually addressable <VersionBadge version="0.6.16" pr="2099" /> using the following options:
 
 * **r** - the radius for all four corners
 * **rx1** - the radius for the **x1**-**y1** and **x1**-**y2** corners

docs/marks/difference.md

@@ -144,7 +144,7 @@ Plot.differenceY(gistemp, {x: "Date", y: "Anomaly"})
 
 Returns a new vertical difference with the given *data* and *options*. The mark is a composite of a positive area, negative area, and line. The positive area extends from the bottom of the frame to the line, and is clipped by the area extending from the comparison to the top of the frame. The negative area conversely extends from the top of the frame to the line, and is clipped by the area extending from the comparison to the bottom of the frame.
 
-## differenceX(*data*, *options*) <VersionBadge pr="1922" /> {#differenceX}
+## differenceX(*data*, *options*) <VersionBadge version="0.6.16" pr="1922" /> {#differenceX}
 
 ```js
 Plot.differenceX(gistemp, {y: "Date", x: "Anomaly"})

docs/marks/geo.md

@@ -57,7 +57,7 @@ Plot.plot({
 ```
 :::
 
-A geo mark’s data is typically [GeoJSON](https://geojson.org/). You can pass a single GeoJSON object, a feature or geometry collection, or an array or iterable of GeoJSON objects; Plot automatically normalizes these into an array of features or geometries. When a mark’s data is GeoJSON, Plot will look for the specified field name (such as _unemployment_ above, for **fill**) in the GeoJSON object’s `properties` if the object does not have this property directly. <VersionBadge pr="2092" />
+A geo mark’s data is typically [GeoJSON](https://geojson.org/). You can pass a single GeoJSON object, a feature or geometry collection, or an array or iterable of GeoJSON objects; Plot automatically normalizes these into an array of features or geometries. When a mark’s data is GeoJSON, Plot will look for the specified field name (such as _unemployment_ above, for **fill**) in the GeoJSON object’s `properties` if the object does not have this property directly. <VersionBadge version="0.6.16" pr="2092" />
 
 The size of Point and MultiPoint geometries is controlled by the **r** option. For example, below we show earthquakes in the last seven days with a magnitude of 2.5 or higher as reported by the [USGS](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php). As with the [dot mark](./dot.md), the effective radius is controlled by the *r* scale, which is by default a *sqrt* scale such that the area of a point is proportional to its value. And likewise point geometries are by default sorted by descending radius to reduce occlusion, drawing the smallest circles on top. Set the **sort** option to null to use input order instead.
 
@@ -130,7 +130,7 @@ Plot.plot({
 ```
 :::
 
-By default, the geo mark doesn’t have **x** and **y** channels; when you use the [**tip** option](./tip.md), the [centroid transform](../transforms/centroid.md) is implicitly applied on the geometries to compute the tip position by generating **x** and **y** channels. <VersionBadge pr="2088" /> You can alternatively specify these channels explicitly. The centroids are shown below in red.
+By default, the geo mark doesn’t have **x** and **y** channels; when you use the [**tip** option](./tip.md), the [centroid transform](../transforms/centroid.md) is implicitly applied on the geometries to compute the tip position by generating **x** and **y** channels. <VersionBadge version="0.6.16" pr="2088" /> You can alternatively specify these channels explicitly. The centroids are shown below in red.
 
 :::plot defer https://observablehq.com/@observablehq/plot-state-centroids
 ```js
@@ -176,7 +176,7 @@ The **geometry** channel specifies the geometry (GeoJSON object) to draw; if not
 
 In addition to the [standard mark options](../features/marks.md#mark-options), the **r** option controls the size of Point and MultiPoint geometries. It can be specified as either a channel or constant. When **r** is specified as a number, it is interpreted as a constant radius in pixels; otherwise it is interpreted as a channel and the effective radius is controlled by the *r* scale. If the **r** option is not specified it defaults to 3 pixels. Geometries with a nonpositive radius are not drawn. If **r** is a channel, geometries will be sorted by descending radius by default.
 
-The **x** and **y** position channels may also be specified in conjunction with the **tip** option. <VersionBadge pr="2088" /> These are bound to the *x* and *y* scale (or projection), respectively.
+The **x** and **y** position channels may also be specified in conjunction with the **tip** option. <VersionBadge version="0.6.16" pr="2088" /> These are bound to the *x* and *y* scale (or projection), respectively.
 
 ## geo(*data*, *options*) {#geo}
 

docs/marks/waffle.md

@@ -25,7 +25,7 @@ onMounted(() => {
 
 </script>
 
-# Waffle mark <VersionBadge pr="2040" />
+# Waffle mark <VersionBadge version="0.6.16" pr="2040" />
 
 The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or quantitative extent) for a given category; but unlike a bar, a waffle is subdivided into square cells that allow easier counting. Waffles are useful for reading exact quantities. How quickly can you count the pears 🍐 below? How many more apples 🍎 are there than bananas 🍌?
 

docs/transforms/shift.md

@@ -47,7 +47,7 @@ Derives an **x1** channel from the input **x** channel by shifting values by the
 
 The shiftX transform also aliases the **x** channel to **x2** and applies a domain hint to the **x2** channel such that by default the plot shows only the intersection of **x1** and **x2**. For example, if the interval is *+1 year*, the first year of the data is not shown.
 
-## shiftY(*interval*, *options*) <VersionBadge pr="1922" /> {#shiftY}
+## shiftY(*interval*, *options*) <VersionBadge version="0.6.16" pr="1922" /> {#shiftY}
 
 ```js
 Plot.shiftY("7 days", {y: "Date", x: "Close"})

img/arc-diagram.png

@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/plot",
   "description": "A JavaScript library for exploratory data visualization.",
-  "version": "0.6.15",
+  "version": "0.6.16",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"