Wordmarks at the end of each bar

import * as Plot from "@observablehq/plot";
import { STANDINGS } from "@sportsdataverse/examples/data";
import { loadLeague } from "@sportsdataverse/sdvplot";
import { wordmarks } from "@sportsdataverse/sdvplot/plot";

await loadLeague("nfl");
Plot.plot({
  marginLeft: 40,
  x: { label: "Wins", domain: [0, 19] },
  y: { label: null },
  marks: [
    Plot.barX(STANDINGS, { x: "wins", y: "team", fill: "#ccc", sort: { y: "-x" } }),
    // A wordmark is centred on its point: an accessor puts the centre just past the bar's end.
    wordmarks(STANDINGS, { league: "nfl", x: (s) => s.wins + 1.8, y: "team", team: "team", height: 0.07 }),
    Plot.ruleX([0]),
  ],
});

Tags: plot · wordmarks · nfl. All sdvplot examples.