appendHeadshots

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();

Tags: docstring · appendHeadshots. All sdvplot examples.