Skip to main content

linkSelection

2025-10-292025-11-022025-11-032025-11-052025-11-07game_date
import * as Plot from "@observablehq/plot";
import { createSelection } from "@sportsdataverse/sdvplot";
import { linkSelection } from "@sportsdataverse/sdvplot/interact";
import { linkIds } from "@sportsdataverse/sdvplot/plot";

const games = [
  { game_id: "0022500130", game_date: "2025-10-29", matchup: "BKN vs. ATL", wl: "L" },
  { game_id: "0022500149", game_date: "2025-11-02", matchup: "BKN vs. PHI", wl: "L" },
  { game_id: "0022500156", game_date: "2025-11-03", matchup: "BKN vs. MIN", wl: "L" },
  { game_id: "0022500173", game_date: "2025-11-05", matchup: "BKN @ IND", wl: "W" },
  { game_id: "0022500031", game_date: "2025-11-07", matchup: "BKN vs. DET", wl: "L" },
];
const svg = Plot.plot({
  height: 60,
  x: { type: "band" },
  marks: [
    Plot.cell(games, { x: "game_date", fill: "wl", ariaLabel: "matchup", render: linkIds(games, "game_id") }),
  ],
});
const store = createSelection<(typeof games)[number]>();
linkSelection(store, { figure: svg, select: "toggle" }); // each cell: role="checkbox", tabindex="0", aria-checked
svg.querySelector('[data-sdv-id="0022500173"]')?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
svg; // the win at Indiana checked and lit, the rest dimmed: click a game, or Tab to it and press Enter or Space

Tags: docstring · linkSelection. All sdvplot examples.