Skip to content

Going Deeper with R

Making Your Reports Shine: HTML Edition

This lesson is called Making Your Reports Shine: HTML Edition, part of the Going Deeper with R course. This lesson is called Making Your Reports Shine: HTML Edition, part of the Going Deeper with R course.

Transcript

Click on the transcript to go to that point in the video. Please note that transcripts are auto generated and may contain minor inaccuracies.

View code shown in video

The version of my Quarto document using a custom theme and some additional customization is below:

---
title: "Portland Public Schools Math Proficiency Report"
format: 
  html:
    theme: cyborg
    mainfont: "IBM Plex Mono"
    fontsize: 20px
execute: 
  echo: false
  warning: false
  message: false
editor_options: 
  chunk_output_type: console
---

```{r}
library(tidyverse)
library(fs)
library(scales)
library(ggrepel)
library(ggtext)
library(ragg)
library(here)
library(flextable)
```


```{r}
third_grade_math_proficiency <- 
  read_rds(here("data/third_grade_math_proficiency.rds")) |> 
  select(academic_year, school, school_id, district, proficiency_level, number_of_students) |> 
  mutate(is_proficient = case_when(
    proficiency_level >= 3 ~ TRUE,
    .default = FALSE
  )) |> 
  group_by(academic_year, school, district, school_id, is_proficient) |> 
  summarize(number_of_students = sum(number_of_students, na.rm = TRUE)) |> 
  ungroup() |> 
  group_by(academic_year, school, district, school_id) |> 
  mutate(percent_proficient = number_of_students / sum(number_of_students, na.rm = TRUE)) |> 
  ungroup() |> 
  filter(is_proficient == TRUE) |> 
  select(academic_year, school, district, percent_proficient) |> 
  rename(year = academic_year) |> 
  mutate(percent_proficient = case_when(
    is.nan(percent_proficient) ~ NA,
    .default = percent_proficient
  )) |> 
  mutate(percent_proficient_formatted = percent(percent_proficient,
                                                accuracy = 1))
```

```{r}
theme_dk <- function() {
  
  theme_minimal(base_family = "IBM Plex Mono") +
    theme(axis.title = element_blank(),
          axis.text = element_text(color = "grey60",
                                   size = 10),
          plot.title = element_markdown(),
          plot.title.position = "plot",
          panel.grid = element_blank(),
          legend.position = "none")
  
}
```

{{< pagebreak >}}


## Chart

The chart below shows math proficiency for all PPS schools.

```{r}
#| fig-height: 5
#| fig-alt: A line chart showing math proficiency rates among all PPS schools in 2018-2019 and 2021-2022

top_growth_school <- 
  third_grade_math_proficiency |>
  filter(district == "Portland SD 1J") |> 
  group_by(school) |> 
  mutate(growth_from_previous_year = percent_proficient - lag(percent_proficient)) |> 
  ungroup() |> 
  drop_na(growth_from_previous_year) |>
  slice_max(order_by = growth_from_previous_year,
            n = 1) |> 
  pull(school)

third_grade_math_proficiency |>
  filter(district == "Portland SD 1J") |>
  mutate(highlight_school = case_when(
    school == top_growth_school ~ "Y",
    .default = "N"
  )) |> 
  mutate(percent_proficient_formatted = case_when(
    highlight_school == "Y" & year == "2021-2022" ~ str_glue("{percent_proficient_formatted} of students
                                                             were proficient
                                                             in {year}"),
    highlight_school == "Y" & year == "2018-2019" ~ percent_proficient_formatted,
    .default = NA
  )) |> 
  mutate(school = fct_relevel(school, top_growth_school, after = Inf)) |>
  ggplot(aes(x = year,
             y = percent_proficient,
             group = school,
             color = highlight_school,
             label = percent_proficient_formatted)) +
  geom_line() +
  geom_text_repel(hjust = 0,
                  lineheight = 0.9,
                  family = "IBM Plex Mono",
                  direction = "x") +
  scale_color_manual(values = c(
    "N" = "grey90",
    "Y" = "orange"
  )) +
  scale_y_continuous(labels = percent_format()) +
  scale_x_discrete(expand = expansion(mult = c(0.05, 0.5))) +
  annotate(geom = "text",
           x = 2.02,
           y = 0.6,
           hjust = 0,
           lineheight = 0.9,
           color = "grey70",
           family = "IBM Plex Mono",
           label = str_glue("Each grey line
                            represents one school")) +
  labs(title = str_glue("<b style='color: orange;'>{top_growth_school}</b> showed large growth<br>in math proficiency over the last two years")) +
  theme_dk()
```

