QB Salaries vs Playoff Appearances

Interactive tables make bad takes more fun.

NFL
tidyverse
tables
Author

Thomas Mock

Published

May 13, 2020

A recent tweet provided a (IMO) fairly week argument that paying a QB ends up making your team unsuccessful (no Superbowl wins for the 9 QBs below).

Moo had a good counter-argument (just include the 10th QB) - Tom Brady ruins part of the narrative. Additionally, just include playoff appearances and/or wins.

So let’s make a table of salary data vs playoff appearances! We could make this static (screenshot for Twitter) - but just for funs lets stretch a bit and make an interactive table with nice formatting.

reactable - interactive data tables

reactable is an R wrapper for the react table javascript library. Greg Lin at RStudio recently made this package and you can install it from CRAN with install.packages("reactable"). I adapted this table from some examples at the reactable package site.

Raw data comes from: Pro Football Reference & Over the Cap

A very basic reactable table can be created as so:

playoff_salary %>%
  reactable()
Salary Rank
player
Wildcard
Division
Conference
Superbowl
Total
salary
1
Matt Stafford
2
0
0
0
2
129.7
2
Ben Roethlisberger
3
3
1
0
7
127.7
3
Aaron Rodgers
2
4
3
0
9
125.6
4
Drew Brees
2
2
1
0
5
125.2
5
Eli Manning
1
0
0
0
1
124.2
6
Matt Ryan
1
2
1
1
5
118
7
Philip Rivers
1
1
0
0
2
117.3
8
Joe Flacco
1
1
0
0
2
106.1
9
Cam Newton
2
2
1
1
6
104.4
10
Tom Brady
1
5
5
4
15
100.1
1–10 of 36 rows

More Complex

At the risk of drawing the rest of the *&?$ing owl here is a more complex interactive table using the same data.

Part 2 of this blogpost will go step-by-step into creating more complex tables, but for now…enjoy and consume at your own risk!

(Full code at bottom of this post) :::{.column-body-outset}

2014-2019 Salary and Playoff Appearances

QBs limited to playoff games where they threw a pass
Salary Rank
Name
Wildcard
Division
Conference
Superbowl
Total
Salary
1
Matt Stafford
2
0
0
0
2
129.7M
2
Ben Roethlisberger
3
3
1
0
7
127.7M
3
Aaron Rodgers
2
4
3
0
9
125.6M
4
Drew Brees
2
2
1
0
5
125.2M
5
Eli Manning
1
0
0
0
1
124.2M
6
Matt Ryan
1
2
1
1
5
118M
7
Philip Rivers
1
1
0
0
2
117.3M
8
Joe Flacco
1
1
0
0
2
106.1M
9
Cam Newton
2
2
1
1
6
104.4M
10
Tom Brady
1
5
5
4
15
100.1M
11
Kirk Cousins
2
1
0
0
3
98.4M
12
Alex Smith
2
2
0
0
4
93.7M
13
Russell Wilson
4
4
1
1
10
91.1M
14
Andy Dalton
1
0
0
0
1
80M
15
Andrew Luck
2
2
1
0
5
75.3M
16
Carson Palmer
0
1
1
0
2
62.9M
17
Jimmy Garoppolo
0
1
1
1
3
59.8M
18
Ryan Tannehill
1
1
1
0
3
51.2M
19
Tony Romo
1
1
0
0
2
47.6M
20
Marcus Mariota
2
1
0
0
3
45.1M
21
Tyrod Taylor
1
0
0
0
1
37.7M
22
Peyton Manning
0
2
1
1
4
35M
23
Nick Foles
1
1
0
0
2
33.8M
24
Blake Bortles
1
1
1
0
3
31.7M
25
Jared Goff
1
1
1
1
4
29.7M
26
Carson Wentz
1
0
0
0
1
26.6M
27
Case Keenum
0
1
1
0
2
24.7M
28
Mitchell Trubisky
1
0
0
0
1
19.8M
29
Brock Osweiler
1
1
0
0
2
15.6M
30
Brian Hoyer
1
0
0
0
1
12.9M
31
Teddy Bridgewater
1
0
0
0
1
12.4M
32
Patrick Mahomes
0
2
2
1
5
11.2M
33
Deshaun Watson
2
1
0
0
3
9.4M
34
Josh Allen
1
0
0
0
1
8.7M
35
Dak Prescott
1
2
0
0
3
4M
36
Lamar Jackson
1
1
0
0
2
3.9M
TABLE: @THOMAS_MOCK | DATA: PRO-FOOTBALL-REFERENCE.COM & OVERTHECAP.COM

:::

Raw Code to generate the table

Below is the raw code to generate the table - I’ll do a deeper dive later, but as of now here is the raw code I used, including some HTML and CSS helpers. This is all adapted from the reactable cookbook.

The CSS and HTML helpers do some light-lifting for custom text and borders.

