Behind The Mapping of NFL Passing Touchdowns

Behind the mapping of the NFL Passing Touchdowns

There is a limit to the numbers and stats displayed on a sports site. For example, if fan-bloggers wanted to know if the completion rate in the red zone was better than the midfield long-range completion rate during the NFL’s midseason compared to the end of the regular season, they would be forced to cope with a labor-intensive data dive to compile the information needed.

Fanatics has developed a way for diehard NFL fans and sportswriters alike to break down the complicated data. For the 2015 season, we recorded every touchdown pass thrown for all 32 teams for every game and compiled them in a searchable interactive. It shows the distance between a given pass.

Users can also search the data by the regular season week, the game, the team’s name, the position of the receiver or passer, and/or the player’s name. The interactive reveals where the pass or passes were thrown, where they were received, the yards traveled, player rankings, and more. To learn more, check out our behind-the-scenes look at the interactive below.

How We Made the Interactive

NFL Touchdown heat map - the field

The interactive was nothing less than a labor of love. To compile it, Fanatics researchers reviewed every 2015 touchdown pass via footage from NFL Gamepass. Using a searchable and to-scale NFL field image, in which a 12-by-12-pixel cell corresponds to a 4-by-4-foot square of the actual gridiron, the researchers plotted the start position of a given pass as well as the position of the completing receiver.

The JavaScript library D3 enabled developers to map the coordinates of a pass from start to reception. Along with the stats above, they recorded distance from the reception point to the goal line. They further sorted the information by game, team, passer, and receiver, along with the passers’ and receivers’ rankings. This process is repeated for every 2015 touchdown pass on file with NFL Gamepass.

NFL touchdown heat map backend

The end result is a user-friendly interface that makes it easy to see either individual- or group-pass drives based on criteria that are easy to enter.

Using the Tool

One of the best passing games of the 2015 regular season was the November 1 match-up between the New Orleans Saints and the New York Giants. In that game, both teams threw an unbelievable 13 touchdown passes, with Saints quarterback Drew Brees passing for 505 yards and seven touchdowns.

NFL touchdown heat map

Above here, passing touchdown heat map for the game between the New Orleans Saints vs the New York Giants played on 11/1/2015. Blue dots represent quarterbacks, red dots represents receivers scoring the touchdown. See more details at the actual touchdown heat map

Using the interactive, it is easy to see the differences between Brees and the Giants’ quarterback Eli Manning. Brees threw all of his passes between the hashes, suggesting that Brees quick-threw all of his successful passes. This would also imply that the Saints were able to create quick targets for Brees, the Giants’ defense was lacking – particularly considering that the average pass was 12 yards – or both.

Manning, on the other hand, regularly left the hash marks to pass. This suggests that the Giants had a stronger line; either Manning had poorer targets and was forced to wait for an opening more often or – for this game – Manning preferred a sideline offense. While the Giants’ 12-yard passing average for this game seems on par with the Saints’, this statistic is misleading: Manning had two touchdown passes of more than 25 yards and one for 60 yards.


With this tool, it is easy to relive the best passing drives of this season and visually interpret the passing philosophies and successes of each of the NFL’s teams. Using Fanatic’s interactive, everyone can be their own color commentator, offering insightful analysis of the league’s aerial game. Try it for yourself here





You might also like...