library(tidyverse)
library(here)
library(glue)
library(dplyr)
library(gt)
library(formattable)
library(htmltools)
library(DT)
library(scales)
allNumbers <- read_csv("allNumbers.csv")

gt() table

Task 1: Recreate

First 3 columns:

first_three <- allNumbers |>
  group_by(product) |>
  arrange(numbers) |>
  summarize(
    shades = glue_collapse(hex, sep = ", "),
    light_to_dark = unique(lightToDark)) |>
  filter(light_to_dark)

Extract “natural, nude, & neutral” information

natural_means <- allNumbers |>
  mutate(natural_shade = str_detect(name, "[Nn]atural|[Nn]eutral|[Nn]ude")) |>
  filter(lightToDark, natural_shade) |>
  group_by(product) |>
  summarize(natural_number = mean(numbers))

Calculate percentiles

last_two <- allNumbers |>
  inner_join(natural_means, by = "product") |>
  group_by(product) |>
  mutate(at_below_natural = (numbers <= natural_number)) |>
  summarize(
    n = n(),
    proportion = (sum(at_below_natural))/n)

Put it all together

shades_table_raw <- first_three |>
  inner_join(last_two, by = "product") |>
  dplyr::select(-light_to_dark)

Recreate the basics of the sketch as a table in R.

Task 2: Table Rough Draft

shades_table_raw_expanded <- shades_table_raw |>
  separate_rows(shades, sep = ", ")

shades_table_final <- shades_table_raw_expanded |>
  mutate(
    shades = str_trim(shades),
    shades = glue('<span style="color:{shades}">■</span>')) |>
  group_by(product, n, proportion) |>
  summarize(shades = glue_collapse(shades, sep = "")) |>
  relocate(product, shades)
## `summarise()` has grouped output by 'product', 'n'. You can override using the
## `.groups` argument.
shades_table_gt <- shades_table_final |>
  gt() |>
  cols_width(
    product ~ px(150),
    n ~ px(60),
    proportion ~ px(100)) |>
  fmt(
    columns = shades,
    fns = function(x){
      map(x, html)}) |>
  fmt_percent(
    columns = proportion,
    decimals = 2) |>
  tab_style(
    style = cell_text(size = "x-large",
                      whitespace = "nowrap"),
    locations = cells_body(columns = shades))
  

