Tutorials

These tutorials start from real data and end at something you would publish: a scoreboard, a win-probability chart, a game dashboard, a ratings chart, a player's form. They come in two halves that link to each other.

• Live notebooks, here. Observable Framework pages that run sdvplot-js in your browser. Each draws a committed snapshot of ESPN data and has a Fetch live from ESPN toggle: your browser then fetches today's data and parses it with sportsdataverse-js's own parser.
• Node scripts, in sportsdataverse-js. Runnable scripts that fetch with sportsdataverse and draw with sdvplot-js in Node: static figures, PNGs and scheduled GitHub Actions.

Versions

The sportsdataverse-js side needs sportsdataverse 4.0.0 or later and the @sportsdataverse/* packages at 0.1.0 or later. Until both are on npm, the scripts run from source checkouts; the notebooks need nothing installed.

Workflows with sdv-js (live notebooks)

• Live scoreboard: what is on today and who is winning, in each matchup's colours, for six leagues. Script it in Node: nightly scores card, posted by a GitHub Action.
• Win-probability scrubber: which plays decided an NFL or college football game? Script it in Node: the winprobability section of espnNflSummary (the cross-league surface).
• Build your own game dashboard: who shot from where, and how did it show in the box score? Script it in Node: shot chart with sdvplot + sporty and a game's shot chart against the league.
• Season ratings scatter: which teams were good at both ends, and which were lucky? Script it in Node: NFL standings as a publication table.
• Player trend explorer: is a player trending up, and what did they do over a stretch you pick? Script it in Node: a player's form from his game log.

Charts, tables and automations with sdvplot-js (Node scripts)

The sportsdataverse-js tutorials that draw with sdvplot-js. Each page shows the full script and the output it produced; the notebook beside it works through the same idea live.

• Shot chart with sdvplot + sporty: one NBA game's shots on a sporty court, as SVG. Live: game dashboard.
• Standings bars in team colours: WNBA standings as team-coloured bars, as SVG. Live: team colours.
• Roster table with headshots: a roster as an sdvtables HTML table. Live: tables.
• A game's shot chart against the league: a game's shots in hexagons, coloured against the 2023-24 league, as PNG. Live: shot charts.
• NFL standings as a publication table: the final 2024 NFL standings as two sdvtables tables, as PNG. Live: season ratings scatter.
• A player's form from his game log: LeBron James's 2023-24 season with a rolling mean, as PNG. Live: player trend explorer.
• Nightly scores card, posted by a GitHub Action: last night's scores as a social card, every morning. Live: live scoreboard.
• Weekly power-rankings ladder, posted by a GitHub Action: the AP Top 25 as a team-coloured ladder, every week. Live: logos by league.

The rest of the sportsdataverse-js tutorials cover the data side: scoreboards, play-by-play, standings, odds and release datasets across the leagues it covers.

See also

• All notebooks, including the package tours: logos, colours, surfaces, shot charts, tables, linking and chart libraries.
• The guides and the examples by sport, each running in CI.