NFL, Visual Stats Frenzy — @CDM-Style

I am a rookie.
I am an NFL rookie.
I am a rookie at NFL stats.

I have started being involved with the NFL at the beginning of this year, first with a digital project in Culver city and only in October with NFL Game Pass Europe.

So I thought : let’s start from the basic.
Let’s start from re-thinking the most used stats.
Being able to change or create variations on the stats that everybody use constantly.

What??? Are you crazy? You want to teach us how NFL works now, for real?

Nope.
Just trying the outsider route to see if we can innovate and create value for fans.

Standings and Season View

So let’s start from Standings for the Regular Season.

They exist basically in 3 + 1 different nuances:

  1. Division (8: North, East, South, West for AFC and NFC)
  2. Conference (2: AFC, NFC)
  3. League
  4. Additional Playoffs ranking (2: AFC, NFC)

Let’s see how they appeared on NFL.com in 2004.

The NFL digital team has made them so much more modern and readable with the latest iteration and they now look like this, designed for full responsive web and working great on mobile.

And also comparing what the main NFL broadcasters are doing for standings there no major variations, it is a de-facto standard.

As for football in Europe, this is very fine.

They work and everybody is used to consume this content in this way: tables with numbers, ordered by the stat that define the rank and complemented with extra stats that can explain tie-breaking rules or give more details on the performance.

So what is the problem?

What I find lacking is any visual clue of how the situation really is, each Division looks the same even if one may have two teams at 9–6 and the other has the top team at 12–3 and the second at 8–7, the same applies for conference and league views.

So can something be done, at least as an alternative visualisation?

The basic idea is to start from the core data element on which standings are based of: Won — Lost , ranging from 16–0 to 0–16 and all in between at the end of the season.

6–4 or 8–2 or 0–10 (sigh!)

OK, I know also a tie is possible and it usually happens once or twice a season max, but let’s forget about that for now.

These two numbers are always associated with a team, even on broadcast graphics.

So.

The idea is to vertically visualise “games won” on top of the baseline and “games lost” below the baseline with the baseline including the team short code like in the image below in the case of the Kansas City Chiefs being 10-6 at the end of the regular season. In this case the first won game was against the Patriots (NE) and the first lost game was with the Steelers (PIT).

Each team alone does not look very meaningful as-is but when combined with others in horizontal manner to form a standing rank it starts to make sense.

This is the final standing for the regular season of the AFC West Division.

If we put all together the resulting visual infographics at the of the 2017 regular season looks like this.

From this visual representation it’s easier to see how different divisions performed in more heterogenous or homogeneous way, some with one team dominating the group others with more shared success.

it’s also interesting checking out which division generated the more teams for the Playoffs phase, for either Division games or WildCard ones.

NFC South a quite balanced Division that was able to send 3 teams to the Playoffs.

When considering the Conference view this is the result and you can notice how NFC was more performing than AFC both having two leaders at the same level 13–3.

The full league version looks like this. This last version can be used as a great tool to interactively navigate the whole season.

Click/touch/hover on a team and expand to the whole team’s season, click/touch/hover on a game and get all game’s details including access to video game recaps and full reply (for GamePass users).

This can also be animated to compose progressively from week 1 to week 17.

I know there are limitations and issues with this solution:

  1. It should integrate the numeric values of won lost somewhere, but elegantly
  2. It does not give you the sequence view of won lost per game week (WWWLWWWL…)
  3. It’s quite big and wide, can it work on smaller screen?
  4. It has not been yet developed visually from my UXD team and everything you see comes from a huge google spreadsheet with data formula etc..

New version after some users comments

I have also attempted a new version including all numbers for team and each game. Maybe too much but worth experimenting.

Extra bits.

This is how 2016 looks like (small note SD is LAC for Chargers change of venue).

2016 League
2016 Conference
2016 Division

I have also added on top of the various versions a section that contains summary team data related to standings like the one below.

The most interesting part is the “next games” area — which is now empty as the regular season is over — which highlights all future games for each team with average % value of the opponents, ie.e how tough is the rest of the season (based on current results).

I hope this could have someone starting considering it at NFL and adopt it for some storytelling both on digital and broadcast.

I can imagine broadcast graphics built on the same principle as well as animated graphics to explain the season so far and interactive touch screen for pundits with similar logic.

I also hope this make some sense.

Ah ok, Thanks Pete (Carroll).

Single team season view

As I was on the subject I then extended the research on the single team season view.

How can I visualise the season of a single team using similar model and create some alternative view to what we currently are seing both in digital and broadcast?

The easiest way is to focus on the won lost sequence but that is not new, something like this below.

I have come up with a simple way to show a whole season uing a 3 series chart (native from google spreadsheet) — this can obviously be designed mauch better once all elements are defined.

X Axis all 16 games with opponents as X value

Bar chart positive — points scored for

Bar chart negative — points scored against

Area line indicating the points difference in positive (won game) or negative (lost game)

The top line is an indication of Home/Away. The second line is the W / L games won lost sequence

Example: The Minnesota Vikings, they had a great season and almost always scored more than 20 points.

In such way you can have a overall look at the season also considering games score and discover interesting patterns.

Have a look at Tampa Bay Buccaneers, they scored a lot and manage to lose often by few points, instead the New York Giant almost never scored substantially. The 49ers had the Jimmy Garoppolo effect which is clear in terms of W/L sequence but even more impressive if you look at the points scored in the last won games, etc…

This can be complemented by normal numeric stats as needed.

Here below all teams are listed in League Standings order.

Conclusion

All of the above is based on data manually entered and may have some flaws here and there — I hope not too impacting.

If I find a volunteer that can enter also previous season games this can be made available for those season too and comparing will be possible.

It’s a first attempt, by my ambitions in terms of making this happen are high, let’s see how it goes.

Send any feedback at cdm@deltatre.it please.

Access to the original google spreadsheet can be granted to interested individuals under the NFL or deltatre organisations.

Like what you read? Give carlo de marchis a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.