forked from the-graph-courses/rmc_life_satisfaction_webpage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
week_03_workshop_instructions.Rmd
133 lines (74 loc) · 5.11 KB
/
week_03_workshop_instructions.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
---
title: "Workshop 3 Instructions"
subtitle: "Interactive Plots and Web Publishing with RMarkdown"
author: "The GRAPH Courses Team"
output: prettydoc::html_pretty
---
# Introduction
## Objective
In this workshop, you will work on replicating the **Our World in Data** Page on the Self-reported life satisfaction data from the **Gallup World Poll**. Our World in Data creates gold-standard visualizations and data analysis. They provide a wealth of data on global trends and long-term changes.
The goal is to use R to replicate [this set of interactive tables and charts](https://ourworldindata.org/grapher/happiness-cantril-ladder){target="_blank"} from Our World in Data on life satisfaction. We will use Quarto to generate a HMTL and publish it to GitHub pages.
You can find an example of the HTML page you will create for today's workshop [here](https://the-graph-courses.github.io/rmc_life_satisfaction_webpage/).
## Page Structure
Note that the example page is divided into **4 major tabs**:
1. Table
2. Map
3. Chart
4. Advanced (Optional)
For today's workshop, you will work on creating the **Table** and **Chart** tabs of the page!
# Getting Started
Each individual will work on their own website page. This means that although you might work in a breakout room with other students, you will each perform the following steps:
1. Fork today's workshop repository to create a copy on your personal GitHub account: [https://github.com/the-graph-courses/rmc_life_satisfaction_webpage](https://github.com/the-graph-courses/rmc_life_satisfaction_webpage){target="_blank"}. This step should be completed in your web browser.
2. Clone the workshop repository to your local computer using GitHub desktop.
3. Open the project file (`rmc_03_workshop.Rproj`) in RStudio.
4. Open and knit `week_03_instructions.Rmd` . The output HTML should now appear in your Viewer pane.
5. In your Files pane, open the `index.qmd` file. This file contains the template for your assignment.
6. Replace every instance of `"WRITE_YOUR_CODE_HERE"` with your answers.
7. Refer to the instructions for guidance as you work through the assignment and fill out the **"Table"** and **"Simple Chart"** sections.
# Creating the webpage
## TASK 1: WRITE CODE TO CREATE TABLE
In the "🔢 Table" section, you will create a table similar to the one on the Our World in Data page. The table should have the following columns:
- Country
- `2011`
- `2023`
- Absolute change
- Relative change
To accomplish this, you should:
1. Filter the `cantril` data frame to just the years 2011 and 2023.
2. Use the `pivot_wider()` function to create the columns for 2011 and 2023.
**Hint:** You may need back-ticks around column names with spaces or which start with numbers.
3. Use `select()` to drop any columns from the `cantril` data that are not needed in the table.
4. Use the `mutate()` function to calculate the Absolute change and Relative change.
**Note**: Within `mutate()`, you should round your numbers to 2 decimal places using the `round()` function.
5. Then use `scales::percent()` to format the Relative change as a percentage.
6. Use the `reactable()` function to create and output the table.
You can then skip the "🌎 Map" section and go on to the next part.
## TASK 2: WRITE CODE TO CREATE CHART
In this "📈 Simple Chart" section, create a simple line chart of the *"Cantril Ladder"* score over time for a few countries, similar to the one on the Our World in Data page.
*Note that your chart will not have the ability to filter countries like the one on the Our World in Data page.*
To accomplish this, you should:
1. Filter the `cantril` data to just **4 to 8 countries** you want to highlight.
2. Use `ggplot()` to create a **line chart** of the *"Cantril Ladder"* score over time, with different colors for each country
3. Use `geom_line()` to create the lines
4. Use `scale_y_continuous()` to set the y-axis limits to 0 and 10.
5. Use `labs()` to create neat labels for the chart.
6. Use `theme_minimal()` to set the theme.
7. Finally, use `ggplotly()` to convert the ggplot chart to a `plotly` chart.
## TASK 3: ADD TABS
We want each section of webpage to be divided into 4 major tabs, as shown in the example webpage:
1. Table
2. Map
3. Chart
4. Advanced (Optional)
Use the `.{panel-tabset}` div in your qmd to produce these tabs. Refer to prework lesson on HTML documents and Quarto if you need help on this step. See this [video](https://thegraphcourses.org/courses/rmc-q2-2024/topics/html-documents-quarto/) around 8:30.
## TASK 4: RENDER YOUR `index.qmd` TO HTML
Render your qmd to a HTML webpage, and check to see that your tabs look correct!
## TASK 5: PUSH CHANGES TO GITHUB
Commit and push your newly rendered webpage to the remote repository.
## TASK 6: DEPLOY TO GITHUB PAGES
Change the settings of your repo to deploy the website to GitHub pages.
# Submission
- Submit the link to the deployed website as a **text file (.txt)**.
- **Make sure to test the link and double check that it works before submitting!**
- The link will probably look something like this:\
`https://YOUR-USERNAME.github.io/NAME_OF_YOUR_REPO/`.