Change style attributes of text elements
With CSS, it's easy to change the appearance of text in your report. In this exercise, you're going to change the font to a font with serifs, in accordance with the style of your plots. You're also going to try out a few other CSS selectors in order to change some colors and font sizes in your report. For example, the font of the R code elements is currently a little on the larger side, compared to the surrounding prose. You'll use CSS to reduce their size.
Here, all of your CSS should go inside the <style>
tags above the Summary. In the next exercise, you'll learn how to reference an external CSS file using the YAML header. If you need more help regarding the styling of text, you can refer to the Mozilla Developer reference.
This exercise is part of the course
Communicating with Data in the Tidyverse
Exercise instructions
- On line 17, change the
font-family
of all the text in your report (including headers, except R code chunks) to"Bookman", serif
. - On line 21, change the color of the body text to a slight grey (
#333333
). - On line 24, change the color of all links to
red
. - On line 27, reduce the font of the R code elements, which are wrapped in
pre
HTML tags, to10px
.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
{"my_document.Rmd":"---\ntitle: \"The reduction in weekly working hours in Europe\" \nsubtitle: \"Looking at the development between 1996 and 2006\"\nauthor: \"Insert your name here\"\noutput: \n html_document:\n theme: cosmo\n highlight: monochrome\n toc: true\n toc_float: false\n toc_depth: 4\n code_folding: hide\n---\n\n\n\n## Summary \n\nThe **International Labour Organization (ILO)** has many [data sets](http://www.ilo.org/global/statistics-and-databases/lang--en/index.htm) on working conditions. For example, one can look at how weekly working hours have been decreasing in many countries of the world, while monetary compensation has risen. In this report, *the reduction in weekly working hours* in European countries is analysed, and a comparison between 1996 and 2006 is made. All analysed countries have seen a decrease in weekly working hours since 1996 – some more than others.\n\n## Preparations \n\n```{r loading_packages, message = FALSE}\nlibrary(dplyr)\nlibrary(ggplot2)\nlibrary(forcats)\n```\n\n## Analysis\n\n### Data\n\nThe herein used data can be found in the [statistics database of the ILO](http://www.ilo.org/ilostat/faces/wcnav_defaultSelection;ILOSTATCOOKIE=ZOm2Lqrr-OIuzxNGn2_08bNe9AmHQ1kUA6FydqyZJeIudFLb2Yz5!1845546174?_afrLoop=32158017365146&_afrWindowMode=0&_afrWindowId=null#!%40%40%3F_afrWindowId%3Dnull%26_afrLoop%3D32158017365146%26_afrWindowMode%3D0%26_adf.ctrl-state%3D4cwaylvi8_4). For the purpose of this course, it has been slightly preprocessed.\n\n```{r loading_data}\nload(url(\"http://s3.amazonaws.com/assets.datacamp.com/production/course_5807/datasets/ilo_data.RData\"))\n```\n\nThe loaded data contains `r ilo_data %>% count()` rows. \n\n```{r generating_summary_statistics, echo = TRUE}\n# Some summary statistics\nilo_data %>%\n group_by(year) %>%\n summarize(mean_hourly_compensation = mean(hourly_compensation),\n mean_working_hours = mean(working_hours))\n\n```\n\nAs can be seen from the above table, the average weekly working hours of European countries have been descreasing since 1980.\n\n### Preprocessing\n\nThe data is now filtered so it only contains the years 1996 and 2006 – a good time range for comparison. \n\n```{r}\nilo_data <- ilo_data %>%\n filter(year == \"1996\" | year == \"2006\")\n \n# Reorder country factor levels\nilo_data <- ilo_data %>%\n # Arrange data frame first, so last is always 2006\n arrange(year) %>%\n # Use the fct_reorder function inside mutate to reorder countries by working hours in 2006\n mutate(country = fct_reorder(country,\n working_hours,\n last))\n``` \n\n### Results\n\nIn the following, a plot that shows the reduction of weekly working hours from 1996 to 2006 in each country is produced.\n\nFirst, a custom theme is defined.\n\n```{r defining_a_theme, echo = FALSE}\n# Better to define your own function than to always type the same stuff\ntheme_ilo <- function(){\n theme_minimal() +\n theme(\n text = element_text(family = \"Bookman\", color = \"gray25\"),\n plot.subtitle = element_text(size = 12),\n plot.caption = element_text(color = \"gray30\"),\n plot.background = element_rect(fill = \"gray95\"),\n plot.margin = unit(c(5, 10, 5, 10), units = \"mm\")\n )\n}\n``` \n\nThen, the plot is produced. \n\n```{r fig.height = 8, fig.width = 4.5, fig.align = \"center\"}\n# Compute temporary data set for optimal label placement\nmedian_working_hours <- ilo_data %>%\n group_by(country) %>%\n summarize(median_working_hours_per_country = median(working_hours)) %>%\n ungroup()\n\n# Have a look at the structure of this data set\nstr(median_working_hours)\n\n# Plot\nggplot(ilo_data) +\n geom_path(aes(x = working_hours, y = country),\n arrow = arrow(length = unit(1.5, \"mm\"), type = \"closed\")) +\n # Add labels for values (both 1996 and 2006)\n geom_text(\n aes(x = working_hours,\n y = country,\n label = round(working_hours, 1),\n hjust = ifelse(year == \"2006\", 1.4, -0.4)\n ),\n # Change the appearance of the text\n size = 3,\n family = \"Bookman\",\n color = \"gray25\"\n ) +\n # Add labels for country\n geom_text(data = median_working_hours,\n aes(y = country,\n x = median_working_hours_per_country,\n label = country),\n vjust = 2,\n family = \"Bookman\",\n color = \"gray25\") +\n # Add titles\n labs(\n title = \"People work less in 2006 compared to 1996\",\n subtitle = \"Working hours in European countries, development since 1996\",\n caption = \"Data source: ILO, 2017\"\n ) +\n # Apply your theme \n theme_ilo() +\n # Remove axes and grids\n theme(\n axis.ticks = element_blank(),\n axis.title = element_blank(),\n axis.text = element_blank(),\n panel.grid = element_blank(),\n # Also, let's reduce the font size of the subtitle\n plot.subtitle = element_text(size = 9)\n ) +\n # Reset coordinate system\n coord_cartesian(xlim = c(25, 41))\n```\n\n#### An interesting correlation\n\nThe results of another analysis are shown here, even though they cannot be reproduced with the data at hand.\n\n\n\nAs you can see, there's also an interesting relationship. The more people work, the less compensation they seem to receive, which seems kind of unfair. This is quite possibly related to other proxy variables like overall economic stability and performance of a country.\n\n\n"}