sdvplot-js docs · View source

Logos by league

Team identity from the bundled index: logos and wordmarks by league and season, one franchise across its eras, logos as the data marks of a chart and on its axis, and player headshots. Every chart below draws real data: the bundled team index, nflverse's 2024 regular season and the 2024 AFC standings.

Every team in a league

Pick a league and a season: the page loads that league's shard only. Mark switches between the logo and the wordmark, and Variant between the default mark and the one drawn for a dark background (shown on a dark panel, so you can see why it exists). When a team has no mark that matches exactly, sdvplot falls back: to the default variant (or one drawn for that background), and to a mark from other seasons when none covers this one. A team is left out only when it has no archived mark of that type at all: the NBA and the NHL have no wordmarks. The line under the grid counts how many teams got exactly what you asked for.

of teams have a to show; of them are the variant and cover (an undated mark covers every season), and the other are sdvplot's fallback.

One franchise across its eras

marks(team, league) lists every archived mark of a team with the seasons it was used. A relocated or rebranded franchise keeps one team_id, so its history stays in one place: the Utah Mammoth below are also the Winnipeg Jets of 1980 and the Phoenix and Arizona Coyotes. Pick another team; the default is the team in the league with the most logo eras.

Logos as data marks

logos() from @sportsdataverse/sdvplot/plot is an Observable Plot mark: each team is drawn as its logo at an (x, y), and the rest of Plot works as usual. On a dark page the chart asks for each team's dark variant: eight teams have one for 2024 (Dallas, Denver, Green Bay, Las Vegas, the Rams, Minnesota and both New York teams), and the rest keep their default logo. Here is every NFL team's 2024 EPA per play: what its offence gained (x) and what its defence allowed (y, reversed, so up is better). Logo height is a fraction of the chart's height. Reference lines draws the league mean or median on both axes. Hover a logo for Plot's tip.

The id: "team" option stamps each logo with its team's abbreviation, the same value the table's rowKey reads. That is all the linking needs: hover a row to light its logo, hover a logo to underline its row, and click rows to select them (the other logos dim). Sort by any column, search, or page through the 32 teams; the chart follows the table's selection.

Logos on an axis

axisLogos("y") replaces the y axis's tick labels with logos; a value that resolves to no team keeps its text. The bars take each team's colour from teamColor. Rank by re-sorts the same 32 teams.

Headshots and wordmarks

headshots() draws a player's headshot from an ESPN athlete id with no league data at all. Here are the eight AFC West and East starting quarterbacks of 2024 at their team's points for and against. wordmarks() draws a team's wordmark, here past the end of each bar.