Merge branch 'main' into mbostock/pointer

Author: mbostock

CHANGELOG.md

@@ -1,11 +1,15 @@
 # Observable Plot - Changelog
 
-## 0.4.1
+## 0.4.2
 
 *Not yet released. These are forthcoming changes in the main branch.*
 
 Plot now supports [interaction marks](./README.md#interactions)! An interaction mark defines an interactive selection represented as a subset of the mark’s data. For example, the [brush mark](./README.md#brush) allows rectangular selection by clicking and dragging; you can use a brush to select points of interest from a scatterplot and show them in a table. The interactive selection is exposed as *plot*.value. When the selection changes during interaction, the plot emits *input* events. This allows plots to be [Observable views](https://observablehq.com/@observablehq/introduction-to-views), but you can also [listen to *input* events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) directly.
 
+## 0.4.1
+
+*Not yet released. These are forthcoming changes in the main branch.*
+
 The [text mark](./README.md#text) now supports automatic wrapping! The new **lineWidth** option specifies the desired length of a line in ems. The line breaking, wrapping, and text metrics implementations are all rudimentary, but they should be acceptable for text that is mostly ASCII. (For more control, you can hard-wrap text manually.) The **monospace** option now provides convenient defaults for monospaced text.
 
 Plot now supports ARIA attributes for improved accessibility: aria-label, aria-description, aria-hidden. The top-level **ariaLabel** and **ariaDescription** options apply to the root SVG element. The new **ariaLabel** and **ariaDescription** scale options apply to axes; the label defaults to *e.g.* “y-axis” and the description defaults to the scale’s label (*e.g.*, “↑ temperature”). Marks define a group-level aria-label (*e.g.*, “dot”). There is also an optional **ariaLabel** channel for labeling data (*e.g.*, “E 12.7%”), and a group-level **ariaDescription** option for a human-readable description. The **ariaHidden** mark option allows the hiding of decorative elements from the accessibility tree.
@@ -14,13 +18,15 @@ The line and link marks now support [marker options](./README.md#markers) for dr
 
 The new **paintOrder** mark option controls the [paint order](https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order). The text mark’s paint order now defaults to *stroke*, with a stroke width of 3px and a stroke linejoin of *round*, making it easier to create a halo for separating labels from a busy background, improving legibility.
 
-The *fill* and *stroke* mark options can now be expressed as patterns or gradients using funciri color definitions, *e.g.* “url(#pattern)”.
+The *fill* and *stroke* mark options can now be expressed as patterns or gradients using funciri color definitions, *e.g.* “url(#pattern)”. All marks now support the *strokeDashoffset* option (for use with *strokeDasharray*).
+
+When a color scale is associated exclusively with boolean values (true and false), a smarter default range is now chosen: light gray for false, and dark gray for true. Light and dark colors from different sequential schemes, such as *reds*, can be specified via the *scheme* option.
 
-Better boolean color schemes.
+The bin transform now supports the *interval* option, allowing numeric intervals such as integer binning with a nice default domain that aligns with interval boundaries. (The bin transform already supported time intervals as the *thresholds* option; time intervals can now also be specified as the *interval* option.)
 
-Fix crash in default tuple accessors for *x* and *y* when data is undefined. Fix a bug where “none” with surrounding whitespace or capital letters would not be recognized as a valid color. When a channel is specified as a boolean (*e.g.*, `fill: true`), it is now considered a constant value rather than undefined.
+The returned scale object now exposes *bandwidth* and *step* values for *band* and *point* scales.
 
-The vector mark now supports *frameAnchor*.
+Fix a crash in default tuple accessors for *x* and *y* when data is undefined. Fix a bug where “none” with surrounding whitespace or capital letters would not be recognized as a valid color. When a channel is specified as a boolean value (*e.g.*, `fill: true`), it is now considered a constant value rather than undefined. Fix a bug where an identity color legend would be rendered as the text “undefined” instead of showing nothing. The vector mark now respects the *frameAnchor* option.
 
 ## 0.4.0
 

README.md

@@ -231,7 +231,7 @@ const plot2 = Plot.plot({…, color: plot1.scale("color")});
 
 The returned scale object represents the actual (or “materialized”) values encountered in the plot, including the domain, range, interpolate function, *etc.* The scale’s label, if any, is also returned; however, note that other axis properties are not currently exposed.
 
-For convenience, an apply method is exposed, which returns the scale’s output for any given input. When applicable, an invert method is exposed, which returns the corresponding input from the scale’s domain for any given output.
+For convenience, an apply method is exposed, which returns the scale’s output for any given input. When applicable, an invert method is exposed, which returns the corresponding input from the scale’s domain for any given output. Point and band scales also expose their materialized bandwidth and step.
 
 The scale object is undefined if the associated plot has no scale with the given *name*, and throws an error if the *name* is invalid (*i.e.*, not one of the known scale names: *x*, *y*, *fx*, *fy*, *r*, *color*, or *opacity*).
 
@@ -450,7 +450,7 @@ Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: {value: "y", reverse
 
 If the input channel is *data*, then the reducer is passed groups of the mark’s data; this is typically used in conjunction with a custom reducer function, as when the built-in single-channel reducers are insufficient.
 
-Note: when a string or a function, the sort option is interpreted as a [basic sort transform](#transforms). To use both sort options and a sort transform, use [Plot.sort](#plotsortorder-options).
+Note: when the value of the sort option is a string or a function, it is interpreted as a [basic sort transform](#transforms). To use both sort options and a sort transform, use [Plot.sort](#plotsortorder-options).
 
 ### Facet options
 
@@ -622,7 +622,8 @@ All marks support the following style options:
 * **strokeLinejoin** - how to join lines (*bevel*, *miter*, *miter-clip*, or *round*)
 * **strokeLinecap** - how to cap lines (*butt*, *round*, or *square*)
 * **strokeMiterlimit** - to limit the length of *miter* joins
-* **strokeDasharray** - a comma-separated list of dash lengths (in pixels)
+* **strokeDasharray** - a comma-separated list of dash lengths (typically in pixels)
+* **strokeDashoffset** - the [stroke dash offset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) (typically in pixels)
 * **opacity** - object opacity (a number between 0 and 1)
 * **mixBlendMode** - the [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) (*e.g.*, *multiply*)
 * **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*)
@@ -646,6 +647,7 @@ All marks support the following optional channels:
 * **title** - a tooltip (a string of text, possibly with newlines)
 * **href** - a URL to link to
 * **ariaLabel** - a short label representing the value in the accessibility tree
+* **clip** - if true, the mark is clipped to the frame’s dimensions
 
 The **fill**, **fillOpacity**, **stroke**, **strokeWidth**, **strokeOpacity**, and **opacity** options can be specified as either channels or constants. When the fill or stroke is specified as a function or array, it is interpreted as a channel; when the fill or stroke is specified as a string, it is interpreted as a constant if a valid CSS color and otherwise it is interpreted as a column name for a channel. Similarly when the fill opacity, stroke opacity, object opacity, stroke width, or radius is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
 

src/legends.js

@@ -76,7 +76,8 @@ export function Legends(scales, options) {
   for (const [key, value] of legendRegistry) {
     const o = options[key];
     if (o && o.legend) {
-      legends.push(value(scales[key], legendOptions(scales[key], o), key => scales[key]));
+      const legend = value(scales[key], legendOptions(scales[key], o), key => scales[key]);
+      if (legend != null) legends.push(legend);
     }
   }
   return legends;

src/marks/area.js

@@ -30,11 +30,11 @@ export class Area extends Mark {
     );
     this.curve = Curve(curve, tension);
   }
-  render(I, {x, y}, channels) {
+  render(I, {x, y}, channels, dimensions) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, z: Z} = channels;
     const {dx, dy} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, dx, dy)
         .call(g => g.selectAll()
           .data(Z ? group(I, i => Z[i]).values() : [I])

src/marks/arrow.js

@@ -44,7 +44,7 @@ export class Arrow extends Mark {
     this.insetStart = +insetStart;
     this.insetEnd = +insetEnd;
   }
-  render(index, {x, y}, channels) {
+  render(index, {x, y}, channels, dimensions) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, SW} = channels;
     const {dx, dy, strokeWidth, bend, headAngle, headLength, insetStart, insetEnd} = this;
     const sw = SW ? i => SW[i] : () => strokeWidth;
@@ -65,7 +65,7 @@ export class Arrow extends Mark {
     const wingScale = headLength / 1.5;
 
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)

src/marks/bar.js

@@ -21,7 +21,7 @@ export class AbstractBar extends Mark {
   render(index, scales, channels, dimensions) {
     const {dx, dy, rx, ry} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(this._transform, scales, dx, dy)
         .call(g => g.selectAll()
           .data(index)

src/marks/brush.js

@@ -29,7 +29,7 @@ export class Brush extends Mark {
     const {marginLeft, width, marginRight, marginTop, height, marginBottom} = dimensions;
     const brush = this;
     const g = create("svg:g")
-        .call(applyIndirectStyles, {ariaLabel, ariaDescription, ariaHidden})
+        .call(applyIndirectStyles, {ariaLabel, ariaDescription, ariaHidden}, dimensions)
         .call((X && Y ? brusher : X ? brusherX : brusherY)()
           .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]])
           .on("start brush end", function(event) {
@@ -65,7 +65,7 @@ export class Brush extends Mark {
           }))
         .call(g => g.selectAll(".selection")
           .attr("shape-rendering", null) // reset d3-brush
-          .call(applyIndirectStyles, options)
+          .call(applyIndirectStyles, options, dimensions)
           .call(applyDirectStyles, options))
       .node();
     g[selection] = null;

src/marks/dot.js

@@ -54,7 +54,7 @@ export class Dot extends Mark {
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     const circle = this.symbol === symbolCircle;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)

src/marks/frame.js

@@ -28,7 +28,7 @@ export class Frame extends Mark {
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
     const {insetTop, insetRight, insetBottom, insetLeft, dx, dy} = this;
     return create("svg:rect")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyDirectStyles, this)
         .call(applyTransform, null, null, offset + dx, offset + dy)
         .attr("x", marginLeft + insetLeft)

src/marks/image.js

@@ -64,7 +64,7 @@ export class Image extends Mark {
     const {dx, dy} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)

src/marks/line.js

@@ -30,11 +30,11 @@ export class Line extends Mark {
     this.curve = Curve(curve, tension);
     markers(this, options);
   }
-  render(I, {x, y}, channels) {
+  render(I, {x, y}, channels, dimensions) {
     const {x: X, y: Y, z: Z} = channels;
     const {dx, dy} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(Z ? group(I, i => Z[i]).values() : [I])

src/marks/link.js

@@ -28,11 +28,11 @@ export class Link extends Mark {
     this.curve = Curve(curve, tension);
     markers(this, options);
   }
-  render(index, {x, y}, channels) {
+  render(index, {x, y}, channels, dimensions) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
     const {dx, dy, curve} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)

src/marks/pointer.js

@@ -44,7 +44,7 @@ export class Pointer extends Mark {
     const g = create("svg:g");
 
     const parent = g.append("g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyDirectStyles, this)
       .node();
 

src/marks/rect.js

@@ -49,7 +49,7 @@ export class Rect extends Mark {
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
     const {insetTop, insetRight, insetBottom, insetLeft, dx, dy, rx, ry} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, dx, dy)
         .call(g => g.selectAll()
           .data(index)

src/marks/rule.js

@@ -39,7 +39,7 @@ export class RuleX extends Mark {
     const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
     const {insetTop, insetBottom} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, X && x, null, offset, 0)
         .call(g => g.selectAll("line")
           .data(index)
@@ -82,7 +82,7 @@ export class RuleY extends Mark {
     const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
     const {insetLeft, insetRight, dx, dy} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, null, Y && y, dx, offset + dy)
         .call(g => g.selectAll("line")
           .data(index)

src/marks/text.js

@@ -63,7 +63,8 @@ export class Text extends Mark {
     const {dx, dy, rotate} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g")
-        .call(applyIndirectTextStyles, this, T)
+        .call(applyIndirectStyles, this, dimensions)
+        .call(applyIndirectTextStyles, this, T, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
@@ -129,7 +130,6 @@ export function textY(data, {y = identity, ...options} = {}) {
 }
 
 function applyIndirectTextStyles(selection, mark, T) {
-  applyIndirectStyles(selection, mark);
   applyAttr(selection, "text-anchor", mark.textAnchor);
   applyAttr(selection, "font-family", mark.fontFamily);
   applyAttr(selection, "font-size", mark.fontSize);

src/marks/tick.js

@@ -16,7 +16,7 @@ class AbstractTick extends Mark {
   render(index, scales, channels, dimensions) {
     const {dx, dy} = this;
     return create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(this._transform, scales, dx, dy)
         .call(g => g.selectAll("line")
           .data(index)

src/marks/vector.js

@@ -44,7 +44,7 @@ export class Vector extends Mark {
     const k = anchor === "start" ? 0 : anchor === "end" ? 1 : 0.5;
     return create("svg:g")
         .attr("fill", "none")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)

src/options.js

@@ -1,3 +1,4 @@
+import {parse as isoParse} from "isoformat";
 import {color, descending} from "d3";
 import {symbolAsterisk, symbolDiamond2, symbolPlus, symbolSquare2, symbolTriangle2, symbolX as symbolTimes} from "d3";
 import {symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "d3";
@@ -210,6 +211,26 @@ export function isTemporal(values) {
   }
 }
 
+// Are these strings that might represent dates? This is stricter than ISO 8601
+// because we want to ignore false positives on numbers; for example, the string
+// "1192" is more likely to represent a number than a date even though it is
+// valid ISO 8601 representing 1192-01-01.
+export function isTemporalString(values) {
+  for (const value of values) {
+    if (value == null) continue;
+    return typeof value === "string" && isNaN(value) && isoParse(value);
+  }
+}
+
+// Are these strings that might represent numbers? This is stricter than
+// coercion because we want to ignore false positives on e.g. empty strings.
+export function isNumericString(values) {
+  for (const value of values) {
+    if (value == null || value === "") continue;
+    return typeof value === "string" && !isNaN(value);
+  }
+}
+
 export function isNumeric(values) {
   for (const value of values) {
     if (value == null) continue;