Merge branch 'main' into fil/dx-dy

Author: Fil

CHANGELOG.md

@@ -0,0 +1,75 @@
+# Observable Plot - Changelog
+
+## 0.2.0
+
+*Not yet released.* These notes are a work in progress.
+
+[breaking] Plot is now published as an ES module.
+
+[breaking] Plot now depends on D3 7 or higher.
+
+[breaking] Plot now requires Node 12 or higher.
+
+### Marks
+
+The Plot.marks function provides *mark*.plot shorthand for array marks.
+
+The plot *marks* option now accepts render functions and nullish values as shorthand mark definitions. Nullish marks produce no output and are useful for conditional display (equivalent to the empty array).
+
+Marks now support more style options, including shapeRendering.
+
+Marks now support fill and stroke defaults more consistently.
+
+Marks now filter undefined values more consistently.
+
+Marks now handle collapsed domains.
+
+The link mark now supports shorthand for one-dimensional links.
+
+The rect mark now supports one-dimensional (and zero-dimensional) rects: the *x1*, *x2*, *y1* and *y2* channels are now optional.
+
+The text mark now uses attributes instead of styles for font rendering properties, improving compatibility with Firefox.
+
+### Scales
+
+New diverging scale types: *diverging-sqrt*, *diverging-pow*, *diverging-log*, *diverging-symlog*.
+
+New *quantile* scale type.
+
+New *threshold* scale type.
+
+The axis *line* option can be used to show a line along the *x* or *y* axis.
+
+### Facets
+
+When the facet *data* is null, a better error message is thrown.
+
+The mark *facet* option can be used to control whether a mark is faceted. The new *exclude* facet mode shows all data that are *not* present in the current facet.
+
+### Transforms
+
+The *outputs* argument to the bin transforms is now optional. It defaults to the *count* reducer for *y*, *x* and *fill* for Plot.binX, Plot.binY, and Plot.bin respectively. TODO Should the group transforms have similar default outputs?
+
+The bin and group transforms now support *filter*, *sort* and *reverse* options on the *outputs* object.
+
+The bin and group transforms now support the *distinct* and *mode* reducers.
+
+The bin and group transforms now propagate *z*, *fill*, and *stroke* channel values correctly on empty bins when the this channel is used for grouping.
+
+The default *thresholds* option for the bin transforms is now *auto* instead of *scott*, and applies a maximum limit of 200 bins to Scott’s rule.
+
+The normalize, window, and stack transforms can now accept a transform *options* argument in addition to an *inputs* argument that specifies the input channels. This allows makes these transforms more consistent with the other transforms, reduces ambiguity, and allows for additional shorthand.
+
+The select transforms now throw better error messages when required input channels are missing.
+
+The stack *offset* options have been renamed: *normalize* and *center* replace *expand* and *silhouette*, respectively. The old names are supported for backwards compatibility.
+
+The window *shift* option has been renamed to *anchor*. The *centered*, *leading*, and *trailing* shifts and replaced with *middle*, *start*, and *end* respectively. The old *shift* option is supported for backwards compatibility.
+
+The basic transforms are now available as explicit option transforms: Plot.filter, Plot.sort, and Plot.reverse. These are useful when you wish to control the order of these transforms with respect to other transforms such as Plot.bin and Plot.stack.
+
+When mark *transform* option is null, it is considered equivalent to undefined and no transform is applied instead of throwing an error.
+
+## 0.1.0
+
+Released May 3, 2021.

README.md

@@ -41,7 +41,7 @@
     "eslint": "^7.12.1",
     "htl": "^0.3.0",
     "js-beautify": "^1.13.0",
-    "jsdom": "^16.4.0",
+    "jsdom": "^17.0.0",
     "jsesc": "^3.0.2",
     "mocha": "^9.0.3",
     "module-alias": "^2.2.2",

package.json

