brushFilter

[
  "0022500149",
  "0022500156",
  "0022500173"
]

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

const games = [
  { game_id: "0022500130", game_date: "2025-10-29", matchup: "BKN vs. ATL" },
  { game_id: "0022500149", game_date: "2025-11-02", matchup: "BKN vs. PHI" },
  { game_id: "0022500156", game_date: "2025-11-03", matchup: "BKN vs. MIN" },
  { game_id: "0022500173", game_date: "2025-11-05", matchup: "BKN @ IND" },
  { game_id: "0022500031", game_date: "2025-11-07", matchup: "BKN vs. DET" },
];
const day = (g: (typeof games)[number]): Date => new Date(`${g.game_date}T00:00:00Z`);
const svg = Plot.plot({
  height: 60,
  x: { type: "utc" },
  marks: [Plot.tickX(games, { x: day, render: linkIds(games, "game_id") })],
});
const store = createSelection<(typeof games)[number]>();
// x alone: a brush along the dates; "clear": a window holding no game is no filter and is not left drawn
const brush = brushFilter(svg, store, { data: games, x: day, id: "game_id", empty: "clear" });
brush.move({ x: [new Date("2025-11-01"), new Date("2025-11-06")] });
[...store.getState().selected]; // ["0022500149", "0022500156", "0022500173"]

Tags: docstring · brushFilter. All sdvplot examples.