make_color_pal <- function(colors, bias = 1) {
  get_color <- colorRamp(colors, bias = bias)
  function(x) rgb(get_color(x), maxColorValue = 255)
}

good_color <- make_color_pal(c("#ffffff", "#f2fbd2", "#c9ecb4", "#93d3ab", "#35b0ab"), bias = 2)

tbl <- playoff_salary %>%
  arrange(desc(salary)) %>%
  mutate(
    `Salary Rank` = rank(desc(salary)),
    salary = round(salary, 1)
  ) %>%
  select(`Salary Rank`, player:Superbowl, everything()) %>%
  reactable(
    pagination = FALSE,
    compact = TRUE,
    borderless = FALSE,
    striped = FALSE,
    fullWidth = FALSE,
    theme = reactableTheme(
      headerStyle = list(
        "&:hover[aria-sort]" = list(background = "hsl(0, 0%, 96%)"),
        "&[aria-sort='ascending'], &[aria-sort='descending']" = list(background = "hsl(0, 0%, 96%)"),
        borderColor = "#555"
      )
    ),
    defaultColDef = colDef(
      align = "center",
      minWidth = 100
    ),
    columns = list(
      salary = colDef(
        name = "Salary",
        style = function(value) {
          value
          normalized <- (value - min(playoff_salary$salary)) / (max(playoff_salary$salary) - min(playoff_salary$salary))
          color <- good_color(normalized)
          list(background = color)
        },
        cell = JS("function(cellInfo) {
                          return cellInfo.value + 'M'}")
      ),
      Total = colDef(
        style = function(value) {
          value
          normalized <- (value - min(playoff_salary$Total)) / (max(playoff_salary$Total) - min(playoff_salary$Total))
          color <- good_color(normalized)
          list(background = color)
        },
        class = "border-left"
      ),
      player = colDef(
        name = "Name",
        minWidth = 140,
        align = "left"
      )
    )
  )





div(
  class = "salary",
  div(
    class = "title",
    h2("2014-2019 Salary and Playoff Appearances"),
    "QBs limited to playoff games where they threw a pass"
  ),
  tbl,
  tags$span(style = "color:#C8C8C8", "TABLE: @THOMAS_MOCK | DATA: PRO-FOOTBALL-REFERENCE.COM & OVERTHECAP.COM")
)
tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", rel = "stylesheet")
.salary {
  font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.number {
  font-family: "Fira Mono", Consolas, Monaco, monospace;
  font-size: 16px;
  line-height: 30px;
  white-space: pre;
}

.title {
  margin: 18px 0;
  font-size: 16px;
}

.title h2 {
  font-size: 20px;
  font-weight: 600;
}


.header:hover,
.header[aria-sort="ascending"],
.header[aria-sort="descending"] {
  background-color: #eee;
}

.salary-table {
  margin-bottom: 20px;
}

/* Align header text to the bottom */
.header,
.group-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header {
  border-bottom-color: #555;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
}

/* Highlight headers when sorting */
.header:hover,
.header[aria-sort="ascending"],
.header[aria-sort="descending"] {
  background-color: #eee;
}

.border-left {
  border-left: 2px solid #555;
}

/* Use box-shadow to create row borders that appear behind vertical borders */
.cell {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
─ Session info ───────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.2.0 (2022-04-22)
 os       macOS Monterey 12.2.1
 system   aarch64, darwin20
 ui       X11
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       America/Chicago
 date     2022-04-28
 pandoc   2.18 @ /Applications/RStudio.app/Contents/MacOS/quarto/bin/tools/ (via rmarkdown)
 quarto   0.9.294 @ /usr/local/bin/quarto

─ Packages ───────────────────────────────────────────────────────────────────
 package     * version date (UTC) lib source
 dplyr       * 1.0.8   2022-02-08 [1] CRAN (R 4.2.0)
 forcats     * 0.5.1   2021-01-27 [1] CRAN (R 4.2.0)
 ggplot2     * 3.3.5   2021-06-25 [1] CRAN (R 4.2.0)
 htmltools   * 0.5.2   2021-08-25 [1] CRAN (R 4.2.0)
 purrr       * 0.3.4   2020-04-17 [1] CRAN (R 4.2.0)
 reactable   * 0.2.3   2020-10-04 [1] CRAN (R 4.2.0)
 readr       * 2.1.2   2022-01-30 [1] CRAN (R 4.2.0)
 sessioninfo * 1.2.2   2021-12-06 [1] CRAN (R 4.2.0)
 stringr     * 1.4.0   2019-02-10 [1] CRAN (R 4.2.0)
 tibble      * 3.1.6   2021-11-07 [1] CRAN (R 4.2.0)
 tidyr       * 1.2.0   2022-02-01 [1] CRAN (R 4.2.0)
 tidyverse   * 1.3.1   2021-04-15 [1] CRAN (R 4.2.0)

 [1] /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library

──────────────────────────────────────────────────────────────────────────────