reactable - An Interactive Tables Guide

Part 2: How to draw the rest of the owl.

Thomas Mock
05-15-2020

Table of Contents



Part 2 of this guide will go through how to in fact draw the rest of the owl, as the previous post barely covered the how and instead focused on a clean final product.

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.

If you want to go much deeper than this basic guide, check out the reactable site, which has lots of examples!

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

Read in the Data

I’ve gone through collecting the data and have put into a non-tidy wide format for Salary Rank, playoff week and appearances, Total appearances, and finally salary from 2014-2019.


library(reactable) # for interactive tables
library(tidyverse) # all the things
library(htmltools) # for building div/links
library(paletteer) # for all the palettes

playoff_salary <- read_csv("https://raw.githubusercontent.com/jthomasmock/radix_themockup/master/_posts/2020-05-13-qb-salaries-vs-playoff-appearances/playoff_salary.csv")

glimpse(playoff_salary)

Rows: 36
Columns: 7
$ player     <chr> "Tom Brady", "Aaron Rodgers", "Russell Wilson", …
$ Wildcard   <dbl> 1, 2, 4, 3, 2, 2, 2, 1, 2, 2, 2, 2, 1, 2, 0, 0, …
$ Division   <dbl> 5, 4, 4, 3, 2, 2, 2, 2, 1, 2, 1, 1, 2, 0, 2, 2, …
$ Conference <dbl> 5, 3, 1, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 2, 1, …
$ Superbowl  <dbl> 4, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, …
$ Total      <dbl> 15, 9, 10, 7, 4, 5, 6, 3, 3, 5, 3, 3, 5, 2, 5, 4…
$ salary     <dbl> 100.065, 125.602, 91.114, 127.690, 93.700, 75.26…

Basics of reactable

A very basic reactable table can be created as so:


playoff_salary %>%
  reactable()

Immediately we have reactive table split into 4x pages with 10 observations per page.

The core parts we want to change are:
- Conditional color formatting for Total Appearances and Salary
- All on one page
- Change the font

Conditional Colors

Like most things in R there are MANY ways to generate indeterminate length color palettes. For more info about using color to represent data values check out Claus Wilke’s book section. Importantly - we want a sequential/continuous color scale.

Per Claus:

Such a scale contains a sequence of colors that clearly indicate (i) which values are larger or smaller than which other ones and (ii) how distant two specific values are from each other. The second point implies that the color scale needs to be perceived to vary uniformly across its entire range.

Sequential scales can be based on a single hue (e.g., from dark blue to light blue) or on multiple hues (e.g., from dark red to light yellow) (Figure 4.3). Multi-hue scales tend to follow color gradients that can be seen in the natural world, such as dark red, green, or blue to light yellow, or dark purple to light green. The reverse, e.g. dark yellow to light blue, looks unnatural and doesn’t make a useful sequential scale.

Figure 4.3

Now there are plenty of palettes to choose from, such as viridis, RColorBrewer, ggthemes, as well as a nice meta collection via paletteer!

Now it’s often hard to keep track of these palettes and what they actually look like.

To display ANY palette or vector of colors in R you can use scales::show_col() - scales comes along with ggplot2 & the tidyverse, so you probably don’t need to install it (just load it)! Reference: StackOverflow and scales.


library(scales)

scales::show_col(c("red", "black", "blue", "purple"))

scales::show_col() also works with palettes/vectors.

scales::show_col() also works with paletteer or really any other palette package to display palettes/vectors. You just need to supply > 1 color as a character vector and you’re good to go!