Function: shootingSignature()

shootingSignature(points, o?): Markish[]

Defined in: packages/sdvplot/src/plot/shots.ts:453

The shooting signature: a ribbon along FG% by distance, as wide as the shot share and coloured along x by the shrunk FG% vs league (blazing-the-nets main lib/charts/shootingSignature.ts:117-213; master src/components/ShootingSignature/index.js). Input: signaturePoints(...); a null fgPct is a gap. The gradient id is a hash of its stops and its pixel x range, so two signatures on a page, or one drawn at two widths, never share one (master's fixed id did, Gradient.js:10).

y is not clamped: the ribbon's edges are fgPct ± halfWidth in y units, so near 0% or 100% they pass a [0, 1] domain (main clamps the ribbon's centre instead, which misstates FG%). To clamp them, pass y: { domain: [0, 1], clamp: true }. tip adds a Plot.tip that follows the pointer along x (Plot.pointerX): distance, FG%, league FG% and share. It is the last mark returned, and a mark added after it paints over it, so spread these marks LAST, or add other marks (a Plot.ruleY, say) before them.

Parameters

points

readonly SignaturePoint[]

o?

ShootingSignatureOptions = {}

Returns

Markish[]

Example

import * as Plot from "@observablehq/plot";
import { shootingSignature } from "@sportsdataverse/sdvplot/plot";
import { fgPctByDistance, signaturePoints, vsLeague } from "@sportsdataverse/sdvplot/shots";

// Brooklyn shots from the sportsdataverse-data nba_stats_shots release, 2025-26
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" },
];
// the makes against all three attempts, which stand in for the league (the gallery's uses the 2025-26 league)
const made = fgPctByDistance(shots.filter((s) => s.shot_result === "Made"));
const points = signaturePoints(vsLeague(made, fgPctByDistance(shots)), { minAttempts: 1 });
Plot.plot({ y: { domain: [0, 1] }, marks: shootingSignature(points) });