faceted selections

Author: mbostock

src/marks/brush.js

@@ -1,4 +1,4 @@
-import {brush as brusher, brushX as brusherX, brushY as brusherY, create} from "d3";
+import {brush as brusher, brushX as brusherX, brushY as brusherY, create, select} from "d3";
 import {identity, maybeTuple} from "../options.js";
 import {Mark} from "../plot.js";
 
@@ -24,20 +24,33 @@ export class Brush extends Mark {
       options,
       defaults
     );
+    this.currentElement = null;
   }
   render(index, scales, {x: X, y: Y}, dimensions) {
     const {marginLeft, width, marginRight, marginTop, height, marginBottom} = dimensions;
     const left = marginLeft;
     const top = marginTop;
     const right = width - marginRight;
     const bottom = height - marginBottom;
-    return create("svg:g")
+    const mark = this;
+    const g = create("svg:g")
         .call((X && Y ? brusher : X ? brusherX : brusherY)()
           .extent([[left, top], [right, bottom]])
           .on("start brush end", function(event) {
-            const {selection} = event;
-            let S = index;
+            const {type, selection} = event;
+            // For faceting, when starting a brush in a new facet, clear the
+            // brush and selection on the old facet. In the future, we might
+            // allow independent brushes across facets by disabling this?
+            if (type === "start" && mark.currentElement !== this) {
+              if (mark.currentElement !== null) {
+                select(mark.currentElement).call(event.target.clear, event);
+                mark.currentElement.selection = null;
+              }
+              mark.currentElement = this;
+            }
+            let S = null;
             if (selection) {
+              S = index;
               if (X) {
                 const [x0, x1] = Y ? [selection[0][0], selection[1][0]] : selection;
                 S = S.filter(i => x0 <= X[i] && X[i] <= x1);
@@ -50,8 +63,9 @@ export class Brush extends Mark {
             this.selection = S;
             this.dispatchEvent(new Event("input", {bubbles: true}));
           }))
-        .property("selection", index)
       .node();
+    g.selection = null;
+    return g;
   }
 }
 

src/plot.js

@@ -1,4 +1,4 @@
-import {create, cross, difference, groups, InternMap} from "d3";
+import {create, cross, difference, groups, InternMap, select, union} from "d3";
 import {Axes, autoAxisTicks, autoScaleLabels} from "./axes.js";
 import {Channel, channelSort} from "./channel.js";
 import {defined} from "./defined.js";
@@ -93,18 +93,19 @@ export function plot(options = {}) {
       .call(applyInlineStyles, style)
     .node();
 
-  let value;
+  let initialValue;
   for (const mark of marks) {
     const channels = markChannels.get(mark) ?? [];
     const values = applyScales(channels, scales);
     const index = filter(markIndex.get(mark), channels, values);
     const node = mark.render(index, scales, values, dimensions, axes);
     if (node != null) {
-      // TODO More explicit indication that a mark defines a value?
-      // TODO Will the name “selection” lead to a false positive on random SVG elements?
+      // TODO A more explicit indication that a mark defines a value (e.g., a symbol)?
       if (node.selection !== undefined) {
-        value = take(mark.data, node.selection);
-        node.addEventListener("input", () => figure.value = take(mark.data, node.selection));
+        initialValue = markValue(mark, node.selection);
+        node.addEventListener("input", () => {
+          figure.value = markValue(mark, node.selection);
+        });
       }
       svg.appendChild(node);
     }
@@ -126,7 +127,7 @@ export function plot(options = {}) {
 
   figure.scale = exposeScales(scaleDescriptors);
   figure.legend = exposeLegends(scaleDescriptors, options);
-  figure.value = value;
+  figure.value = initialValue;
   return figure;
 }
 
@@ -197,6 +198,10 @@ function markify(mark) {
   return mark instanceof Mark ? mark : new Render(mark);
 }
 
+function markValue(mark, selection) {
+  return selection === null ? mark.data : take(mark.data, selection);
+}
+
 class Render extends Mark {
   constructor(render) {
     super();
@@ -271,16 +276,17 @@ class Facet extends Mark {
     }
     return {index, channels: [...channels, ...subchannels]};
   }
-  render(I, scales, channels, dimensions, axes) {
-    const {marks, marksChannels, marksIndexByFacet} = this;
+  render(I, scales, _, dimensions, axes) {
+    const {data, channels, 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")
+    let selectionByFacet;
+    const parent = create("svg:g")
         .call(g => {
           if (fy && axes.y) {
             const axis1 = axes.y, axis2 = nolabel(axis1);
@@ -324,10 +330,25 @@ class Facet extends Mark {
                 const values = marksValues[i];
                 const index = filter(marksFacetIndex[i], marksChannels[i], values);
                 const node = marks[i].render(index, scales, values, subdimensions);
-                if (node != null) this.appendChild(node);
+                if (node != null) {
+                  if (node.selection !== undefined) {
+                    if (marks[i].data !== data) throw new Error("selection must use facet data");
+                    if (selectionByFacet === undefined) selectionByFacet = facetMap(channels);
+                    selectionByFacet.set(key, node.selection);
+                    node.addEventListener("input", () => {
+                      selectionByFacet.set(key, node.selection);
+                      parent.selection = facetSelection(selectionByFacet);
+                    });
+                  }
+                  this.appendChild(node);
+                }
               }
             }))
       .node();
+    if (selectionByFacet !== undefined) {
+      parent.selection = facetSelection(selectionByFacet);
+    }
+    return parent;
   }
 }
 
@@ -370,6 +391,17 @@ function facetTranslate(fx, fy) {
     : ky => `translate(0,${fy(ky)})`;
 }
 
+// If multiple facets define a selection, then the overall selection is the
+// union of the defined selections.
+function facetSelection(selectionByFacet) {
+  let selection = null;
+  for (const value of selectionByFacet.values()) {
+    if (value === null) continue;
+    selection = selection === null ? value : union(selection, value);
+  }
+  return selection;
+}
+
 function facetMap(channels) {
   return new (channels.length > 1 ? FacetMap2 : FacetMap);
 }
@@ -387,6 +419,9 @@ class FacetMap {
   set(key, value) {
     return this._.set(key, value), this;
   }
+  values() {
+    return this._.values();
+  }
 }
 
 // A Map-like interface that supports paired keys.
@@ -405,4 +440,9 @@ class FacetMap2 extends FacetMap {
     else super.set(key1, new InternMap([[key2, value]]));
     return this;
   }
+  *values() {
+    for (const map of this._.values()) {
+      yield* map.values();
+    }
+  }
 }

test/plots/penguin-culmen.js

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 
 export default async function() {
   const data = await d3.csv("data/penguins.csv", d3.autoType);
-  return Plot.plot({
+  const plot = Plot.plot({
     height: 600,
     grid: true,
     facet: {
@@ -24,7 +24,13 @@ export default async function() {
       Plot.dot(data, {
         x: "culmen_depth_mm",
         y: "culmen_length_mm"
+      }),
+      Plot.brush(data, {
+        x: "culmen_depth_mm",
+        y: "culmen_length_mm"
       })
     ]
   });
+  plot.oninput = () => console.log(plot.value);
+  return plot;
 }