knitr::include_graphics("images/linkedin_education.PNG")
LinkedIn style tables for personal websites
A post on how to us the {gt} table package to make tables for the about page of a pesonal website or blog.
Purpose
Katherine asked me if she could include the university logo in her education section on the about page on her website. The about page is made with the postcards package. I didn’t know how to do it but thought that a table might make the most sense.
I really liked the style of the LinkedIn education sections:
In this post I walk through recreating this table with the gt package in R.
Where to begin?
The education section in the LinkedIn table has six components for each entry. They are:
- A logo photo
- A hyperlink to the institution though the image
- Name of the institution (in bold)
- Title of the degree
- Date (start and end year)
- Grade or comment
Let’s create a tibble with these components.
library(tidyverse)
education <- tribble(
~logo, ~link, ~institution, ~degree, ~date, ~grade_comment,
# LU
"images/lu.jfif", "https://ehl.lu.se/ekonomisk-historia", "Lund University", "Master's degree, Economics", "2021", "Exchange semester",
# SU
"images/su.jfif", "https://www.ekon.sun.ac.za/", "Stellenbosch University", "Master's degree, Economics", "2020", "Grade: <em>cum laude</em>",
# uct hnours
"images/uct.jfif", "http://www.economics.uct.ac.za/", "University of Cape Town", "Honours degree, Economics", "2018", "Grade: 2:1",
# uct undergrad
"images/uct.jfif", "http://www.economics.uct.ac.za/", "University of Cape Town", "Bachelor's degree, Economics and Economic History", "2015-2017", "Grade: 2:1",
)Building the table
Now lets start on the table structure. What we’re gonna do is take the individual pieces and format them to html, then stick the text together in one cell and the logos/links in another.
education <- education %>%
mutate(
logo = glue::glue("<a href = {link}>
<img src='{logo}' width='50' height='50'>
</a>"),
institution = glue::glue("<b>{institution}</b>"),
date = glue::glue("<span style='opacity: .7;'> {date} </span>"),
grade_comment = glue::glue("<span style='opacity: .7;'> {grade_comment} </span>"),
)In the cell above we create an image tag for the logo, putting a hyperlink tag for the link to the university website inside it. Here we use the glue package which is useful for working with strings constructed from other columns. You can think of it as gluing together the html tag parts and the content from our dataframe. Next we put the institution in bold, and grey out the dates and grades with the html style tag, 'opacity: .7;'.1
Now we can stick these text components together into one cell (just called text) and keep only the logo and text columns.2 Finally we use the map function from the purrr package to transform the character strings into html. Printing the tibble shows that it now contains html elements inside each cell.
education <- education %>%
mutate(text = str_c(
institution, "<br>",
degree, "<br>",
date, "<br>",
grade_comment
)) %>%
select(logo, text) %>%
mutate(
logo = purrr::map(logo, gt::html),
text = purrr::map(text, gt::html)
)
education# A tibble: 4 × 2
logo text
<list> <list>
1 <html [1]> <html [1]>
2 <html [1]> <html [1]>
3 <html [1]> <html [1]>
4 <html [1]> <html [1]>Now we create the table by calling the gt() command.
library(gt)
education %>%
gt()| logo | text |
|---|---|
| Lund University Master's degree, Economics 2021 Exchange semester |
|
| Stellenbosch University Master's degree, Economics 2020 Grade: cum laude |
|
| University of Cape Town Honours degree, Economics 2018 Grade: 2:1 |
|
| University of Cape Town Bachelor's degree, Economics and Economic History 2015-2017 Grade: 2:1 |
Great, there it is!
Finalizing the table
We still want to make some changes to tidy it up a bit:
- Adding a table header
- Aligning the text to the left
- Removing the column labels
education %>%
gt() %>%
tab_header(md("**Education**")) %>%
cols_align(align = c("left"), columns = text) %>%
cols_label(
logo = "",
text = "",
)| Education | |
|
|
Lund University Master's degree, Economics 2021 Exchange semester |
|
|
Stellenbosch University Master's degree, Economics 2020 Grade: cum laude |
|
|
University of Cape Town Honours degree, Economics 2018 Grade: 2:1 |
|
|
University of Cape Town Bachelor's degree, Economics and Economic History 2015-2017 Grade: 2:1 |
Lovely! Now we have the table we can use in the about page of a blog or personal website, with nice clickable logos that take you to the website of the institution.