{{< pagebreak >}}


# Table

```{r}
#| tbl-cap: Math proficiency among third graders in five Portland schools

flextable_data <- 
  read_rds(here("data/third_grade_math_proficiency_dichotomous.rds")) |> 
  filter(district == "Portland SD 1J") |> 
  filter(school %in% c("Abernethy Elementary School",
                       "Ainsworth Elementary School",
                       "Alameda Elementary School",
                       "Arleta Elementary School",
                       "Atkinson Elementary School")) |> 
  select(year, school, percent_proficient_formatted) |> 
  arrange(school) |> 
  pivot_wider(id_cols = school,
              names_from = year,
              values_from = percent_proficient_formatted)


flextable_data |> 
  flextable() |> 
  set_header_labels(school = "School") |> 
  align(j = 2, align = "center") |> 
  # width(j = 1, width = 10) |> 
  autofit() |> 
  set_caption("Math proficiency among third graders in five Portland schools")
```

The version of my Quarto document using the .scss file is below:

---
title: "Portland Public Schools Math Proficiency Report"
format: 
  html:
    theme: dk.scss
execute: 
  echo: false
  warning: false
  message: false
editor_options: 
  chunk_output_type: console
---

```{r}
library(tidyverse)
library(fs)
library(scales)
library(ggrepel)
library(ggtext)
library(ragg)
library(here)
library(flextable)
```


```{r}
third_grade_math_proficiency <- 
  read_rds(here("data/third_grade_math_proficiency.rds")) |> 
  select(academic_year, school, school_id, district, proficiency_level, number_of_students) |> 
  mutate(is_proficient = case_when(
    proficiency_level >= 3 ~ TRUE,
    .default = FALSE
  )) |> 
  group_by(academic_year, school, district, school_id, is_proficient) |> 
  summarize(number_of_students = sum(number_of_students, na.rm = TRUE)) |> 
  ungroup() |> 
  group_by(academic_year, school, district, school_id) |> 
  mutate(percent_proficient = number_of_students / sum(number_of_students, na.rm = TRUE)) |> 
  ungroup() |> 
  filter(is_proficient == TRUE) |> 
  select(academic_year, school, district, percent_proficient) |> 
  rename(year = academic_year) |> 
  mutate(percent_proficient = case_when(
    is.nan(percent_proficient) ~ NA,
    .default = percent_proficient
  )) |> 
  mutate(percent_proficient_formatted = percent(percent_proficient,
                                                accuracy = 1))
```

```{r}
theme_dk <- function() {
  
  theme_minimal(base_family = "IBM Plex Mono") +
    theme(axis.title = element_blank(),
          axis.text = element_text(color = "grey60",
                                   size = 10),
          plot.title = element_markdown(),
          plot.title.position = "plot",
          panel.grid = element_blank(),
          legend.position = "none")
  
}
```

{{< pagebreak >}}


## Chart

The chart below shows math proficiency for all PPS schools.

