Merge branch 'main' into fil/dx-dy

Author: Fil

CHANGELOG.md

@@ -51,7 +51,7 @@ To run the tests:
 yarn test
 ```
 
-This will automatically generate any missing snapshots in `test/output`, which you should remember to `git add` before committing your changes. (If you forget, your PR will fail in CI, and you’ll get a reminder.)
+This will automatically generate any missing snapshots in `test/output`, which you should remember to `git add` before committing your changes. (If you forget, your PR will fail in CI, and you’ll get a reminder.) Changed snapshots are saved alongside the originals with a -changed suffix, for visual inspection. These should never be commited.
 
 If your code intentionally changes some of the existing snapshots, simply blow away the existing snapshots and run the tests again. You can then review what’s changed using `git diff`.
 

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/plot",
   "description": "A JavaScript library for exploratory data visualization.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"
@@ -43,7 +43,7 @@
     "js-beautify": "^1.13.0",
     "jsdom": "^17.0.0",
     "jsesc": "^3.0.2",
-    "mocha": "^9.0.3",
+    "mocha": "^9.1.0",
     "module-alias": "^2.2.2",
     "rollup": "^2.32.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -57,6 +57,6 @@
     "node": ">=12"
   },
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
+    "access": "public"
   }
 }

README.md

@@ -2,21 +2,21 @@ import {AxisX, AxisY} from "./axis.js";
 
 export function Axes(
   {x: xScale, y: yScale, fx: fxScale, fy: fyScale},
-  {x = {}, y = {}, fx = {}, fy = {}, grid, facet: {grid: facetGrid} = {}} = {}
+  {x = {}, y = {}, fx = {}, fy = {}, axis = true, grid, line, label, facet: {axis: facetAxis = axis, grid: facetGrid, label: facetLabel = label} = {}} = {}
 ) {
-  let {axis: xAxis = true} = x;
-  let {axis: yAxis = true} = y;
-  let {axis: fxAxis = true} = fx;
-  let {axis: fyAxis = true} = fy;
+  let {axis: xAxis = axis} = x;
+  let {axis: yAxis = axis} = y;
+  let {axis: fxAxis = facetAxis} = fx;
+  let {axis: fyAxis = facetAxis} = fy;
   if (!xScale) xAxis = null; else if (xAxis === true) xAxis = "bottom";
   if (!yScale) yAxis = null; else if (yAxis === true) yAxis = "left";
   if (!fxScale) fxAxis = null; else if (fxAxis === true) fxAxis = xAxis === "bottom" ? "top" : "bottom";
   if (!fyScale) fyAxis = null; else if (fyAxis === true) fyAxis = yAxis === "left" ? "right" : "left";
   return {
-    ...xAxis && {x: new AxisX({grid, ...x, axis: xAxis})},
-    ...yAxis && {y: new AxisY({grid, ...y, axis: yAxis})},
-    ...fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, ...fx, axis: fxAxis})},
-    ...fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, ...fy, axis: fyAxis})}
+    ...xAxis && {x: new AxisX({grid, line, label, ...x, axis: xAxis})},
+    ...yAxis && {y: new AxisY({grid, line, label, ...y, axis: yAxis})},
+    ...fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, label: facetLabel, ...fx, axis: fxAxis})},
+    ...fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, label: facetLabel, ...fy, axis: fyAxis})}
   };
 }
 

package.json

@@ -1,6 +1,6 @@
 import {axisTop, axisBottom, axisRight, axisLeft, create, format, utcFormat} from "d3";
 import {formatIsoDate} from "./format.js";
-import {boolean, number, string, keyword, maybeKeyword, constant, isTemporal} from "./mark.js";
+import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./mark.js";
 
 export class AxisX {
   constructor({
@@ -67,7 +67,7 @@ export class AxisX {
         .attr("font-family", null)
         .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
-          : fy ? gridFacetX(fy, -ty)
+          : fy ? gridFacetX(index, fy, -ty)
           : gridX(offsetSign * (marginBottom + marginTop - height)))
         .call(!label ? () => {} : g => g.append("text")
             .attr("fill", "currentColor")
@@ -148,7 +148,7 @@ export class AxisY {
         .attr("font-family", null)
         .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
-          : fx ? gridFacetY(fx, -tx)
+          : fx ? gridFacetY(index, fx, -tx)
           : gridY(offsetSign * (marginLeft + marginRight - width)))
         .call(!label ? () => {} : g => g.append("text")
             .attr("fill", "currentColor")
@@ -182,22 +182,24 @@ function gridY(x2) {
       .attr("x2", x2);
 }
 
-function gridFacetX(fy, ty) {
+function gridFacetX(index, fy, ty) {
   const dy = fy.bandwidth();
+  const domain = fy.domain();
   return g => g.selectAll(".tick")
     .append("path")
       .attr("stroke", "currentColor")
       .attr("stroke-opacity", 0.1)
-      .attr("d", fy.domain().map(v => `M0,${fy(v) + ty}v${dy}`).join(""));
+      .attr("d", (index ? take(domain, index) : domain).map(v => `M0,${fy(v) + ty}v${dy}`).join(""));
 }
 
-function gridFacetY(fx, tx) {
+function gridFacetY(index, fx, tx) {
   const dx = fx.bandwidth();
+  const domain = fx.domain();
   return g => g.selectAll(".tick")
     .append("path")
       .attr("stroke", "currentColor")
       .attr("stroke-opacity", 0.1)
-      .attr("d", fx.domain().map(v => `M${fx(v) + tx},0h${dx}`).join(""));
+      .attr("d", (index ? take(domain, index) : domain).map(v => `M${fx(v) + tx},0h${dx}`).join(""));
 }
 
 function createAxis(axis, scale, {ticks, tickSize, tickPadding, tickFormat}) {

src/axes.js

@@ -1,6 +1,6 @@
 import {cross, difference, groups, InternMap} from "d3";
 import {create} from "d3";
-import {Mark, first, second, markify} from "./mark.js";
+import {Mark, first, second, markify, where} from "./mark.js";
 import {applyScales} from "./scales.js";
 import {filterStyles} from "./style.js";
 
@@ -24,7 +24,6 @@ class Facet extends Mark {
     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)
     this.marksIndexByFacet = undefined; // map from facet key to array of mark indexes
   }
   initialize() {
@@ -34,7 +33,6 @@ class Facet extends Mark {
     const facetsIndex = Array.from(facets, second);
     const subchannels = [];
     const marksChannels = this.marksChannels = [];
-    const marksIndex = this.marksIndex = new Array(this.marks.length);
     const marksIndexByFacet = this.marksIndexByFacet = facetMap(channels);
     for (const facetKey of facetsKeys) {
       marksIndexByFacet.set(facetKey, new Array(this.marks.length));
@@ -47,7 +45,7 @@ class Facet extends Mark {
         : facet === "include" ? facetsIndex
         : facet === "exclude" ? facetsExclude || (facetsExclude = facetsIndex.map(f => Uint32Array.from(difference(index, f))))
         : undefined;
-      const {index: I, channels} = mark.initialize(markFacets);
+      const {index: I, channels: markChannels} = mark.initialize(markFacets, channels);
       // If an index is returned by mark.initialize, its structure depends on
       // whether or not faceting has been applied: it is a flat index ([0, 1, 2,
       // …]) when not faceted, and a nested index ([[0, 1, …], [2, 3, …], …])
@@ -57,60 +55,68 @@ class Facet extends Mark {
           for (let j = 0; j < facetsKeys.length; ++j) {
             marksIndexByFacet.get(facetsKeys[j])[i] = I[j];
           }
-          marksIndex[i] = []; // implicit empty index for sparse facets
         } else {
           for (let j = 0; j < facetsKeys.length; ++j) {
             marksIndexByFacet.get(facetsKeys[j])[i] = I;
           }
-          marksIndex[i] = I;
         }
       }
-      for (const [, channel] of channels) {
+      for (const [, channel] of markChannels) {
         subchannels.push([, channel]);
       }
-      marksChannels.push(channels);
+      marksChannels.push(markChannels);
     }
     return {index, channels: [...channels, ...subchannels]};
   }
   render(I, scales, channels, dimensions, axes) {
-    const {marks, marksChannels, marksIndex, marksIndexByFacet} = this;
+    const {marks, marksChannels, marksIndexByFacet} = this;
     const {fx, fy} = scales;
+    const fyDomain = fy && fy.domain();
+    const fxDomain = fx && fx.domain();
     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 => applyScales(channels, scales));
     return create("svg:g")
         .call(g => {
           if (fy && axes.y) {
-            const domain = fy.domain();
             const axis1 = axes.y, axis2 = nolabel(axis1);
-            const j = axis1.labelAnchor === "bottom" ? domain.length - 1 : axis1.labelAnchor === "center" ? domain.length >> 1 : 0;
+            const j = axis1.labelAnchor === "bottom" ? fyDomain.length - 1 : axis1.labelAnchor === "center" ? fyDomain.length >> 1 : 0;
             const fyDimensions = {...dimensions, ...fyMargins};
             g.selectAll()
-              .data(domain)
+              .data(fyDomain)
               .join("g")
               .attr("transform", ky => `translate(0,${fy(ky)})`)
-              .append((_, i) => (i === j ? axis1 : axis2).render(null, scales, null, fyDimensions));
+              .append((ky, i) => (i === j ? axis1 : axis2).render(
+                fx && where(fxDomain, kx => marksIndexByFacet.has([kx, ky])),
+                scales,
+                null,
+                fyDimensions
+              ));
           }
           if (fx && axes.x) {
-            const domain = fx.domain();
             const axis1 = axes.x, axis2 = nolabel(axis1);
-            const j = axis1.labelAnchor === "right" ? domain.length - 1 : axis1.labelAnchor === "center" ? domain.length >> 1 : 0;
+            const j = axis1.labelAnchor === "right" ? fxDomain.length - 1 : axis1.labelAnchor === "center" ? fxDomain.length >> 1 : 0;
             const {marginLeft, marginRight} = dimensions;
             const fxDimensions = {...dimensions, ...fxMargins, labelMarginLeft: marginLeft, labelMarginRight: marginRight};
             g.selectAll()
-              .data(domain)
+              .data(fxDomain)
               .join("g")
               .attr("transform", kx => `translate(${fx(kx)},0)`)
-              .append((_, i) => (i === j ? axis1 : axis2).render(null, scales, null, fxDimensions));
+              .append((kx, i) => (i === j ? axis1 : axis2).render(
+                fy && where(fyDomain, ky => marksIndexByFacet.has([kx, ky])),
+                scales,
+                null,
+                fxDimensions
+              ));
           }
         })
         .call(g => g.selectAll()
-          .data(facetKeys(scales))
+          .data(facetKeys(scales).filter(marksIndexByFacet.has, marksIndexByFacet))
           .join("g")
             .attr("transform", facetTranslate(fx, fy))
             .each(function(key) {
-              const marksFacetIndex = marksIndexByFacet.get(key) || marksIndex;
+              const marksFacetIndex = marksIndexByFacet.get(key);
               for (let i = 0; i < marks.length; ++i) {
                 const values = marksValues[i];
                 const index = filterStyles(marksFacetIndex[i], values);

src/axis.js

@@ -1,19 +1,23 @@
+import {ascending, descending, rollup, sort} from "d3";
 import {color} from "d3";
 import {nonempty} from "./defined.js";
 import {plot} from "./plot.js";
+import {registry} from "./scales/index.js";
 import {styles} from "./style.js";
 import {basic} from "./transforms/basic.js";
+import {maybeReduce} from "./transforms/group.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 = [], options = {}, defaults) {
-    const {facet = "auto", dx, dy} = options;
+    const {facet = "auto", sort, dx, dy} = options;
     const names = new Set();
     this.data = data;
-    this.facet = facet ? keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]) : null;
+    this.sort = isOptions(sort) ? sort : null;
+    this.facet = facet == null || facet === false ? null : keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]);
     const {transform} = basic(options);
     this.transform = transform;
     if (defaults !== undefined) channels = styles(this, options, channels, defaults);
@@ -34,7 +38,7 @@ export class Mark {
     this.dx = +dx || 0;
     this.dy = +dy || 0;
   }
-  initialize(facets) {
+  initialize(facets, facetChannels) {
     let data = arrayify(this.data);
     let index = facets === undefined && data != null ? range(data) : facets;
     if (data !== undefined && this.transform !== undefined) {
@@ -43,13 +47,12 @@ export class Mark {
       data = arrayify(data);
       if (facets === undefined && index.length) ([index] = index);
     }
-    return {
-      index,
-      channels: this.channels.map(channel => {
-        const {name} = channel;
-        return [name == null ? undefined : name + "", Channel(data, channel)];
-      })
-    };
+    const channels = this.channels.map(channel => {
+      const {name} = channel;
+      return [name == null ? undefined : name + "", Channel(data, channel)];
+    });
+    if (this.sort != null) channelSort(channels, facetChannels, data, this.sort);
+    return {index, channels};
   }
   plot({marks = [], ...options} = {}) {
     return plot({...options, marks: [...marks, this]});
@@ -66,6 +69,43 @@ function Channel(data, {scale, type, value}) {
   };
 }
 
+function channelSort(channels, facetChannels, data, options) {
+  const {reverse: defaultReverse, reduce: defaultReduce = true, limit: defaultLimit} = options;
+  for (const x in options) {
+    if (!registry.has(x)) continue; // ignore unknown scale keys
+    const {value: y, reverse = defaultReverse, reduce = defaultReduce, limit = defaultLimit} = maybeValue(options[x]);
+    if (reduce == null || reduce === false) continue; // disabled reducer
+    const X = channels.find(([, {scale}]) => scale === x) || facetChannels && facetChannels.find(([, {scale}]) => scale === x);
+    if (!X) throw new Error(`missing channel for scale: ${x}`);
+    const XV = X[1].value;
+    const [lo = 0, hi = Infinity] = limit && typeof limit[Symbol.iterator] === "function" ? limit : limit < 0 ? [limit] : [0, limit];
+    if (y == null) {
+      X[1].domain = () => {
+        let domain = XV;
+        if (reverse) domain = domain.slice().reverse();
+        if (lo !== 0 || hi !== Infinity) domain = domain.slice(lo, hi);
+        return domain;
+      };
+    } else {
+      let YV;
+      if (y === "data") {
+        YV = data;
+      } else {
+        const Y = channels.find(([name]) => name === y);
+        if (!Y) throw new Error(`missing channel: ${y}`);
+        YV = Y[1].value;
+      }
+      const reducer = maybeReduce(reduce === true ? "max" : reduce, YV);
+      X[1].domain = () => {
+        let domain = rollup(range(XV), I => reducer.reduce(I, YV), i => XV[i]);
+        domain = sort(domain, reverse ? descendingGroup : ascendingGroup);
+        if (lo !== 0 || hi !== Infinity) domain = domain.slice(lo, hi);
+        return domain.map(first);
+      };
+    }
+  }
+}
+
 // This allows transforms to behave equivalently to channels.
 export function valueof(data, value, type) {
   const array = type === undefined ? Array : type;
@@ -143,6 +183,14 @@ export function arrayify(data, type) {
     : (data instanceof type ? data : type.from(data)));
 }
 
+// Disambiguates an options object (e.g., {y: "x2"}) from a channel value
+// definition expressed as a channel transform (e.g., {transform: …}).
+export function isOptions(option) {
+  return option
+    && option.toString === objectToString
+    && typeof option.transform !== "function";
+}
+
 // For marks specified either as [0, x] or [x1, x2], such as areas and bars.
 export function maybeZero(x, x1, x2, x3 = identity) {
   if (x1 === undefined && x2 === undefined) { // {x} or {}
@@ -189,6 +237,11 @@ export function range(data) {
   return Uint32Array.from(data, indexOf);
 }
 
+// Returns a filtered range of data given the test function.
+export function where(data, test) {
+  return range(data).filter(i => test(data[i], i, data));
+}
+
 // Returns an array [values[index[0]], values[index[1]], …].
 export function take(values, index) {
   return Array.from(index, i => values[i]);
@@ -247,9 +300,7 @@ export function mid(x1, x2) {
 
 // This distinguishes between per-dimension options and a standalone value.
 export function maybeValue(value) {
-  return value === undefined || (value &&
-    value.toString === objectToString &&
-    typeof value.transform !== "function") ? value : {value};
+  return value === undefined || isOptions(value) ? value : {value};
 }
 
 export function numberChannel(source) {
@@ -292,3 +343,11 @@ export function marks(...marks) {
   marks.plot = Mark.prototype.plot;
   return marks;
 }
+
+function ascendingGroup([ak, av], [bk, bv]) {
+  return ascending(av, bv) || ascending(ak, bk);
+}
+
+function descendingGroup([ak, av], [bk, bv]) {
+  return descending(av, bv) || ascending(ak, bk);
+}

src/facet.js

@@ -1,6 +1,6 @@
 import {registry, position, radius, opacity} from "./scales/index.js";
 import {ScaleLinear, ScaleSqrt, ScalePow, ScaleLog, ScaleSymlog, ScaleQuantile, ScaleThreshold, ScaleIdentity} from "./scales/quantitative.js";
-import {ScaleDiverging, ScaleDivergingSqrt, ScaleDivergingPow, ScaleDivergingLog, ScaleDivergingSymlog} from "./scales/quantitative.js";
+import {ScaleDiverging, ScaleDivergingSqrt, ScaleDivergingPow, ScaleDivergingLog, ScaleDivergingSymlog} from "./scales/diverging.js";
 import {ScaleTime, ScaleUtc} from "./scales/temporal.js";
 import {ScaleOrdinal, ScalePoint, ScaleBand} from "./scales/ordinal.js";
 import {isOrdinal, isTemporal} from "./mark.js";