brushFilter

[
  "0022500173",
  "0022500031"
]

import { scaleUtc, select } from "d3";
import { createSelection } from "@sportsdataverse/sdvplot";
import { brushFilter } from "@sportsdataverse/sdvplot/interact";

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 x = scaleUtc([new Date("2025-10-28"), new Date("2025-11-08")], [10, 630]);
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 640 60");
select(svg)
  .selectAll("rect")
  .data(games)
  .join("rect")
  .attr("x", (g) => x(day(g)) - 1.5)
  .attr("y", 6)
  .attr("width", 3)
  .attr("height", 40)
  .attr("data-sdv-id", (g) => g.game_id); // the stamp linkIds would write
const store = createSelection<(typeof games)[number]>();
// no figure.scale on a d3 chart: pass the d3 scale itself (its range() is a method; brushFilter reads it)
brushFilter(svg, store, { data: games, x: day, id: "game_id", scales: { x } }).move({
  x: [new Date("2025-11-04"), new Date("2025-11-08")],
});
[...store.getState().selected]; // ["0022500173", "0022500031"]

Tags: docstring · brushFilter. All sdvplot examples.