playoff_salary %>%
reactable()
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).
Highest cap hits from 2014-19:
— Paul Hembekides (@PaulHembo) May 12, 2020
Matthew Stafford ($130M)
Ben Roethlisberger ($128M)
Aaron Rodgers ($126M)
Drew Brees ($125M)
Eli Manning ($124M)
Matt Ryan ($118M)
Philip Rivers ($117M)
Joe Flacco ($106M)
Cam Newton ($104M)
None won the Super Bowl during that time.
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.
The thing here is the following:
— Moo (@PFF_Moo) May 12, 2020
If you include Brady who is the next in the list ($100M), these 10 QBs combine for 3 of 6 Super Bowl titles and 6 of 12 Super Bowl appearances.
Accounting for 50% is pretty good for 10/32 of the league, isn't it? https://t.co/C18MQAHfL8
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:
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:::
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
──────────────────────────────────────────────────────────────────────────────