linkSelection

import * as Plot from "@observablehq/plot";
import { createSelection } from "@sportsdataverse/sdvplot";
import { linkSelection } from "@sportsdataverse/sdvplot/interact";
import { linkIds } from "@sportsdataverse/sdvplot/plot";
import { createTable, defineTable } from "@sportsdataverse/sdvtables";

const rows = [
  { team: "KC", wins: 15, net_epa: 0.063 },
  { team: "BUF", wins: 13, net_epa: 0.19 },
  { team: "MIA", wins: 8, net_epa: -0.019 },
];
type Row = (typeof rows)[number];
const svg = Plot.plot({ marks: [Plot.dot(rows, { x: "wins", y: "net_epa", r: 6, render: linkIds(rows, "team") })] });
const spec = defineTable<Row>().columns((c) => [c.text("team"), c.int("wins")]).rowKey("team").build();
const table = createTable(spec, rows); // the engine a hydrated table or <SdvTable table/> renders
const store = createSelection<Row>();
linkSelection(store, { figure: svg });
linkSelection(store, { table });
table.setSelection(new Set(["BUF"])); // what a click on Buffalo's row calls: the store and the figure follow
svg; // Buffalo's dot lit, the rest dimmed

Tags: docstring · linkSelection. All sdvplot examples.