brushFilter

[
  "KC",
  "LAC"
]

import * as Plot from "@observablehq/plot";
import { createSelection } from "@sportsdataverse/sdvplot";
import { brushFilter } from "@sportsdataverse/sdvplot/interact";
import { linkIds } from "@sportsdataverse/sdvplot/plot";

const rows = [
  { team: "KC", wins: 15, net_epa: 0.063 },
  { team: "LAC", wins: 11, net_epa: 0.101 },
  { team: "MIA", wins: 8, net_epa: -0.019 },
];
const svg = Plot.plot({ marks: [Plot.dot(rows, { x: "wins", y: "net_epa", render: linkIds(rows, "team") })] });
const store = createSelection<(typeof rows)[number]>();
const brush = brushFilter(svg, store, { data: rows, x: "wins", y: "net_epa", id: "team" });
brush.move({ x: [10, 16], y: [0, 0.15] }); // drag over the 10+ win teams with a positive net EPA
[...store.getState().selected]; // ["KC", "LAC"]

Tags: docstring · brushFilter. All sdvplot examples.