@sportsdataverse/sdvplot 0.0.0-stage → 0.1.0

package/dist/plot.js

@@ -0,0 +1,711 @@
+import { prepareTiers } from './chunk-NLPH2VZT.js';
+import { toId } from './chunk-4C3GX6QO.js';
+import { stampImage, teamColorDomain } from './chunk-OKEE4AH6.js';
+import { diffScale, LEAGUE_PRIOR_ATTEMPTS, signatureGradient, SIGNATURE_NAME, shrunkDiff } from './chunk-QY65DUEF.js';
+import { cellPoints } from './chunk-C2CDY5OG.js';
+import { checkHeight, checkAlpha, placeSync, placedName } from './chunk-RMT2GMFH.js';
+import { logoUrlSync } from './chunk-KKH6ABMA.js';
+import { surfaceScene } from './chunk-TDNBAEQB.js';
+export { SURFACES, SURFACE_BASE, colorUpdates } from './chunk-TDNBAEQB.js';
+import { hex6 } from './chunk-J6R2LEJ7.js';
+import './chunk-TAXO3VXH.js';
+import { InputError, warn } from './chunk-E7G7VSLV.js';
+import * as Plot6 from '@observablehq/plot';
+import { surfaceMark, surfaceScales } from '@sportsdataverse/sporty/plot';
+import { BASKETBALL_ZONE_LABELS, FRAMES } from '@sportsdataverse/sporty';
+
+var once = (data) => Symbol.iterator in data && !Array.isArray(data) && !("numRows" in data) ? Array.from(data) : data;
+var values = (data, c) => Plot6.valueof(data, c);
+function given(data, c) {
+  const v = typeof c === "object" && c !== null && !Array.isArray(c) && "value" in c ? c.value : c;
+  return typeof v === "string" || typeof v === "function" || Array.isArray(v) ? values(data, v) : null;
+}
+function dataValue(values2, key, i) {
+  const ch = values2.channels[key];
+  const src = ch?.source ?? (ch?.scale == null ? void 0 : ch);
+  const v = src?.value[i];
+  return v === void 0 || v === null ? null : String(v instanceof Date ? v.getTime() : v);
+}
+function sizeRender(height, placed, kind, ids) {
+  const byRow = new Map(placed.map((p) => [p.index, p]));
+  return (index, scales, vals, dimensions, context, next) => {
+    const g = next?.(index, scales, vals, dimensions, context);
+    if (g == null) return null;
+    const { width, height: H, marginTop, marginRight, marginBottom, marginLeft } = dimensions;
+    const frame = H - marginTop - marginBottom;
+    const px = height * frame;
+    const X = vals.x;
+    const Y = vals.y;
+    const images = g.querySelectorAll("image");
+    index.forEach((i, k) => {
+      const img = images[k];
+      const p = byRow.get(i);
+      if (!img || !p) return;
+      const cx = X ? X[i] : (marginLeft + width - marginRight) / 2;
+      const cy = Y ? Y[i] : (marginTop + H - marginBottom) / 2;
+      stampImage(img, p, kind, px, frame, cx, cy);
+      img.setAttribute("data-sdv-id", ids?.[i] ?? p.id);
+      const dx = dataValue(vals, "x", i);
+      const dy = dataValue(vals, "y", i);
+      if (dx !== null) img.setAttribute("data-sdv-x", dx);
+      if (dy !== null) img.setAttribute("data-sdv-y", dy);
+    });
+    return g;
+  };
+}
+function compose(outer, inner) {
+  if (outer === void 0) return inner;
+  return function(index, scales, values2, dimensions, context, next) {
+    return outer.call(
+      this,
+      index,
+      scales,
+      values2,
+      dimensions,
+      context,
+      (i, s, v, d, c) => inner.call(this, i, s, v, d, c, next)
+    );
+  };
+}
+var ONE_PER_ROW = "sdvplot marks draw one shape per input row (an image, a cell, a zone), so a transform that makes new rows (bin, group, hexbin) cannot run on them: aggregate first, then draw the result";
+function sameRows(f) {
+  return function(data, facets, ...rest) {
+    const out = f.call(this, data, facets, ...rest);
+    if (out.data !== void 0 && out.data !== data) throw new InputError(ONE_PER_ROW);
+    const n = Array.isArray(data) ? data.length : data?.numRows;
+    for (const c of Object.values(out.channels ?? {}))
+      if (c?.value != null && c.value.length !== n) throw new InputError(ONE_PER_ROW);
+    out.facets?.forEach((I, k) => {
+      const own = new Set(facets?.[k]);
+      for (const i of I) if (!own.has(i)) throw new InputError(ONE_PER_ROW);
+    });
+    return out;
+  };
+}
+function imageMark(input, o, kind, key) {
+  const data = once(input);
+  const height = checkHeight(o.height ?? 0.1);
+  if (o.alpha !== void 0 && o.opacity !== void 0)
+    throw new InputError("pass alpha (a constant) or opacity (Plot's channel), not both");
+  const alpha = checkAlpha(o.alpha ?? 1);
+  const keys = values(data, key);
+  const ids = o.id == null ? void 0 : values(data, o.id).map(toId);
+  const name = kind === "headshot" ? "player" : "team";
+  if (ids !== void 0 && ids.length !== keys.length)
+    throw new InputError(
+      `id and ${name} need one value per row: id has ${ids.length}, ${name} has ${keys.length}`
+    );
+  const zeros = keys.map(() => 0);
+  const xs = given(data, o.x) ?? zeros;
+  const ys = given(data, o.y) ?? zeros;
+  const season = o.season == null || typeof o.season === "number" || typeof o.season === "string" && /^\d{4}$/.test(o.season) ? o.season : values(data, o.season);
+  const placed = placeSync(xs, ys, keys, {
+    league: o.league,
+    kind,
+    ...kind === "headshot" ? {} : { variant: o.variant ?? "default" },
+    ...o.idSystem === void 0 ? kind === "headshot" ? { idSystem: "espn" } : {} : { idSystem: o.idSystem },
+    ...season === void 0 || kind === "headshot" ? {} : { season }
+  });
+  const src = new Array(keys.length).fill(null);
+  for (const p of placed) src[p.index] = p.url;
+  const names = keys.map((k) => String(k));
+  for (const p of placed) names[p.index] = placedName(p, o.league, keys[p.index]);
+  const {
+    height: _h,
+    alpha: _a,
+    r: _r,
+    league: _l,
+    season: _s,
+    variant: _v,
+    idSystem: _i,
+    id: _id,
+    // sdvplot's link id, stamped by sizeRender: never Plot's
+    render,
+    transform,
+    initializer: initializer2,
+    channels,
+    ...rest
+  } = o;
+  const { team: _t, player: _p, ...pass } = rest;
+  return Plot6.image(data, {
+    ...pass,
+    src,
+    ...o.opacity === void 0 ? { opacity: alpha } : {},
+    // an accessible name per image, as the Vega adapter's (PR #28): "KC logo", "3139477 headshot"
+    ariaLabel: o.ariaLabel ?? names.map((n) => `${n} ${kind}`),
+    // the tip names the team as the image does ("KC", not team_id "12"); a headshot has only its id
+    channels: { [name]: { value: kind === "headshot" ? keys : names, label: name }, ...channels },
+    ...transform === void 0 ? {} : { transform: sameRows(transform) },
+    ...initializer2 === void 0 ? {} : { initializer: sameRows(initializer2) },
+    render: compose(render, sizeRender(height, placed, kind, ids))
+  });
+}
+function logos(data, o) {
+  return imageMark(data, o, "logo", o.team);
+}
+function wordmarks(data, o) {
+  return imageMark(data, o, "wordmark", o.team);
+}
+function headshots(data, o) {
+  return imageMark(data, o, "headshot", o.player);
+}
+function stampRender(idOf, mismatch) {
+  return (index, scales, values2, dimensions, context, next) => {
+    const g = next?.(index, scales, values2, dimensions, context) ?? null;
+    if (g === null) return null;
+    const els = [];
+    for (let el = g.firstElementChild; el !== null; el = el.nextElementSibling) els.push(el);
+    if (els.length !== index.length) {
+      mismatch?.(els.length, index.length);
+      return g;
+    }
+    const at = (el) => el?.tagName === "a" ? el.querySelector("[data-sdv-id]") ?? el : el;
+    index.forEach((i, k) => at(els[k])?.setAttribute("data-sdv-id", idOf(i)));
+    return g;
+  };
+}
+function linkIds(data, id) {
+  const ids = id === void 0 ? null : Array.from(Plot6.valueof(data, id) ?? [], toId);
+  return stampRender(
+    (i) => ids === null ? String(i) : ids[i] ?? "",
+    (drawn, rows) => warn(
+      `linkIds:${drawn}:${rows}`,
+      `linkIds needs one element per row; this mark drew ${drawn} for ${rows} rows, so nothing was stamped`
+    )
+  );
+}
+var DEFAULT_ANCHOR = { x: "bottom", y: "left", fx: "top", fy: "right" };
+var AXIS = {
+  x: Plot6.axisX,
+  y: Plot6.axisY,
+  fx: Plot6.axisFx,
+  fy: Plot6.axisFy
+};
+function axisLogos(axis, o) {
+  const {
+    league: _l,
+    season: _s,
+    height: _h,
+    variant: _v,
+    markType: _m,
+    idSystem: _i,
+    anchor: _a,
+    tickSize: _t,
+    label: _b,
+    render: outer,
+    ...pass
+  } = o;
+  const height = checkHeight(o.height ?? 0.1);
+  const kind = o.markType ?? "logo";
+  const tickSize = o.tickSize ?? 6;
+  const horizontal = axis === "x" || axis === "fx";
+  const side = o.anchor ?? DEFAULT_ANCHOR[axis];
+  const render = (index, scales, values2, dimensions, context, next) => {
+    const g = next?.(index, scales, values2, dimensions, context);
+    const text3 = values2.text;
+    if (!g || !text3) return g ?? null;
+    const labels = Array.from(index, (i) => text3[i] ?? "");
+    const placed = placeSync(
+      labels.map(() => 0),
+      labels.map(() => 0),
+      labels,
+      {
+        league: o.league,
+        kind,
+        variant: o.variant ?? "default",
+        ...o.idSystem === void 0 ? {} : { idSystem: o.idSystem },
+        ...o.season === void 0 ? {} : { season: o.season }
+      }
+    );
+    const byIndex = new Map(placed.map((p) => [p.index, p]));
+    const frame = dimensions.height - dimensions.marginTop - dimensions.marginBottom;
+    const px = height * frame;
+    const X = values2.x;
+    const Y = values2.y;
+    const texts = g.querySelectorAll("text");
+    index.forEach((i, k) => {
+      const t = texts[k];
+      const p = byIndex.get(k);
+      if (!t || !p) return;
+      const pos = horizontal ? X?.[i] : Y?.[i];
+      const sc = scales[axis];
+      const tick = pos ?? (sc ? (sc(labels[k]) ?? Number.NaN) + (sc.bandwidth?.() ?? 0) / 2 : void 0);
+      if (tick === void 0 || Number.isNaN(tick)) return;
+      const w = px * (p.aspect ?? 1);
+      const gap = 3;
+      const c = side === "bottom" ? [tick, dimensions.height - dimensions.marginBottom + gap + px / 2] : side === "top" ? [tick, dimensions.marginTop - gap - px / 2] : side === "left" ? [dimensions.marginLeft - gap - w / 2, tick] : [dimensions.width - dimensions.marginRight + gap + w / 2, tick];
+      const [cx, cy] = c;
+      const img = context.document.createElementNS("http://www.w3.org/2000/svg", "image");
+      img.setAttribute("href", p.url);
+      img.setAttribute("preserveAspectRatio", "xMidYMid meet");
+      img.setAttribute("data-sdv-axis", axis);
+      img.setAttribute("data-sdv-tick", String(tick));
+      img.setAttribute("aria-label", `${placedName(p, o.league, labels[k])} ${kind}`);
+      stampImage(img, p, kind, px, frame, cx, cy);
+      t.replaceWith(img);
+    });
+    return g;
+  };
+  const margin = Math.round(height * 400) + tickSize + 8;
+  const marginKey = `margin${side[0]?.toUpperCase()}${side.slice(1)}`;
+  return AXIS[axis]({
+    ...pass,
+    tickFormat: (d) => String(d),
+    tickSize,
+    label: o.label ?? null,
+    ...o.anchor ? { anchor: o.anchor } : {},
+    [marginKey]: pass[marginKey] ?? pass.margin ?? margin,
+    // a caller's own margin on the anchored side wins
+    render: compose(outer, render)
+    // a caller's render wraps sdvplot's swap
+  });
+}
+
+// src/plot/scales.ts
+function teamColor(league, o = {}) {
+  const naValue = o.naValue ?? "grey";
+  const suffix = o.alpha === void 0 ? "" : Math.round(checkAlpha(o.alpha) * 255).toString(16).padStart(2, "0");
+  const { domain, colors } = teamColorDomain(league, {
+    which: o.which,
+    idSystem: o.idSystem,
+    strict: o.strict,
+    season: o.season,
+    values: o.values
+  });
+  const range = colors.map((c) => c === void 0 ? naValue : hex6(c) + suffix);
+  return { type: "ordinal", domain, range, unknown: naValue, ...o.legend ? { legend: true } : {} };
+}
+var teamFill = teamColor;
+function refLines(data, o, reducer) {
+  if (o.x === void 0 && o.y === void 0)
+    throw new InputError(`${reducer}Lines() needs an x and/or a y channel`);
+  const { x: _x, y: _y, ...pass } = o;
+  const style = {
+    ...pass,
+    stroke: o.stroke ?? "red",
+    strokeDasharray: o.strokeDasharray ?? "4 4",
+    strokeWidth: o.strokeWidth ?? 1,
+    ...o.strokeOpacity !== void 0 ? { strokeOpacity: o.strokeOpacity } : {}
+  };
+  const d = data;
+  const marks = [];
+  if (o.x !== void 0)
+    marks.push(Plot6.ruleX(d, Plot6.groupZ({ x: reducer }, { x: o.x, ...style })));
+  if (o.y !== void 0)
+    marks.push(Plot6.ruleY(d, Plot6.groupZ({ y: reducer }, { y: o.y, ...style })));
+  return marks;
+}
+function meanLines(data, o) {
+  return refLines(data, o, "mean");
+}
+function medianLines(data, o) {
+  return refLines(data, o, "median");
+}
+
+// src/plot/title.ts
+function titleImage(figure, o) {
+  const height = o.height ?? 24;
+  if (!(typeof height === "number" && Number.isFinite(height) && height >= 1))
+    throw new InputError(`height is a pixel height of at least 1, got ${String(height)}`);
+  const side = o.side ?? "left";
+  if (side !== "left" && side !== "right")
+    throw new InputError(`side must be "left" or "right", got ${String(side)}`);
+  const bare = figure.tagName.toLowerCase() === "svg";
+  if (bare && !o.title)
+    throw new InputError("the plot has no title; pass {title} (or render with Plot.plot({title}))");
+  if (!bare && !figure.querySelector("h2"))
+    throw new InputError("the figure has no <h2> title; render with Plot.plot({title}) first");
+  let src;
+  if (o.league) {
+    const lo = o.season === void 0 ? {} : { season: o.season };
+    src = logoUrlSync(o.image, o.league, lo);
+  } else {
+    const s = String(o.image);
+    if (!/^https:\/\//.test(s))
+      throw new InputError(`image must be an https URL when league is not given, got ${s}`);
+    src = s;
+  }
+  const doc = figure.ownerDocument;
+  let fig;
+  if (bare) {
+    fig = doc.createElement("figure");
+    const heading = doc.createElement("h2");
+    heading.textContent = o.title;
+    fig.append(heading, figure);
+  } else fig = figure;
+  if (src === void 0) return fig;
+  const h2 = fig.querySelector("h2");
+  const img = doc.createElement("img");
+  img.setAttribute("src", src);
+  img.setAttribute("height", String(height));
+  img.setAttribute("alt", "");
+  img.style.verticalAlign = "middle";
+  img.style.margin = side === "left" ? "0 0.4em 0 0" : "0 0 0 0.4em";
+  if (side === "left") h2.prepend(img);
+  else h2.append(img);
+  return fig;
+}
+function teamTiers(rows, o) {
+  const t = prepareTiers(rows, o.league, o);
+  const pts = t.x.map((x, i) => ({
+    x,
+    y: t.y[i],
+    team: t.teamIds[i],
+    label: t.labels[i]
+  }));
+  const marks = [
+    Plot6.ruleY(t.lines, { stroke: t.theme.line }),
+    o.devel ? Plot6.text(pts, { x: "x", y: "y", text: "label", fill: t.theme.text, fontWeight: "bold" }) : logos(pts, {
+      league: o.league,
+      x: "x",
+      y: "y",
+      team: "team",
+      idSystem: "team_id",
+      height: t.height,
+      alpha: t.alpha,
+      variant: t.variant,
+      ...o.tip ? { tip: true, title: "label" } : {}
+    })
+  ];
+  return {
+    width: o.width ?? 640,
+    height: 480,
+    marginLeft: 110,
+    style: { background: t.theme.bg, color: t.theme.text, fontFamily: "sans-serif" },
+    ...t.title ? { title: t.title, ariaLabel: t.title } : {},
+    // the figure is named by its title
+    ...t.subtitle ? { subtitle: t.subtitle } : {},
+    ...t.caption ? { caption: t.caption } : {},
+    x: { domain: t.xlim, axis: null },
+    y: {
+      domain: t.ylim,
+      reverse: true,
+      ticks: t.breaks,
+      tickFormat: (d) => t.breakLabels[t.breaks.indexOf(d)] ?? "",
+      tickSize: 0,
+      label: null,
+      fontWeight: "bold"
+    },
+    marks
+  };
+}
+function surface(league, o = {}) {
+  const { centerLogo, ...opts } = o;
+  const scene = surfaceScene(league, opts);
+  const marks = surfaceMark(scene);
+  const { team, season } = o;
+  if (centerLogo !== void 0 && centerLogo !== false && team !== void 0 && team !== null) {
+    const height = centerLogo === true ? 0.25 : checkHeight(centerLogo);
+    marks.push(
+      logos([{ x: 0, y: 0, team }], {
+        league,
+        x: "x",
+        y: "y",
+        team: "team",
+        height,
+        ...season !== void 0 ? { season } : {}
+      })
+    );
+  }
+  return { marks, scales: surfaceScales(scene), scene };
+}
+var stampIds = (id) => stampRender(id);
+function withFormat(tip2, format) {
+  if (tip2 === false) return false;
+  if (tip2 === true) return { format };
+  if (typeof tip2 === "string") return { pointer: tip2, format };
+  const own = tip2.format;
+  return {
+    ...tip2,
+    format: { ...format, ...typeof own === "object" ? own : own === void 0 ? {} : { title: own } }
+  };
+}
+function inRing(x, y, r) {
+  let inside = false;
+  for (let i = 0, j = r.length - 1; i < r.length; j = i++) {
+    const [xi, yi] = r[i];
+    const [xj, yj] = r[j];
+    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
+}
+var ZONE_STEPS = 40;
+function zoneSamples(areas, rings) {
+  const xs = rings.flatMap((r) => r.map((p) => p[0]));
+  const ys = rings.flatMap((r) => r.map((p) => p[1]));
+  const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
+  const step = Math.max(x1 - x0, y1 - y0) / ZONE_STEPS;
+  const out = { data: [], x: [], y: [] };
+  for (let i = 0; x0 + (i + 0.5) * step < x1; i++) {
+    for (let j = 0; y0 + (j + 0.5) * step < y1; j++) {
+      const [x, y] = [x0 + (i + 0.5) * step, y0 + (j + 0.5) * step];
+      const area = areas[rings.findIndex((r) => inRing(x, y, r))];
+      if (area === void 0) continue;
+      out.data.push(area);
+      out.x.push(x);
+      out.y.push(y);
+    }
+  }
+  return out;
+}
+function frameOf(f) {
+  const frame = typeof f === "object" ? f : FRAMES[f ?? "nba-legacy"];
+  if (frame === void 0) throw new InputError(`unknown frame "${String(f)}"`);
+  return frame;
+}
+function toPlot([x, y], f) {
+  const px = f.x({ x, y });
+  const py = f.y({ x, y });
+  if (px === null || py === null) throw new InputError(`frame "${f.description}" dropped point (${x}, ${y})`);
+  return [px, py];
+}
+function ring(points, f) {
+  const out = points.map((p) => toPlot(p, f));
+  const first = out[0];
+  if (first !== void 0) out.push([first[0], first[1]]);
+  return out;
+}
+var polygon = (coordinates) => ({ type: "Polygon", coordinates: [coordinates] });
+function shotCells(cells, o) {
+  const {
+    r,
+    shape = "hex",
+    scale = diffScale(),
+    prior = LEAGUE_PRIOR_ATTEMPTS,
+    frame,
+    dropOutside = true,
+    stroke = "var(--sdv-muted, #525252)",
+    strokeWidth = 0.85,
+    sort = (a, b) => a.attempts - b.attempts,
+    tip: tip2,
+    channels,
+    transform,
+    initializer: initializer2,
+    render,
+    ...pass
+  } = o;
+  const f = frameOf(frame);
+  const diff = (h) => h.leagueFgPct === null || h.attempts === 0 ? null : shrunkDiff(h.makes, h.attempts, h.leagueFgPct, prior);
+  const size = (i) => typeof r === "number" ? r : r[i] ?? 0;
+  const centre = (h) => toPlot([h.x, h.y], f);
+  const inFrame = (data, facets, _channels, scales, dimensions) => {
+    const { x, y } = scales;
+    if (!dropOutside || !x || !y) return { data, facets };
+    const { width, height, marginTop, marginRight, marginBottom, marginLeft } = dimensions;
+    const keep = (i) => {
+      const [cx, cy] = centre(data[i]);
+      const px = x(cx);
+      const py = y(cy);
+      return px >= marginLeft && px <= width - marginRight && py >= marginTop && py <= height - marginBottom;
+    };
+    return { data, facets: facets.map((I) => I.filter(keep)) };
+  };
+  const geo2 = {
+    // each path's accessible name, in the tip's terms ("147 of 181 made, 81.2%"); a caller's ariaLabel wins
+    ariaLabel: (h) => `${h.makes} of ${h.attempts} made${h.fgPct === null ? "" : `, ${(h.fgPct * 100).toFixed(1)}%`}`,
+    ...pass,
+    // each path is stamped by its input row, so a transform that makes new rows throws (sameRows)
+    ...transform === void 0 ? {} : { transform: sameRows(transform) },
+    // r = 0 gives a null geometry, which Plot drops (the default `defined` filter)
+    geometry: (h, i) => size(i) > 0 ? polygon(
+      ring(
+        cellPoints(shape, size(i)).map(([vx, vy]) => [h.x + vx, h.y + vy]),
+        f
+      )
+    ) : null,
+    fill: (h) => scale(diff(h)),
+    stroke,
+    strokeWidth,
+    sort,
+    ...tip2 === void 0 || tip2 === null ? {} : {
+      tip: withFormat(tip2, { attempts: true, fgPct: ".1%", leagueFgPct: ".1%", diff: "+.1%" }),
+      x: (h) => centre(h)[0],
+      y: (h) => centre(h)[1]
+    },
+    channels: {
+      attempts: { value: "attempts", label: "Attempts" },
+      fgPct: { value: "fgPct", label: "FG%" },
+      leagueFgPct: { value: "leagueFgPct", label: "League FG%" },
+      diff: { value: diff, label: "vs league (shrunk)" },
+      ...channels
+    },
+    render: compose(
+      render,
+      stampIds((i) => `${cells[i]?.x},${cells[i]?.y}`)
+    )
+  };
+  const framed = Plot6.initializer(geo2, inFrame);
+  return Plot6.geo(
+    cells,
+    initializer2 === void 0 ? framed : Plot6.initializer(framed, sameRows(initializer2))
+  );
+}
+function shotZones(areas, o) {
+  const {
+    fill,
+    text: text3,
+    frame,
+    stats,
+    fillOpacity = 0.85,
+    tip: tip2,
+    channels,
+    transform,
+    initializer: initializer2,
+    render,
+    ...pass
+  } = o;
+  const f = frameOf(frame);
+  const rings = areas.map((a) => ring(a.points, f));
+  const marks = [
+    Plot6.geo(areas, {
+      // each path's accessible name: its zone, then what its label shows ("Paint (non-RA), 136/326"); a caller's
+      // ariaLabel wins
+      ariaLabel: (a) => text3 === void 0 ? BASKETBALL_ZONE_LABELS[a.zone] : `${BASKETBALL_ZONE_LABELS[a.zone]}, ${text3(a.zone)}`,
+      ...pass,
+      ...transform === void 0 ? {} : { transform: sameRows(transform) },
+      ...initializer2 === void 0 ? {} : { initializer: sameRows(initializer2) },
+      geometry: (_a, i) => polygon(rings[i]),
+      fill: (a) => fill(a.zone),
+      fillOpacity,
+      render: compose(
+        render,
+        stampIds((i) => areas[i]?.zone ?? "")
+      )
+    })
+  ];
+  if (text3) {
+    const labels = areas.map((a) => {
+      const [x, y] = toPlot(a.label, f);
+      return { x, y, text: text3(a.zone), vertical: a.vertical };
+    });
+    marks.push(
+      Plot6.text(labels, {
+        x: "x",
+        y: "y",
+        text: "text",
+        rotate: (d) => d.vertical ? -90 : 0,
+        fill: "currentColor",
+        stroke: "var(--sdv-bg, white)",
+        strokeWidth: 3,
+        strokeLinejoin: "round",
+        paintOrder: "stroke",
+        ariaHidden: "true",
+        // the zone paths' names carry the labels' text, so a screen reader hears each once
+        pointerEvents: "none"
+        // a label sits inside its zone: a click or hover on it is the zone's
+      })
+    );
+  }
+  const t = tip2 === void 0 ? false : withFormat(tip2, { x: false, y: false, zone: true, made: true, fgPct: ".1%" });
+  if (t !== false) {
+    const { pointer: mode, ...options } = t;
+    const pointer2 = mode === "x" ? Plot6.pointerX : mode === "y" ? Plot6.pointerY : Plot6.pointer;
+    const at = zoneSamples(areas, rings);
+    marks.push(
+      Plot6.tip(
+        at.data,
+        pointer2({
+          x: at.x,
+          y: at.y,
+          channels: {
+            zone: { value: (a) => BASKETBALL_ZONE_LABELS[a.zone], label: "Zone" },
+            ...stats === void 0 ? {} : {
+              made: {
+                value: (a) => `${stats[a.zone].makes}/${stats[a.zone].attempts}`,
+                label: "Made"
+              },
+              fgPct: { value: (a) => stats[a.zone].fgPct, label: "FG%" }
+            },
+            ...channels
+          },
+          ...options
+        })
+      )
+    );
+  }
+  return marks;
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+function shootingSignature(points, o = {}) {
+  const curve = o.curve ?? "monotone-x";
+  const { maxShare, maxFt, stops, id: gradientId } = signatureGradient(points, o.fill ?? diffScale());
+  const half = o.halfWidth ?? ((p, m) => Math.max(p.share / m * 20, 0.75) / 190);
+  const marks = [];
+  if (o.league ?? true) {
+    const leagueLine = (strong) => Plot6.line(points, {
+      x: "distance",
+      y: (p) => p.leagueFgPct === null || strong && p.fgPct === null ? Number.NaN : p.leagueFgPct,
+      curve,
+      stroke: "currentColor",
+      strokeOpacity: strong ? 1 : 0.4,
+      strokeDasharray: "3 3"
+    });
+    marks.push(leagueLine(false), leagueLine(true));
+  }
+  const edge = (sign) => (p) => p.fgPct === null ? Number.NaN : p.fgPct + sign * half(p, maxShare);
+  marks.push(
+    Plot6.areaY(points, {
+      x: "distance",
+      y1: edge(-1),
+      y2: edge(1),
+      curve,
+      stroke: "currentColor",
+      strokeOpacity: 0.2,
+      strokeWidth: 0.5,
+      ariaLabel: () => SIGNATURE_NAME,
+      render(index, scales, values2, dimensions, context, next) {
+        const g = next?.(index, scales, values2, dimensions, context) ?? null;
+        if (g === null) return null;
+        const x = scales.x;
+        const [x1, x2] = [String(x(0)), String(x(maxFt))];
+        const id = gradientId(x1, x2);
+        g.setAttribute("fill", `url(#${id})`);
+        const doc = context.document;
+        const grad = doc.createElementNS(SVG_NS, "linearGradient");
+        grad.setAttribute("id", id);
+        grad.setAttribute("gradientUnits", "userSpaceOnUse");
+        grad.setAttribute("x1", x1);
+        grad.setAttribute("x2", x2);
+        grad.setAttribute("y1", "0");
+        grad.setAttribute("y2", "0");
+        for (const [offset, colour] of stops) {
+          const s = doc.createElementNS(SVG_NS, "stop");
+          s.setAttribute("offset", `${offset}%`);
+          s.setAttribute("stop-color", colour);
+          grad.appendChild(s);
+        }
+        const defs = doc.createElementNS(SVG_NS, "defs");
+        defs.appendChild(grad);
+        g.insertBefore(defs, g.firstChild);
+        return g;
+      }
+    })
+  );
+  const t = withFormat(o.tip ?? false, {
+    x: (d) => `${d} ft`,
+    y: ".1%",
+    leagueFgPct: ".1%",
+    share: ".1%"
+  });
+  if (t !== false) {
+    marks.push(
+      Plot6.tip(
+        points,
+        Plot6.pointerX({
+          x: { value: "distance", label: "Distance" },
+          y: { value: (p) => p.fgPct ?? Number.NaN, label: "FG%" },
+          channels: {
+            leagueFgPct: { value: "leagueFgPct", label: "League FG%" },
+            share: { value: "share", label: "Share of shots" }
+          },
+          ...t
+        })
+      )
+    );
+  }
+  return marks;
+}
+
+export { axisLogos, headshots, linkIds, logos, meanLines, medianLines, shootingSignature, shotCells, shotZones, sizeRender, surface, teamColor, teamFill, teamTiers, titleImage, wordmarks };
+//# sourceMappingURL=plot.js.map
+//# sourceMappingURL=plot.js.map