Win-probability scrubber

The question: which plays decided the game? ESPN publishes a win probability after every play of an NFL or college football game. Drawn over the game and paired with the play-by-play, it shows when the game turned, and the biggest jumps name the plays that turned it.

The workflow: one ESPN summary request holds everything. sportsdataverse-js splits it into sections (sdv.nfl.espnNflSummary({ event_id, parsed: true, section }) in Node; here the same parser, parseEndpoint("espn", "summary", raw, section), on the same JSON in your browser): header for the teams and the final score, winprobability for one row per play (the home team's chance and the play's id), and drive_plays for the plays themselves. The page joins the two on the play id, colours the home and away halves with sdvplot's matchupColors, puts each team's logo on its side of 50%, and hovers the nearest play with nearestHover.

The snapshot is the 2024 NFL season opener, Baltimore at Kansas City on 5 September 2024 (Kansas City won 27-20; ESPN event 401671789). Tick Fetch live from ESPN to load any NFL or college football game by its ESPN event id (the number in an espn.com game URL), or arrive here from a card on the live scoreboard.

Drag Play to scrub through the game: the rule and the panel under the chart follow it. Hover the chart for the nearest play.

The plays that decided it

The eight plays that moved the win probability most, either way. A swing is in percentage points of the home team's chance.

What to take from it

• One request, many tables. A summary response holds the header, the plays and the win probability; sdv-js's section argument picks one, and the sections share ids (play_id in one is id in the other), so they join without guessing.
• Read the whole curve, not the last point. In the snapshot, Kansas City was above 50% after 95% of the plays; Baltimore led only in the first quarter (Kansas City's low was 38%). The two biggest swings were both Lamar Jackson deep passes: the 49-yard touchdown to Isaiah Likely early in the fourth quarter (−20.7 points) and the 38-yard completion to Rashod Bateman with 43 seconds left (−21.4) that reached the Kansas City 10.
• Read the score columns, not the text. The last snap's text begins "pass short middle to I.Likely for 10 yards, TOUCHDOWN"; only later in the same sentence does the review reverse it. The play's home_score and away_score (27 and 20) and the win probability (still 87% for Kansas City, then 100% at the end) carry the ruling that stood.
• Colour the halves. Shading each side of 50% in its team's colour, from a pair matchupColors chose to stay apart, makes "who was ahead" readable at a glance, in light and dark mode.

Script it in Node: the same three sections come from sdv.nfl.espnNflSummary({ event_id: 401671789, parsed: true, section: "winprobability" }); see sdv-js's cross-league tutorial for the summary sections. The Linked interactivity notebook covers nearestHover and tooltip in depth.