Tier data without a chart library

{
  "points": [
    "BUF: tier 1, rank 1",
    "DEN: tier 1, rank 2",
    "KC: tier 2, rank 1",
    "LAC: tier 2, rank 2",
    "MIA: tier 3, rank 1",
    "NYJ: tier 3, rank 2",
    "LV: tier 4, rank 1",
    "NE: tier 4, rank 2"
  ],
  "breakLabels": [
    "Elite",
    "Very Good",
    "Medium",
    "Bad"
  ],
  "title": "NFL Team Tiers",
  "TIERS_SUBTITLE": "created with the #sdvplot Tiermaker",
  "TIER_DESC": {
    "1": "Elite",
    "2": "Very Good",
    "3": "Medium",
    "4": "Bad",
    "5": "What are they doing?",
    "6": "",
    "7": ""
  },
  "TIER_THEMES.light": {
    "bg": "#ffffff",
    "line": "#3a3a3c",
    "text": "#1e1e1e",
    "muted": "#636366"
  },
  "wrapLabel('What are they doing?')": "What are they\ndoing?"
}

import { STANDINGS } from "@sportsdataverse/examples/data";
import {
  TIERS_SUBTITLE,
  TIER_DESC,
  TIER_THEMES,
  loadLeague,
  prepareTiers,
  wrapLabel,
} from "@sportsdataverse/sdvplot";

await loadLeague("nfl");
// Tier by SRS rank (ranks 1 to 8 in tier 1, 9 to 16 in tier 2, ...): teamTiers draws exactly these numbers.
const rows = STANDINGS.map((s) => ({ team: s.team, tier_no: Math.ceil(s.srs_rank / 8) }));
const t = prepareTiers(rows, "nfl", { presort: true, theme: "light" });

{
  points: t.x.map((x, i) => `${t.labels[i]}: tier ${t.y[i]}, rank ${x}`),
  breakLabels: t.breakLabels,
  title: t.title,
  TIERS_SUBTITLE,
  TIER_DESC,
  "TIER_THEMES.light": TIER_THEMES.light,
  "wrapLabel('What are they doing?')": wrapLabel("What are they doing?"),
};

Tags: tiers · prepareTiers · nfl. All sdvplot examples.