Skip to main content

Function: appendHeadshots()

appendHeadshots<G, D>(sel, xs, ys, players, o): Sel<SVGGElement, D>

Defined in: packages/sdvplot/src/d3/index.ts:141

Append <g class="sdv-headshots"> of ESPN player headshots; idSystem: "gsis" needs loadGsis() first. clip: "circle" makes circular faces (height is then the circle's diameter), with an optional ring and placeholder.

Type Parameters​

G​

G extends SVGElement

D​

D

Parameters​

sel​

Sel<G, D>

xs​

ArrayLike<Value>

ys​

ArrayLike<Value>

players​

readonly Value[]

o​

D3HeadshotOptions

Returns​

Sel<SVGGElement, D>

Example​

import { appendHeadshots } from "@sportsdataverse/sdvplot/d3";
import * as d3 from "d3";

const x = d3.scaleLinear([0, 10], [0, 480]);
const y = d3.scaleLinear([0, 10], [240, 0]);
const svg = d3.select(document.createElement("div")).append("svg").attr("viewBox", [0, 0, 480, 240]);
const team: Record<string, string> = { "3139477": "#e31837", "4374302": "#0076b6", "4429160": "#008e97" };
appendHeadshots(svg, [2, 5, 8], [4, 6, 3], ["3139477", "4374302", "4429160"], {
  league: "nfl",
  x: (v) => x(Number(v)),
  y: (v) => y(Number(v)),
  frameHeight: 240,
  height: 0.25,
  clip: "circle",
  ring: (id) => team[id] ?? "grey",
  placeholder: (id) => team[id] ?? "grey",
});
svg.node();