Skip to main content

Function: logos()

logos<R>(data, o): Markish

Defined in: packages/sdvplot/src/plot/marks.ts:305

Team logos as an Observable Plot mark at (x, y), height a fraction of the (facet) frame height. Needs loadLeague(league) first; a team that does not resolve is left out, with one warning. Every other Plot.image option passes through (tip, href, fx/fy, sort, filter, dx/dy, className, clip, …), and Plot's row-preserving transforms wrap it (Plot.dodgeY, Plot.stackY, Plot.windowY, Plot.selectLast, Plot.pointer); an aggregating transform (bin, group, hexbin) throws InputError. Each image is named for its team ("KC logo"). ariaLabel is Plot's per-image channel, so a string is a COLUMN name (ariaLabel: "qb" names each image by its row's qb); pass an accessor or an array for any other text.

Type Parameters​

R​

R

Parameters​

data​

Data<R>

o​

MarkOptions<R>

Returns​

Markish

Examples​

import * as Plot from "@observablehq/plot";
import { loadLeague } from "@sportsdataverse/sdvplot";
import { logos } from "@sportsdataverse/sdvplot/plot";

await loadLeague("nfl");
const afc = [
  { team: "KC", pf: 385, pa: 326 },
  { team: "BUF", pf: 525, pa: 368 },
  { team: "DEN", pf: 425, pa: 311 },
];
Plot.plot({ marks: [logos(afc, { league: "nfl", x: "pf", y: "pa", team: "team", tip: true })] });

A beeswarm: Plot.dodgeY reads r as the collision radius in pixels, about half the drawn height.

import * as Plot from "@observablehq/plot";
import { loadLeague } from "@sportsdataverse/sdvplot";
import { logos } from "@sportsdataverse/sdvplot/plot";

await loadLeague("nfl");
const afc = [
  { team: "KC", net_epa: 0.063 },
  { team: "LAC", net_epa: 0.101 },
  { team: "DEN", net_epa: 0.108 },
  { team: "BUF", net_epa: 0.19 },
];
Plot.plot({ height: 160, marks: [logos(afc, Plot.dodgeY({ league: "nfl", team: "team", x: "net_epa", r: 12, height: 0.18 }))] });