{"id":1708,"date":"2012-10-30T23:08:22","date_gmt":"2012-10-31T04:08:22","guid":{"rendered":"https:\/\/ideasillustrated.com\/blog\/?p=1708"},"modified":"2014-03-11T19:33:12","modified_gmt":"2014-03-11T19:33:12","slug":"trends-in-nfl-football-scores-part-1","status":"publish","type":"post","link":"https:\/\/ideasillustrated.com\/blog\/2012\/10\/30\/trends-in-nfl-football-scores-part-1\/","title":{"rendered":"Trends in NFL Football Scores (Part 1)"},"content":{"rendered":"<p>One of the goals I set\u00a0for myself this summer was to learn a bit about\u00a0<a href=\"http:\/\/d3js.org\/\" target=\"_blank\" rel=\"nofollow noopener\">D3<\/a>,\u00a0a\u00a0visualization toolkit that can be used to manipulate and display data on the web. Considering that the trees are bare and we&#8217;ve already had our first frost here in Wisconsin, you can safely assume that I am behind schedule. Nevertheless, I feel that I&#8217;ve\u00a0finally reached a point where I have something to publish, so here goes.<\/p>\n<p>First of all, a little background.\u00a0D3 is a JavaScript library that allows you to bind data to any of the elements (text, lines and shapes) you might normally find on\u00a0a web page.\u00a0\u00a0These objects can be stylized using CSS and animated using simple dynamic functions. These features make D3 a perfect tool\u00a0for creating interactive charts and graphs without having to depend on third party programs like Google Charts, Many Eyes or\u00a0Tableau.<\/p>\n<p>I wanted to start out with something simple so\u00a0I elected to go with a basic line chart using data I pulled from <a href=\"http:\/\/www.pro-football-reference.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Pro-Fooball-Reference.com<\/a>. This site contains a ton of great information and statistics from the past 90+ years of the National Football League but &#8212; for now &#8212; I just looked at the final scores of all the games played from 1920 to 2011. My first D3-powered chart is below. It shows the average combined scores of winning and losing teams for each year of the NFL&#8217;s existence.<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 0px currentColor;\" src=\"https:\/\/ideasillustrated.com\/charts\/ii_D3_football_win_loss_1.html\" scrolling=\"no\" width=\"700\" height=\"400\"><\/iframe><\/p>\n<p>Although this chart looks pretty simple,\u00a0every element &#8212; including titles, subtitles, axes, labels, grids and data lines &#8212; has been\u00a0created manually using the D3 code. The payoff is pretty nice. All of the elements can be reused and you have tremendous control over what is shown onscreen. To demonstrate some of these cababilities, I&#8217;ve added interactive overlays that show a few of the major eras in NFL football (derived from work of <a href=\"http:\/\/en.wikipedia.org\/wiki\/David_Neft\" target=\"_blank\" rel=\"nofollow noopener\">David Neft<\/a> and\u00a0this <a href=\"http:\/\/www.pfraforum.org\/index.php?showtopic=1230\" target=\"_blank\" rel=\"nofollow noopener\">discussion thread<\/a>). If you move your mouse over the graph, you will see these different eras highlighted:<\/p>\n<p><strong>Early NFL (1920-1933)<\/strong> \u2013 The formation of the\u00a0American Professional Football Association (APFA)\u00a0in 1920 marked the official start of what was to become the National Football League. This era was marked by rapid formation (and dissolution) of small town franchises,\u00a0vast differences in team capabilities and\u00a0a focus on a relatively low-scoring running game. At this time, the pass was considered more of an\u00a0emergency option than a reliable standard. The rapid growth in popularity of the NFL during this era culminated with the introduction of a championship game in 1932.<\/p>\n<p><strong>Introduction of the Forward Pass (1933-1945)<\/strong> \u2013 The NFL\u00a0discontinued the use of collegiate football rules in 1933 and began to develop its own set of rules designed\u00a0around a\u00a0faster-paced, higher-scoring style of play. These innovations included the legalization of\u00a0the forward pass\u00a0from anywhere behind the line of scrimmage &#8212;\u00a0a change\u00a0that is often called the \u00a0&#8220;<a href=\"http:\/\/en.wikipedia.org\/wiki\/Bronko_Nagurski\" target=\"_blank\" rel=\"nofollow noopener\">Bronko Nagurski Rule<\/a>&#8221; after his controversial touchdown in the 1932 NFL Playoff Game.<\/p>\n<p><strong>Post-War Era (1945-1959)<\/strong> \u2013 The end of WWII\u00a0saw the expansion of the NFL beyond its East Coast and Midwestern roots with the move of the Cleveland Rams to Los Angeles &#8212; the first big-league sports franchise on the West Coast. This period also saw the end of racial segregation (enacted in the 30s) and the start of nationally televised games.<\/p>\n<p><strong>Introduction of the AFL (1959-1966)<\/strong> \u2013\u00a0Professional football&#8217;s\u00a0surge in popularity led to the formation of a rival organization &#8212; the American Football League &#8212; in 1960. The growth of the flashy AFL was balanced by a more conservative style of play in the NFL. This style was epitomized by coach Vince Lombardi and the <a href=\"http:\/\/www.packers.com\/history\/birth-of-a-team-and-a-legend.html\" target=\"_blank\" rel=\"nofollow noopener\">Green Bay Packers<\/a>, who\u00a0would win five championships in the 1960s. In 1966, the two leagues agreed to merge as of the 1970 season.<\/p>\n<p><strong>Dead Ball Era (1966-1977)<\/strong> \u2013\u00a0Driven in part by stringent restrictions on the offensive line, this period is marked by low scores and tough defensive play. Teams that thrived in this environment include some of the most famous defenses in modern NFL history: Pittsburgh&#8217;s <a href=\"http:\/\/en.wikipedia.org\/wiki\/Steel_Curtain\" target=\"_blank\" rel=\"nofollow noopener\">Steel Curtain<\/a>, Dallas&#8217; <a href=\"http:\/\/en.wikipedia.org\/wiki\/Doomsday_Defense\" target=\"_blank\" rel=\"nofollow noopener\">Doomsday Defense<\/a>, Minnesota&#8217;s <a href=\"http:\/\/en.wikipedia.org\/wiki\/Purple_People_Eaters\" target=\"_blank\" rel=\"nofollow noopener\">Purple People Eaters<\/a>\u00a0and the Rams&#8217; <a href=\"http:\/\/en.wikipedia.org\/wiki\/Fearsome_Foursome_(American_football)\" target=\"_blank\" rel=\"nofollow noopener\">Fearsome Foursome<\/a>.<\/p>\n<p><strong>Live Ball Era (1978-present)<\/strong> \u2013 Frustrated by the decreasing ability of offenses to score points in\u00a070s, the NFL began to add rules and make other changes to the structure of the game in an attempt to boost scoring. The most famous of these initiatives was the so-called &#8220;<a href=\"http:\/\/en.wikipedia.org\/wiki\/Mel_Blount\" target=\"_blank\" rel=\"nofollow noopener\">Mel Blount Rule<\/a>&#8221; (introduced in 1978), which severely restricted the defense\u2019s ability to interfere with passing routes. With the subsequent introduction of the <a href=\"http:\/\/en.wikipedia.org\/wiki\/West_Coast_offense\" target=\"_blank\" rel=\"nofollow noopener\">West Coast Offense<\/a> in 1979 &#8212; an offense based on precise, short passes &#8212;\u00a0this period became marked by a major focus on the passing game.<\/p>\n<p>Having created this first chart, I decided to build a second chart based on the ratio of average winning scores to average losing scores to see if there were any patterns.<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 0px currentColor;\" src=\"https:\/\/ideasillustrated.com\/charts\/ii_D3_football_win_loss_2.html\" scrolling=\"no\" width=\"700\" height=\"400\"><\/iframe><\/p>\n<p>The chart above shows how &#8212; after a period of incredibly lopsided victories &#8212; the average scoring differential settled in to a very steady pattern by the late 1940s and stayed at that level (roughly 2:1) for the next 30 years. Despite many changes in rules, coaching techniques, technology and other factors, only the pass interference rules of the late 1970s seemed to have any signifcant effect on this ratio, shifting it to just under 1.8:1 for the next 30 years.<\/p>\n<p>While I had the data available, I also decided to look at the differences in average scores between home teams and away teams. The chart below plots this data along with the same overlay I used in the first chart.<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 0px currentColor;\" src=\"https:\/\/ideasillustrated.com\/charts\/ii_D3_football_home_away_1.html\" scrolling=\"no\" width=\"700\" height=\"400\"><\/iframe><\/p>\n<p>A look at the ratio of average home team scores to average away team scores follows:<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 0px currentColor;\" src=\"https:\/\/ideasillustrated.com\/charts\/ii_D3_football_home_away_2.html\" scrolling=\"no\" width=\"700\" height=\"400\"><\/iframe><\/p>\n<p>What&#8217;s fascinating about this chart is how quickly a form of parity was acheived among all the NFL teams. By the mid-30s, a measurable home field advantage can be seen\u00a0at roughly 15%, a rate that has remained essential constant for over 70 years. Factors for this boost could include the psychological support of fans, familiar weather conditions, unique features of local facilities, lack of travel fatigue, referee bias and\/or increased levels of motivation in home town\u00a0players.<\/p>\n<p>Thanks to <a href=\"http:\/\/charlesmartinreid.com\/wordpress\/2012\/08\/d3-and-wordpress\/\" target=\"_blank\" rel=\"nofollow noopener\">Charles Martin Reid<\/a> for his solution to getting D3 and WordPress to play nice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the goals I set\u00a0for myself this summer was to learn a bit about\u00a0D3,\u00a0a\u00a0visualization toolkit that can be used to manipulate and display data on the web. Considering that the trees&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,7],"tags":[19,23,50,153,96],"class_list":["post-1708","post","type-post","status-publish","format-standard","hentry","category-design","category-information","category-programming","tag-charts","tag-d3","tag-football","tag-infographics","tag-sports"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts\/1708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/comments?post=1708"}],"version-history":[{"count":1,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts\/1708\/revisions"}],"predecessor-version":[{"id":2175,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts\/1708\/revisions\/2175"}],"wp:attachment":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/media?parent=1708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/categories?post=1708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/tags?post=1708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}