@@ -14,6 +14,7 @@ export class AxisX {
     label,
     labelAnchor,
     labelOffset,
+    line,
     tickRotate
   } = {}) {
     this.name = name;
@@ -26,6 +27,7 @@ export class AxisX {
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
     this.labelOffset = number(labelOffset);
+    this.line = boolean(line);
     this.tickRotate = number(tickRotate);
   }
   render(
@@ -51,6 +53,7 @@ export class AxisX {
       label,
       labelAnchor,
       labelOffset,
+      line,
       tickRotate
     } = this;
     const offset = this.name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
@@ -62,7 +65,7 @@ export class AxisX {
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
-        .call(g => g.select(".domain").remove())
+        .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
           : fy ? gridFacetX(fy, -ty)
           : gridX(offsetSign * (marginBottom + marginTop - height)))
@@ -94,6 +97,7 @@ export class AxisY {
     label,
     labelAnchor,
     labelOffset,
+    line,
     tickRotate
   } = {}) {
     this.name = name;
@@ -106,6 +110,7 @@ export class AxisY {
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
     this.labelOffset = number(labelOffset);
+    this.line = boolean(line);
     this.tickRotate = number(tickRotate);
   }
   render(
@@ -129,6 +134,7 @@ export class AxisY {
       label,
       labelAnchor,
       labelOffset,
+      line,
       tickRotate
     } = this;
     const offset = this.name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
@@ -140,7 +146,7 @@ export class AxisY {
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
-        .call(g => g.select(".domain").remove())
+        .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
           : fx ? gridFacetY(fx, -tx)
           : gridY(offsetSign * (marginLeft + marginRight - width)))

src/axis.js

@@ -1,6 +1,8 @@
 import {cross, difference, groups, InternMap} from "d3";
 import {create} from "d3";
-import {Mark, values, first, second} from "./mark.js";
+import {Mark, first, second, markify} from "./mark.js";
+import {applyScales} from "./scales.js";
+import {filterStyles} from "./style.js";
 
 export function facets(data, {x, y, ...options}, marks) {
   return x === undefined && y === undefined
@@ -19,7 +21,7 @@ class Facet extends Mark {
       ],
       options
     );
-    this.marks = marks.flat(Infinity);
+    this.marks = marks.flat(Infinity).map(markify);
     // The following fields are set by initialize:
     this.marksChannels = undefined; // array of mark channels
     this.marksIndex = undefined; // array of mark indexes (for non-faceted marks)
@@ -70,13 +72,13 @@ class Facet extends Mark {
     }
     return {index, channels: [...channels, ...subchannels]};
   }
-  render(index, scales, channels, dimensions, axes) {
+  render(I, scales, channels, dimensions, axes) {
     const {marks, marksChannels, marksIndex, marksIndexByFacet} = this;
     const {fx, fy} = scales;
     const fyMargins = fy && {marginTop: 0, marginBottom: 0, height: fy.bandwidth()};
     const fxMargins = fx && {marginRight: 0, marginLeft: 0, width: fx.bandwidth()};
     const subdimensions = {...dimensions, ...fxMargins, ...fyMargins};
-    const marksValues = marksChannels.map(channels => values(channels, scales));
+    const marksValues = marksChannels.map(channels => applyScales(channels, scales));
     return create("svg:g")
         .call(g => {
           if (fy && axes.y) {
@@ -110,10 +112,12 @@ class Facet extends Mark {
             .each(function(key) {
               const marksFacetIndex = marksIndexByFacet.get(key) || marksIndex;
               for (let i = 0; i < marks.length; ++i) {
+                const values = marksValues[i];
+                const index = filterStyles(marksFacetIndex[i], values);
                 const node = marks[i].render(
-                  marksFacetIndex[i],
+                  index,
                   scales,
-                  marksValues[i],
+                  values,
                   subdimensions
                 );
                 if (node != null) this.appendChild(node);

src/facet.js

@@ -1,5 +1,5 @@
 export {plot} from "./plot.js";
-export {Mark, valueof} from "./mark.js";
+export {Mark, marks, valueof} from "./mark.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.js";
 export {Cell, cell, cellX, cellY} from "./marks/cell.js";
@@ -11,6 +11,9 @@ export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
+export {filter} from "./transforms/filter.js";
+export {reverse} from "./transforms/reverse.js";
+export {sort} from "./transforms/sort.js";
 export {bin, binX, binY} from "./transforms/bin.js";
 export {group, groupX, groupY, groupZ} from "./transforms/group.js";
 export {normalizeX, normalizeY} from "./transforms/normalize.js";

src/index.js

@@ -1,18 +1,22 @@
 import {color} from "d3";
-import {ascendingDefined, nonempty} from "./defined.js";
+import {nonempty} from "./defined.js";
 import {plot} from "./plot.js";
+import {styles} from "./style.js";
+import {basic} from "./transforms/basic.js";
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
 const TypedArray = Object.getPrototypeOf(Uint8Array);
 const objectToString = Object.prototype.toString;
 
 export class Mark {
-  constructor(data, channels = [], {facet = "auto", dx, dy, ...options} = {}) {
+  constructor(data, channels = [], options = {}, defaults) {
+    const {facet = "auto", dx, dy} = options;
     const names = new Set();
     this.data = data;
     this.facet = facet ? keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]) : null;
-    const {transform} = maybeTransform(options);
+    const {transform} = basic(options);
     this.transform = transform;
+    if (defaults !== undefined) channels = styles(this, options, channels, defaults);
     this.channels = channels.filter(channel => {
       const {name, value, optional} = channel;
       if (value == null) {
@@ -224,23 +228,6 @@ export function maybeLazyChannel(source) {
   return source == null ? [source] : lazyChannel(source);
 }
 
-// If both t1 and t2 are defined, returns a composite transform that first
-// applies t1 and then applies t2.
-export function maybeTransform({
-  filter: f1,
-  sort: s1,
-  reverse: r1,
-  transform: t1,
-  ...options
-} = {}, t2) {
-  if (t1 === undefined) {
-    if (f1 != null) t1 = filter(f1);
-    if (s1 != null) t1 = compose(t1, sort(s1));
-    if (r1) t1 = compose(t1, reverse);
-  }
-  return {...options, transform: compose(t1, t2)};
-}
-
 // Assuming that both x1 and x2 and lazy channels (per above), this derives a
 // new a channel that’s the average of the two, and which inherits the channel
 // label (if any). Both input channels are assumed to be quantitative. If either
@@ -265,69 +252,13 @@ export function maybeValue(value) {
     typeof value.transform !== "function") ? value : {value};
 }
 
-function compose(t1, t2) {
-  if (t1 == null) return t2 === null ? undefined : t2;
-  if (t2 == null) return t1 === null ? undefined : t1;
-  return (data, facets) => {
-    ({data, facets} = t1(data, facets));
-    return t2(arrayify(data), facets);
-  };
-}
-
-function sort(value) {
-  return (typeof value === "function" && value.length !== 1 ? sortCompare : sortValue)(value);
-}
-
-function sortCompare(compare) {
-  return (data, facets) => {
-    const compareData = (i, j) => compare(data[i], data[j]);
-    return {data, facets: facets.map(I => I.slice().sort(compareData))};
-  };
-}
-
-function sortValue(value) {
-  return (data, facets) => {
-    const V = valueof(data, value);
-    const compareValue = (i, j) => ascendingDefined(V[i], V[j]);
-    return {data, facets: facets.map(I => I.slice().sort(compareValue))};
-  };
-}
-
-function filter(value) {
-  return (data, facets) => {
-    const V = valueof(data, value);
-    return {data, facets: facets.map(I => I.filter(i => V[i]))};
-  };
-}
-
-function reverse(data, facets) {
-  return {data, facets: facets.map(I => I.slice().reverse())};
-}
-
 export function numberChannel(source) {
   return {
     transform: data => valueof(data, source, Float64Array),
     label: labelof(source)
   };
 }
 
-// TODO use Float64Array.from for position and radius scales?
-export function values(channels = [], scales) {
-  const values = Object.create(null);
-  for (let [name, {value, scale}] of channels) {
-    if (name !== undefined) {
-      if (scale !== undefined) {
-        scale = scales[scale];
-        if (scale !== undefined) {
-          value = Array.from(value, scale);
-        }
-      }
-      values[name] = value;
-    }
-  }
-  return values;
-}
-
 export function isOrdinal(values) {
   for (const value of values) {
     if (value == null) continue;
@@ -342,3 +273,22 @@ export function isTemporal(values) {
     return value instanceof Date;
   }
 }
+
+export function markify(mark) {
+  return mark instanceof Mark ? mark : new Render(mark);
+}
+
+class Render extends Mark {
+  constructor(render) {
+    super();
+    if (render == null) return;
+    if (typeof render !== "function") throw new TypeError("invalid mark");
+    this.render = render;
+  }
+  render() {}
+}
+
+export function marks(...marks) {
+  marks.plot = Mark.prototype.plot;
+  return marks;
+}