Skip to main content

Function: appendSignature()

appendSignature<D>(sel, points, o): G<D>

Defined in: packages/sdvplot/src/d3/shots.ts:218

The d3 twin of sdvplot/plot's shootingSignature: the dashed league line and the 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:165-211). The same points give the Plot mark's ribbon and league paths, gradient stops and gradient id when the scales match (with a 190 px [0, 1] y axis for the default half-width). A null fgPct is a gap. The gradient id hashes its stops and its pixel x range, so two signatures on a page, or one at two widths, never share one. y goes through the caller's y as it is: the ribbon's edges are y(fgPct) ± halfWidth, and a clamped scale clamps the centre (as main does). Returns the <g> it appended.

Type Parameters​

D​

D

Parameters​

sel​

G<D>

points​

readonly SignaturePoint[]

o​

AppendSignatureOptions

Returns​

G<D>

Example​

import { create, scaleLinear } from "d3";
import { appendSignature } from "@sportsdataverse/sdvplot/d3";
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 });
const svg = create("svg").attr("viewBox", "0 0 400 200");
appendSignature(svg.append("g"), points, { x: scaleLinear([0, 35], [0, 400]), y: scaleLinear([0, 1], [200, 0]) });
svg.node();