Skip to main content

Picking a mark: variants and ranking

{
  "light": "default espn https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/7e/7ea8154cdbff5db84d248f235c1f1c78a1a8b4cb8c14335b5886ec10ee20b00e.png",
  "dark": "dark espn https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/d1/d1eda281e4c4ff5bcb45a9186bbc906bc62262d4c30ac26950951e5f983319b7.png",
  "wordmark": "default nflverse https://sdv.nyc3.cdn.digitaloceanspaces.com/assets/public/sha256/35/35d8c2e4a7466b87e32f24a0cbb38a6138e70c02c1708fb49109a74d9841783b.png",
  "ranked": [
    "logo dark (espn, rank 0)",
    "logo primary_logo_on_primary_color (espn, rank 0)",
    "logo primary_logo_on_secondary_color (espn, rank 0)",
    "logo primary_logo_black (espn, rank 0)",
    "logo secondary_logo_black (espn, rank 0)",
    "logo primary_logo_on_black_color (espn, rank 0)",
    "logo primary_logo_on_white_color (espn, rank 0)",
    "logo secondary_logo_on_black_color (espn, rank 0)",
    "logo secondary_logo_on_primary_color (espn, rank 0)",
    "logo secondary_logo_on_secondary_color (espn, rank 0)",
    "logo secondary_logo_on_white_color (espn, rank 0)",
    "logo default (espn, rank 0)",
    "logo primary_logo_white (espn, rank 0)",
    "logo secondary_logo_white (espn, rank 0)",
    "logo grayscale (espn, rank 0)",
    "logo scoreboard (espn, rank 0)",
    "logo scoreboard_dark (espn, rank 0)",
    "wordmark default (nflverse, rank 1)",
    "logo squared (nflverse, rank 1)"
  ]
}
import { compareMarks, marks, selectMark, selectMarkSync } from "@sportsdataverse/sdvplot";

// Green Bay ships a distinct dark-background logo (many teams reuse one image for both).
const light = await selectMark("GB", "nfl");
const dark = selectMarkSync("GB", "nfl", { variant: "dark" }); // the league is loaded now
const wordmark = selectMarkSync("GB", "nfl", { markType: "wordmark" });
// marks() returns the bundled rows already ranked; compareMarks is that ranking, for rows you filter or merge.
const ranked = [...(await marks("GB", "nfl"))].sort(compareMarks);

{
  light: light && `${light.variant} ${light.source} ${light.archive_url}`,
  dark: dark && `${dark.variant} ${dark.source} ${dark.archive_url}`,
  wordmark: wordmark && `${wordmark.variant} ${wordmark.source} ${wordmark.archive_url}`,
  ranked: ranked.map((r) => `${r.mark_type} ${r.variant} (${r.source}, rank ${r.source_rank})`),
};

Tags: selectMark · marks · variant · nfl. All sdvplot examples.