```{r}
#| fig-height: 5
#| fig-alt: A line chart showing math proficiency rates among all PPS schools in 2018-2019 and 2021-2022

top_growth_school <- 
  third_grade_math_proficiency |>
  filter(district == "Portland SD 1J") |> 
  group_by(school) |> 
  mutate(growth_from_previous_year = percent_proficient - lag(percent_proficient)) |> 
  ungroup() |> 
  drop_na(growth_from_previous_year) |>
  slice_max(order_by = growth_from_previous_year,
            n = 1) |> 
  pull(school)

third_grade_math_proficiency |>
  filter(district == "Portland SD 1J") |>
  mutate(highlight_school = case_when(
    school == top_growth_school ~ "Y",
    .default = "N"
  )) |> 
  mutate(percent_proficient_formatted = case_when(
    highlight_school == "Y" & year == "2021-2022" ~ str_glue("{percent_proficient_formatted} of students
                                                             were proficient
                                                             in {year}"),
    highlight_school == "Y" & year == "2018-2019" ~ percent_proficient_formatted,
    .default = NA
  )) |> 
  mutate(school = fct_relevel(school, top_growth_school, after = Inf)) |>
  ggplot(aes(x = year,
             y = percent_proficient,
             group = school,
             color = highlight_school,
             label = percent_proficient_formatted)) +
  geom_line() +
  geom_text_repel(hjust = 0,
                  lineheight = 0.9,
                  family = "IBM Plex Mono",
                  direction = "x") +
  scale_color_manual(values = c(
    "N" = "grey90",
    "Y" = "orange"
  )) +
  scale_y_continuous(labels = percent_format()) +
  scale_x_discrete(expand = expansion(mult = c(0.05, 0.5))) +
  annotate(geom = "text",
           x = 2.02,
           y = 0.6,
           hjust = 0,
           lineheight = 0.9,
           color = "grey70",
           family = "IBM Plex Mono",
           label = str_glue("Each grey line
                            represents one school")) +
  labs(title = str_glue("<b style='color: orange;'>{top_growth_school}</b> showed large growth<br>in math proficiency over the last two years")) +
  theme_dk()
```

{{< pagebreak >}}


# Table

```{r}
#| tbl-cap: Math proficiency among third graders in five Portland schools

flextable_data <- 
  read_rds(here("data/third_grade_math_proficiency_dichotomous.rds")) |> 
  filter(district == "Portland SD 1J") |> 
  filter(school %in% c("Abernethy Elementary School",
                       "Ainsworth Elementary School",
                       "Alameda Elementary School",
                       "Arleta Elementary School",
                       "Atkinson Elementary School")) |> 
  select(year, school, percent_proficient_formatted) |> 
  arrange(school) |> 
  pivot_wider(id_cols = school,
              names_from = year,
              values_from = percent_proficient_formatted)


flextable_data |> 
  flextable() |> 
  set_header_labels(school = "School") |> 
  align(j = 2, align = "center") |> 
  # width(j = 1, width = 10) |> 
  autofit() |> 
  set_caption("Math proficiency among third graders in five Portland schools")
```

And here is the dk.scss file I used:

/*-- scss:defaults --*/

$body-bg: red;
$body-color: white;
$font-size-root: 20px;

/*-- scss:rules --*/

h1 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

Your Turn

Apply a built-in HTML theme to your report.
Customize the built-in HTML theme.
Create your own theme using an .scss file and Sass variables.
If you know any CSS, customize your .scss file further.

You'll want to refer to this page on the Quarto website for information about customizing HTML documents.

Have any questions? Put them below and we will help you out!

You need to be signed-in to comment on this post. Login.

Course Content

44 Lessons

Downloading and Importing Data

Overview of Tidy Data

Tidy Data Rule #1: Every Column is a Variable

Tidy Data Rule #3: Every Cell is a Single Value

Tidy Data Rule #2: Every Row is an Observation

Changing Variable Types

Dealing with Missing Data

Advanced Summarizing

Binding Data Frames

Bring It All Together (Advanced Data Wrangling)

Best Practices in Data Visualization

Pipe Data into ggplot

Reorder Plots to Highlight Findings

Use Color to Highlight Findings

Add Descriptive Labels to Your Plots

Use Titles to Highlight Findings

Use Annotations to Explain

Create a Custom Theme

Customize Your Fonts

Try New Plot Types

Bring it All Together (Advanced Data Visualization)

Advanced Markdown

Advanced YAML and Code Chunk Options

Making Your Reports Shine: Word Edition

Making Your Reports Shine: PDF Edition

Making Your Reports Shine: HTML Edition

Publishing Your Work

Quarto Extensions

Parameterized Reporting, Part 1

Parameterized Reporting, Part 2

Parameterized Reporting, Part 3

Wrapping up Going Deeper with R