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!
Course Content
44 Lessons
You need to be signed-in to comment on this post. Login.