Skip to main content

percentileBar: a marker on a track

AFC, 2024
TeamWin %
KC
88
LAC
65
DEN
59
LV
24
BUF
76
MIA
47
NYJ
29
NE
24
import { STANDINGS } from "@sportsdataverse/examples/data";
import { defineTable } from "@sportsdataverse/sdvtables";
import { renderHTMLAsync } from "@sportsdataverse/sdvtables/html";

// With scale "auto" (the default), values that are all in [0, 1] are read as shares of the domain.
const rows = STANDINGS.map((r) => ({ ...r, win_share: r.wins / (r.wins + r.losses + r.ties) }));
const spec = defineTable<(typeof rows)[number]>()
  .columns((c) => [c.text("team"), c.percentileBar("win_share", { label: "Win %", domain: [0, 100] })])
  .title("AFC, 2024")
  .build();
await renderHTMLAsync(spec, rows);

Tags: kind · percentileBar · gt_percentile_bar. All sdvtables examples.