cross-facet brushX with stocks

Author: Fil

docs/interactions/brush.md

@@ -6,12 +6,24 @@ import * as topojson from "topojson-client";
 import {shallowRef, computed, onMounted} from "vue";
 import penguins from "../data/penguins.ts";
 
+const stocks = shallowRef([]);
 const world = shallowRef(null);
 const land = computed(() => world.value && topojson.feature(world.value, world.value.objects.land));
 const allCities = shallowRef([]);
 const cities = computed(() => allCities.value.filter((d) => d.population > 500000));
 
 onMounted(() => {
+  Promise.all([
+    d3.csv("../data/aapl.csv", d3.autoType),
+    d3.csv("../data/amzn.csv", d3.autoType),
+    d3.csv("../data/goog.csv", d3.autoType)
+  ]).then(([aapl, amzn, goog]) => {
+    stocks.value = [
+      ...aapl.map((d) => ({Symbol: "AAPL", ...d})),
+      ...amzn.map((d) => ({Symbol: "AMZN", ...d})),
+      ...goog.map((d) => ({Symbol: "GOOG", ...d}))
+    ];
+  });
   d3.json("../data/countries-110m.json").then((data) => (world.value = data));
   d3.csv("../data/cities-10k.csv", d3.autoType).then((data) => (allCities.value = data));
 });
