Skip to main content

linkCursor

0.00.10.20.30.40.50.60.70.80.91.0↑ attempts051015202530Shot distance (ft) →@ 26 ft
import * as Plot from "@observablehq/plot";
import { createSelection } from "@sportsdataverse/sdvplot";
import { linkCursor } from "@sportsdataverse/sdvplot/interact";
import { fgPctByDistance } from "@sportsdataverse/sdvplot/shots";

const shots = [
  { x_legacy: -1, y_legacy: 7, shot_distance: 1, shot_value: 2, shot_result: "Made" },
  { x_legacy: 0, y_legacy: 0, shot_distance: 0, shot_value: 2, shot_result: "Missed" },
  { x_legacy: -44, y_legacy: 252, shot_distance: 26, shot_value: 3, shot_result: "Made" },
];
const bins = fgPctByDistance(shots, 1, 30);
const svg = Plot.plot({
  x: { label: "Shot distance (ft)" },
  marks: [Plot.rectY(bins, { x1: "distance", x2: (b) => b.distance + 1, y: "attempts" })],
});
const store = createSelection();
linkCursor(svg, store, {
  field: "shot_distance",
  shape: { axis: "x", scale: svg.scale("x")!, width: 1 },
  snap: (feet) => Math.floor(feet) + 0.5, // one value per 1 ft bin
  label: (feet) => [`@ ${Math.floor(feet)} ft`],
});
store.set({ cursor: { field: "shot_distance", value: 26.5 } }); // what a pointer 26.3 ft out writes
svg; // the 26-27 ft band shaded, with its readout

Tags: docstring · linkCursor. All sdvplot examples.