Sort bars!

src/defined.js

@@ -1,11 +1,15 @@
-import {ascending} from "d3-array";
+import {ascending, descending} from "d3-array";
 
 export function defined(x) {
   return x != null && !Number.isNaN(x);
 }
 
 export function ascendingDefined(a, b) {
-  return defined(a) - defined(b) || ascending(a, b);
+  return defined(b) - defined(a) || ascending(a, b);
+}
+
+export function descendingDefined(a, b) {
+  return defined(b) - defined(a) || descending(a, b);
 }
 
 export function nonempty(x) {

src/marks/bar.js

@@ -1,7 +1,7 @@
-import {ascending} from "d3-array";
+import {ascending, sort} from "d3-array";
 import {create} from "d3-selection";
-import {filter} from "../defined.js";
-import {Mark, number, maybeColor, maybeZero, indexOf, title} from "../mark.js";
+import {ascendingDefined, descendingDefined, filter} from "../defined.js";
+import {Mark, number, maybeColor, maybeZero, indexOf, take, title, range} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 
 export class AbstractBar extends Mark {
@@ -89,7 +89,7 @@ export class AbstractBar extends Mark {
 }
 
 export class BarX extends AbstractBar {
-  constructor(data, {x1, x2, y, ...options} = {}) {
+  constructor(data, {x1, x2, y, sort, ...options} = {}) {
     super(
       data,
       [
@@ -99,6 +99,12 @@ export class BarX extends AbstractBar {
       ],
       options
     );
+    this.sort = maybeSort(sort);
+  }
+  initialize(data, facets) {
+    const {index, channels} = super.initialize(data, facets);
+    if (this.sort) inferSortedDomain(this.sort, channels, "y", "x2");
+    return {index, channels};
   }
   _transform(selection, {x}) {
     selection.call(applyTransform, x, false);
@@ -117,7 +123,7 @@ export class BarX extends AbstractBar {
 }
 
 export class BarY extends AbstractBar {
-  constructor(data, {x, y1, y2, ...options} = {}) {
+  constructor(data, {x, y1, y2, sort, ...options} = {}) {
     super(
       data,
       [
@@ -127,6 +133,12 @@ export class BarY extends AbstractBar {
       ],
       options
     );
+    this.sort = maybeSort(sort);
+  }
+  initialize(data, facets) {
+    const {index, channels} = super.initialize(data, facets);
+    if (this.sort) inferSortedDomain(this.sort, channels, "x", "y2");
+    return {index, channels};
   }
   _transform(selection, {y}) {
     selection.call(applyTransform, false, y);
@@ -153,3 +165,27 @@ export function barY(data, {x = indexOf, y, y1, y2, ...options} = {}) {
   ([y1, y2] = maybeZero(y, y1, y2));
   return new BarY(data, {...options, x, y1, y2});
 }
+
+const inputOrder = Symbol("input");
+
+function maybeSort(order) {
+  if (!order) return;
+  if (typeof order === "function") return order;
+  switch (order) {
+    case true: case "descending": return descendingDefined;
+    case "ascending": return ascendingDefined;
+    case "input": return inputOrder;
+  }
+  throw new Error("invalid sort order");
+}
+
+function inferSortedDomain(order, channels, nameX, nameY) {
+  const [, x] = channels.find(([name]) => name === nameX);
+  const {value: X} = x;
+  if (order === inputOrder) {
+    x.domain = X;
+  } else {
+    const [, {value: Y}] = channels.find(([name]) => name === nameY);
+    x.domain = take(X, sort(range(X), (i, j) => order(Y[i], Y[j])));
+  }
+}

src/scales/ordinal.js

@@ -166,10 +166,11 @@ export function ScaleBand(key, channels, {
 }
 
 function inferDomain(channels) {
-  const domain = new Set();
-  for (const {value} of channels) {
+  const values = new Set();
+  for (const {value, domain} of channels) {
+    if (domain !== undefined) return domain;
     if (value === undefined) continue;
-    for (const v of value) domain.add(v);
+    for (const v of value) values.add(v);
   }
-  return sort(domain, ascendingDefined);
+  return sort(values, ascendingDefined);
 }

test/plots/letter-frequency-bar.js

@@ -10,12 +10,10 @@ export default async function() {
       grid: true
     },
     y: {
-      domain: d3.sort(alphabet, (a, b) => d3.descending(a.frequency, b.frequency)).map(d => d.letter),
-      invert: true, // TODO implicitly invert when band or point in y
       label: null
     },
     marks: [
-      Plot.barX(alphabet, {x: "frequency", y: "letter"}),
+      Plot.barX(alphabet, {x: "frequency", y: "letter", sort: "ascending"}),
       Plot.ruleX([0])
     ],
     height: 580