brush

closes #5

Author: Fil

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "d3-array": "^2.8.0",
     "d3-axis": "^2.0.0",
+    "d3-brush": "^2.0.0",
     "d3-color": "^2.0.0",
     "d3-interpolate": "^2.0.1",
     "d3-scale": "^3.2.3",

src/index.js

@@ -4,6 +4,7 @@ export {Area, area, areaX, areaY} from "./marks/area.js";
 export {AxisX, AxisY} from "./marks/axis.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.js";
 export {bin, binX, binY} from "./marks/bin.js";
+export {brush, brushX, brushY} from "./marks/brush.js";
 export {Cell, cell, cellX, cellY} from "./marks/cell.js";
 export {Dot, dot, dotX, dotY} from "./marks/dot.js";
 export {group, groupX, groupY} from "./marks/group.js";

src/marks/brush.js

@@ -0,0 +1,82 @@
+import {extent} from "d3-array";
+import {brush as brusher, brushX as brusherX, brushY as brusherY} from "d3-brush";
+import {create} from "d3-selection";
+import {filter} from "../defined.js";
+import {Mark, identity, first, second} from "../mark.js";
+import {Style} from "../style.js";
+
+export class Brush extends Mark {
+  constructor(
+    data,
+    {
+      x = first,
+      y = second,
+      transform,
+      ...style
+    } = {}
+  ) {
+    super(
+      data,
+      [
+        {name: "x", value: x, scale: "x", optional: true},
+        {name: "y", value: y, scale: "y", optional: true}
+      ],
+      transform
+    );
+    Style(this, style);
+  }
+  render(
+    I,
+    {x, y},
+    {x: X, y: Y},
+    {marginLeft, width, marginRight, marginTop, height, marginBottom}
+  ) {
+    const g = create("svg:g");
+
+    const brush = (x && y ? brusher : x ? brusherX : brusherY)()
+      .extent([
+        [marginLeft, marginTop],
+        [width - marginRight, height - marginBottom]
+      ])
+      .on("start brush end", ({ selection }) => {
+        let index = filter(I, X, Y);
+        if (selection) {
+          if (x) {
+            const e = y ? [selection[0][0], selection[1][0]] : selection;
+            const [x0, x1] = extent(e.map(x.invert));
+            index = index.filter(i => X[i] >= x0 && X[i] < x1);
+          }
+          if (y) {
+            const e = x ? [selection[0][1], selection[1][1]] : selection;
+            const [y0, y1] = extent(e.map(y.invert));
+            index = index.filter(i => Y[i] >= y0 && Y[i] < y1);
+          }
+        }
+  
+        const dots = Array.from(index, i => this.data[i]);
+      
+        const parent = g.node().ownerSVGElement;
+        parent.value = dots;
+        parent.dispatchEvent(new CustomEvent('input'));
+      });
+  
+    g.call(brush);
+    
+    /* 🌶 async (wait for the ownerSVGElement to send the first signal) */
+    setTimeout(() => g.call(brush.clear), 1);
+  
+    return g.node();
+  }
+}
+
+export function brush(data, options) {
+  return new Brush(data, options);
+}
+
+export function brushX(data, {x = identity, ...options} = {}) {
+  return new Brush(data, {...options, x, y: null});
+}
+
+export function brushY(data, {y = identity, ...options} = {}) {
+  return new Brush(data, {...options, x: null, y});
+}

yarn.lock

@@ -297,11 +297,40 @@ d3-axis@^2.0.0:
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-2.0.0.tgz#40aebb65626ffe6d95e9441fbf9194274b328a8b"
   integrity sha512-9nzB0uePtb+u9+dWir+HTuEAKJOEUYJoEwbJPsZ1B4K3iZUgzJcSENQ05Nj7S4CIfbZZ8/jQGoUzGKFznBhiiQ==
 
+d3-brush@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
+  integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-drag "2"
+    d3-interpolate "1 - 2"
+    d3-selection "2"
+    d3-transition "2"
+
 "d3-color@1 - 2", d3-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
   integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
 
+"d3-dispatch@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
+  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
+
+d3-drag@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-2.0.0.tgz#9eaf046ce9ed1c25c88661911c1d5a4d8eb7ea6d"
+  integrity sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-selection "2"
+
+"d3-ease@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-2.0.0.tgz#fd1762bfca00dae4bacea504b1d628ff290ac563"
+  integrity sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==
+
 "d3-format@1 - 2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
@@ -338,7 +367,7 @@ d3-scale@^3.2.3:
     d3-time "1 - 2"
     d3-time-format "2 - 3"
 
-d3-selection@^2.0.0:
+d3-selection@2, d3-selection@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-2.0.0.tgz#94a11638ea2141b7565f883780dabc7ef6a61066"
   integrity sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==
@@ -362,6 +391,22 @@ d3-shape@^2.0.0:
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.0.0.tgz#ad7c127d17c67bd57a4c61f3eaecb81108b1e0ab"
   integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==
 
+"d3-timer@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
+  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
+
+d3-transition@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-2.0.0.tgz#366ef70c22ef88d1e34105f507516991a291c94c"
+  integrity sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==
+  dependencies:
+    d3-color "1 - 2"
+    d3-dispatch "1 - 2"
+    d3-ease "1 - 2"
+    d3-interpolate "1 - 2"
+    d3-timer "1 - 2"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"