shades_table_gt
shades proportion
10 Hour Wear Perfection Foundation - 60
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 40.00%
BAREPRO Longwear Powder Foundation  - 35
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 40.00%
BAREPRO Performance Wear Liquid Foundation Broad Spectrum SPF 20 - 33
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 39.39%
BAREPRO Performance Wear Powder Foundation - 35
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 40.00%
BarePRO™ 24 hour Longwear Liquid Foundation with Mineral SPF 20  - 35
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 40.00%
Bounce™ Liquid Whip Long Wear Foundation - 40
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 40.00%
COMPLEXION RESCUE™ Hydrating Foundation Stick with Mineral SPF 25  - 20
■■■■■■■■■■■■■■■■■■■■ 40.00%
COMPLEXION RESCUE™ Tinted Moisturizer with Hyaluronic Acid and Mineral SPF 30 - 20
■■■■■■■■■■■■■■■■■■■■ 40.00%
Clear Complexion Make Myself Clear Makeup - 8
■■■■■■■■ 50.00%
ColorStay Full Cover Foundation - 12
■■■■■■■■■■■■ 50.00%
ColorStay Light Cover Liquid Foundation - 7
■■■■■■■ 71.43%
ColorStay Makeup For Combo/Oily Skin - 16
■■■■■■■■■■■■■■■■ 43.75%
ColorStay Makeup For Normal/Dry Skin - 15
■■■■■■■■■■■■■■■ 53.33%
Complexion Rescue Hydrating Foundation Stick Broad Spectrum SPF 25 - 20
■■■■■■■■■■■■■■■■■■■■ 40.00%
Crema Nuda Supreme Glow Reviving Tinted Moisturizer - 5
■■■■■ 20.00%
Dual Finish Multi-Tasking Lightweight Pressed Powder Foundation - 25
■■■■■■■■■■■■■■■■■■■■■■■■■ 16.00%
Fit Me Matte + Poreless Liquid Foundation - 40
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 30.00%
HD Liquid Coverage Foundation - 26
■■■■■■■■■■■■■■■■■■■■■■■■■■ 30.77%
Hello Happy Flawless Brightening Foundation SPF 15 - 12
■■■■■■■■■■■■ 50.00%
Hello Happy Velvet Powder Foundation - 12
■■■■■■■■■■■■ 41.67%
Infallible Pro-Matte Liquid Longwear Foundation - 22
■■■■■■■■■■■■■■■■■■■■■■ 31.82%
Matte Foundation Broad Spectrum SPF 15 - 30
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 60.00%
Matte Loose Powder Mineral Foundation SPF 15  - 30
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 60.00%
Matte Perfection Full Coverage Foundation - 22
■■■■■■■■■■■■■■■■■■■■■■ 22.73%
Matte Perfection Powder Foundation - 35
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 45.71%
MicroSmooth Baked Powder Foundation - 8
■■■■■■■■ 25.00%
ORIGINAL Foundation Broad Spectrum SPF 15 - 30
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 60.00%
ORIGINAL Liquid Mineral Foundation Broad Spectrum SPF 20 - 30
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 60.00%
Olay Simply Ageless Foundation - 8
■■■■■■■■ 62.50%
PHYTO-PIGMENTS Flawless Serum Foundation - 13
■■■■■■■■■■■■■ 61.54%
Pretty Natural Hydrating Foundation - 15
■■■■■■■■■■■■■■■ 40.00%
Skin Weightless Powder Foundation - 12
■■■■■■■■■■■■ 58.33%
Super Stay Full Coverage Foundation - 23
■■■■■■■■■■■■■■■■■■■■■■■ 52.17%
The Luminous Lifting Cushion Foundation SPF 20 + Refill - 12
■■■■■■■■■■■■ 58.33%
The Soft Fluid Long Wear Foundation SPF 20 - 27
■■■■■■■■■■■■■■■■■■■■■■■■■■■ 29.63%
Tinted Cover Foundation - 14
■■■■■■■■■■■■■■ 57.14%
Traceless Foundation Stick - 39
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 33.33%
Traceless Soft Matte Foundation - 40
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 32.50%
Travel Size Babassu Foundcealer Skincare Foundation Broad Spectrum SPF 20 - 6
■■■■■■ 50.00%
Travel Size Face Tape Foundation - 6
■■■■■■ 33.33%
True Skin Hydrating Foundation - 8
■■■■■■■■ 62.50%
Veil Fluid Makeup - 11
■■■■■■■■■■■ 27.27%
Veiled Threat Weightless Micro-Blurring Foundation - 42
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 45.24%
Vibrancy Argan Oil Foundation Fluid - 7
■■■■■■■ 28.57%
Your Skin But Better Foundation + Skincare - 40
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 42.50%

A New Approach: the DT table

add_swatches <- function(x) {
  colors <- strsplit(x, ",\\s*")[[1]]
  swatches <- paste0('<span style="display:inline-block;width:20px;height:20px;margin-right:5px;background-color:', colors, '"></span>')
  htmltools::HTML(paste(swatches, collapse = ""))}
shades_table_raw$shades <- sapply(shades_table_raw$shades, add_swatches)
shades_table_raw$proportion <- as.numeric(shades_table_raw$proportion)
shades_table_raw$proportion <- scales::percent(shades_table_raw$proportion, accuracy = 0.01)
shades_table_raw <- shades_table_raw[, c("product", "n", "shades", "proportion")]
datatable(shades_table_raw,
          escape = FALSE,
          rownames = FALSE,
          options = list(pageLength = 50),
          colnames = c("Product Name", "Number of Shades", "Color Swatches", "Percentile of ''Nude/Natural/Neutral'' Shade"))