@@ -221,31 +233,37 @@ plot.addEventListener("input", () => {
 
 The brush mark supports [faceting](../features/facets.md). When the plot uses **fx** or **fy** facets, each facet gets its own brush. The dispatched value includes the **fx** and **fy** facet values of the brushed facet, and the **filter** function also filters on the relevant facet values.
 
+<div v-if="stocks.length">
+
 :::plot hidden
 ```js
 Plot.plot({
-  height: 270,
-  grid: true,
-  marks: ((brush) => (d3.timeout(() => brush.move({x1: 45, x2: 55, y1: 15, y2: 20, fx: "Gentoo"})), [
+  height: 350,
+  y: {type: "log", grid: true},
+  fy: {label: null},
+  marks: ((brush) => (d3.timeout(() => brush.move({x1: new Date("2015-01-01"), x2: new Date("2016-06-01"), fy: "AAPL"})), [
     Plot.frame(),
     brush,
-    Plot.dot(penguins, brush.inactive({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 2})),
-    Plot.dot(penguins, brush.context({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "#ccc", r: 2})),
-    Plot.dot(penguins, brush.focus({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 3}))
-  ]))(Plot.brush())
+    Plot.lineY(stocks, {x: "Date", y: "Close", fy: "Symbol", stroke: "#ccc", strokeWidth: 1}),
+    Plot.lineY(stocks, brush.inactive({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol"})),
+    Plot.lineY(stocks, brush.focus({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol", strokeWidth: 2}))
+  ]))(Plot.brushX())
 })
 ```
 :::
 
 ```js
-const brush = Plot.brush();
+const brush = Plot.brushX();
 Plot.plot({
+  height: 350,
+  y: {type: "log", grid: true},
+  fy: {label: null},
   marks: [
     Plot.frame(),
     brush,
-    Plot.dot(penguins, brush.inactive({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 2})),
-    Plot.dot(penguins, brush.context({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "#ccc", r: 2})),
-    Plot.dot(penguins, brush.focus({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 3}))
+    Plot.lineY(stocks, {x: "Date", y: "Close", fy: "Symbol", stroke: "#ccc"}),
+    Plot.lineY(stocks, brush.inactive({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol"})),
+    Plot.lineY(stocks, brush.focus({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol", strokeWidth: 2}))
   ]
 })
 ```
@@ -255,32 +273,38 @@ By default, starting a brush in one facet clears any selection in other facets.
 :::plot hidden
 ```js
 Plot.plot({
-  height: 270,
-  grid: true,
-  marks: ((brush) => (d3.timeout(() => brush.move({x1: 43, x2: 50, y1: 17, y2: 19})), [
+  height: 350,
+  y: {type: "log", grid: true},
+  fy: {label: null},
+  marks: ((brush) => (d3.timeout(() => brush.move({x1: new Date("2015-01-01"), x2: new Date("2016-06-01"), fy: "AAPL"})), [
     Plot.frame(),
     brush,
-    Plot.dot(penguins, brush.inactive({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 2})),
-    Plot.dot(penguins, brush.context({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "#ccc", r: 2})),
-    Plot.dot(penguins, brush.focus({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 3}))
-  ]))(Plot.brush({sync: true}))
+    Plot.lineY(stocks, {x: "Date", y: "Close", fy: "Symbol", stroke: "#ccc", strokeWidth: 1}),
+    Plot.lineY(stocks, brush.inactive({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol"})),
+    Plot.lineY(stocks, brush.focus({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol", strokeWidth: 2}))
+  ]))(Plot.brushX({sync: true}))
 })
 ```
 :::
 
 ```js
-const brush = Plot.brush({sync: true});
+const brush = Plot.brushX({sync: true});
 Plot.plot({
+  height: 350,
+  y: {type: "log", grid: true},
+  fy: {label: null},
   marks: [
     Plot.frame(),
     brush,
-    Plot.dot(penguins, brush.inactive({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 2})),
-    Plot.dot(penguins, brush.context({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "#ccc", r: 2})),
-    Plot.dot(penguins, brush.focus({x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species", fill: "sex", r: 3}))
+    Plot.lineY(stocks, {x: "Date", y: "Close", fy: "Symbol", stroke: "#ccc"}),
+    Plot.lineY(stocks, brush.inactive({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol"})),
+    Plot.lineY(stocks, brush.focus({x: "Date", y: "Close", fy: "Symbol", stroke: "Symbol", strokeWidth: 2}))
   ]
 })
 ```
 
+</div>
+
 The dispatched value still includes **fx** (and **fy**), indicating the facet where the interaction originated.
 
 ## Projections

test/brush-test.ts

@@ -187,30 +187,33 @@ it("brush faceted filter without fx selects across all facets", async () => {
 });
 
 it("brush cross-facet filter selects across all facets", async () => {
-  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
-  const b = new Plot.Brush({sync: true});
-  const xy = {x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species"};
+  const stocks = [
+    ...(await d3.csv<any>("data/aapl.csv", d3.autoType)).map((d: any) => ({...d, Symbol: "AAPL"})),
+    ...(await d3.csv<any>("data/amzn.csv", d3.autoType)).map((d: any) => ({...d, Symbol: "AMZN"})),
+    ...(await d3.csv<any>("data/goog.csv", d3.autoType)).map((d: any) => ({...d, Symbol: "GOOG"}))
+  ];
+  const b = Plot.brushX({sync: true});
   const plot = Plot.plot({
-    marks: [Plot.dot(penguins, b.inactive({...xy, r: 2})), b]
+    marks: [Plot.lineY(stocks, b.inactive({x: "Date", y: "Close", fy: "Symbol"})), b]
   });
 
   let lastValue: any;
   plot.addEventListener("input", () => (lastValue = plot.value));
-  b.move({x1: 35, x2: 50, y1: 14, y2: 20, fx: "Adelie"});
+  b.move({x1: new Date("2015-01-01"), x2: new Date("2016-06-01"), fy: "AAPL"});
 
   assert.ok(lastValue, "should have a value");
-  assert.ok(lastValue.fx !== undefined, "value should include fx (origin facet)");
-
-  // Without fx: selects across all facets
-  const withoutFx = penguins.filter((d: any) => lastValue.filter(d.culmen_length_mm, d.culmen_depth_mm));
-  const species = new Set(withoutFx.map((d: any) => d.species));
-  assert.ok(species.size > 1, `should select multiple species, got: ${[...species]}`);
-
-  // With fx: restricts to the origin facet
-  const withFx = penguins.filter((d: any) => lastValue.filter(d.culmen_length_mm, d.culmen_depth_mm, d.species));
-  const fxSpecies = new Set(withFx.map((d: any) => d.species));
-  assert.equal(fxSpecies.size, 1, "with fx should restrict to origin facet");
-  assert.ok(withFx.length < withoutFx.length, "with fx should select fewer points");
+  assert.ok(lastValue.fy !== undefined, "value should include fy (origin facet)");
+
+  // Without fy: selects across all facets
+  const withoutFy = stocks.filter((d: any) => lastValue.filter(d.Date));
+  const symbols = new Set(withoutFy.map((d: any) => d.Symbol));
+  assert.ok(symbols.size > 1, `should select multiple symbols, got: ${[...symbols]}`);
+
+  // With fy: restricts to the origin facet
+  const withFy = stocks.filter((d: any) => lastValue.filter(d.Date, d.Symbol));
+  const fySymbols = new Set(withFy.map((d: any) => d.Symbol));
+  assert.equal(fySymbols.size, 1, "with fy should restrict to origin facet");
+  assert.ok(withFy.length < withoutFy.length, "with fy should select fewer points");
 });
 
 it("brush faceted filter with fx and fy supports partial facet args", async () => {