Skip to content

Commit

Permalink
update HTML instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabirodvel
sabirodvel committed Jul 24, 2024
1 parent dd4a3bb commit 473de73
Showing 1 changed file with 87 additions and 49 deletions.
136 changes: 87 additions & 49 deletions week_03_workshop_instructions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,34 +56,20 @@ <h4 class="author project-author">The GRAPH Courses Team</h4>


<section class="main-content">
<div id="introduction" class="section level2">
<h2>Introduction</h2>
<div id="introduction" class="section level1">
<h1>Introduction</h1>
<div id="objective" class="section level2">
<h2>Objective</h2>
<p>In this workshop, you will work on replicating the <strong>Our World
in Data</strong> Page on the Self-reported life satisfaction data from
the <strong>Gallup World Poll</strong>. Our World in Data creates
gold-standard visualizations and data analysis. They provide a wealth of
data on global trends and long-term changes.</p>
<p>The goal is to use R to replicate <a href="https://ourworldindata.org/grapher/happiness-cantril-ladder" target="_blank">this set of interactive tables and charts</a> from Our
World in Data on life satisfaction.</p>
World in Data on life satisfaction. We will use Quarto to generate a
HMTL and publish it to GitHub pages.</p>
<p>You can find an example of the HTML page you will create for today’s
workshop <a href="https://the-graph-courses.github.io/rmc_life_satisfaction_webpage/">here</a></p>
</div>
<div id="getting-started" class="section level2">
<h2>Getting Started</h2>
<p>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:</p>
<ol style="list-style-type: decimal">
<li>Fork, then clone today’s workshop repository to your local
computer:<br />
<a href="https://github.com/the-graph-courses/rmc_life_satisfaction_webpage" target="_blank">https://github.com/the-graph-courses/rmc_life_satisfaction_webpage</a>.</li>
<li>Open the <code>index.Rmd</code> file. This file contains the
skeleton for your assignment.</li>
<li>Follow the instructions on this file to complete the
<strong>“Table”</strong> and <strong>“Simple Chart”</strong> tabs.</li>
<li>Submit the link to your deployed website on the Workshop 3
Page!</li>
</ol>
workshop <a href="https://the-graph-courses.github.io/rmc_life_satisfaction_webpage/">here</a>.</p>
</div>
<div id="page-structure" class="section level2">
<h2>Page Structure</h2>
Expand All @@ -98,13 +84,39 @@ <h2>Page Structure</h2>
<p>For today’s workshop, you will work on creating the
<strong>Table</strong> and <strong>Chart</strong> tabs of the page!</p>
</div>
<div id="task-1-fork-and-clone-the-repo" class="section level2">
<h2>TASK 1: FORK AND CLONE THE REPO</h2>
</div>
<div id="task-2-create-table" class="section level2">
<h2>TASK 2: CREATE TABLE</h2>
<p>In this tab, you will create a table similar to the one on the Our
World in Data page. The table should have the following columns:</p>
<div id="getting-started" class="section level1">
<h1>Getting Started</h1>
<p>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:</p>
<ol style="list-style-type: decimal">
<li>Fork today’s workshop repository to create a copy on your personal
GitHub account: <a href="https://github.com/the-graph-courses/rmc_life_satisfaction_webpage" target="_blank">https://github.com/the-graph-courses/rmc_life_satisfaction_webpage</a>.
This step should be completed in your web browser.</li>
<li>Clone the workshop repository to your local computer using GitHub
desktop.</li>
<li>Open the project file (<code>rmc_03_workshop.Rproj</code>) in
RStudio.</li>
<li>Open and knit <code>week_03_instructions.Rmd</code> . The output
HTML should now appear in your Viewer pane.</li>
<li>In your Files pane, navigate to the “scripts” folder and open the
<code>index.qmd</code> file. This file contains the template for your
assignment.</li>
<li>Replace every instance of <code>&quot;WRITE_YOUR_CODE_HERE&quot;</code> with
your answers.</li>
<li>Refer to the instructions for guidance as you work through the
assignment and fill out the <strong>“Table”</strong> and <strong>“Simple
Chart”</strong> sections.</li>
</ol>
</div>
<div id="creating-the-webpage" class="section level1">
<h1>Creating the webpage</h1>
<div id="task-1-write-code-to-create-table" class="section level2">
<h2>TASK 1: WRITE CODE TO CREATE TABLE</h2>
<p>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:</p>
<ul>
<li><p>Country</p></li>
<li><p><code>2011</code></p></li>
Expand All @@ -114,29 +126,32 @@ <h2>TASK 2: CREATE TABLE</h2>
</ul>
<p>To accomplish this, you should:</p>
<ol style="list-style-type: decimal">
<li><p>Use <code>select</code> to drop the Code column from the
<code>cantril</code> data as it is not needed in the table.</p></li>
<li><p>Filter the <code>cantril</code> data frame to just the years 2011
and 2023.</p></li>
<li><p>Use the <code>pivot_wider</code> function to create the columns
<li><p>Use the <code>pivot_wider()</code> function to create the columns
for 2011 and 2023.</p>
<p><strong>Hint:</strong> You may need back-ticks around column names
with spaces or which start with numbers.</p></li>
<li><p>Use the <code>mutate</code> function to calculate the Absolute
change and Relative change.</p></li>
<li><p>Also with <code>mutate</code>, you should round your numbers to
appropriate decimal places.</p></li>
<li><p>Then use scales::percent to format the Relative change as a
percentage.</p></li>
<li><p>Use the <code>reactable</code> function to create and output the
table.</p></li>
<li><p>Use <code>select()</code> to drop any columns from the
<code>cantril</code> data that are not needed in the table.</p></li>
<li><p>Use the <code>mutate()</code> function to calculate the Absolute
change and Relative change.</p>
<p><strong>Note</strong>: Within <code>mutate()</code>, you should round
your numbers to 2 decimal places using the <code>round()</code>
function.</p></li>
<li><p>Then use <code>scales::percent()</code> to format the Relative
change as a percentage.</p></li>
<li><p>Use the <code>reactable()</code> function to create and output
the table.</p></li>
</ol>
<p>You can then skip the “🌎 Map” section and go on to the next
part.</p>
</div>
<div id="task-3-create-chart" class="section level2">
<h2>TASK 3: CREATE CHART</h2>
<p>In this tab, create a simple line chart of the <em>“Cantril
Ladder”</em> score over time for a few countries, similar to the one on
the Our World in Data page.</p>
<div id="task-2-write-code-to-create-chart" class="section level2">
<h2>TASK 2: WRITE CODE TO CREATE CHART</h2>
<p>In this “📈 Simple Chart” section, create a simple line chart of the
<em>“Cantril Ladder”</em> score over time for a few countries, similar
to the one on the Our World in Data page.</p>
<p><em>Note that your chart will not have the ability to filter
countries like the one on the Our World in Data page.</em></p>
<p>To accomplish this, you should:</p>
Expand All @@ -149,23 +164,46 @@ <h2>TASK 3: CREATE CHART</h2>
<li><p>Use <code>geom_line()</code> to create the lines</p></li>
<li><p>Use <code>scale_y_continuous()</code> to set the y-axis limits to
0 and 10.</p></li>
<li><p>Use labs to create neat labels for the chart.</p></li>
<li><p>Use theme_minimal to set the theme.</p></li>
<li><p>Use <code>labs()</code> to create neat labels for the
chart.</p></li>
<li><p>Use <code>theme_minimal()</code> to set the theme.</p></li>
<li><p>Finally, use <code>ggplotly()</code> to convert the ggplot chart
to a <code>plotly</code> chart.</p></li>
</ol>
</div>
<div id="task-4-knit-your-rmd-into-html" class="section level2">
<h2>TASK 4: KNIT YOUR RMD INTO HTML</h2>
<div id="task-3-add-tabs" class="section level2">
<h2>TASK 3: ADD TABS</h2>
<p>We want each section of webpage to be divided into 4 major tabs, as
shown in the example webpage:</p>
<ol style="list-style-type: decimal">
<li><p>Table</p></li>
<li><p>Map</p></li>
<li><p>Chart</p></li>
<li><p>Advanced (Optional)</p></li>
</ol>
<p>Use the <code>.{panel-tabset}</code> 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 <a href="https://thegraphcourses.org/courses/rmc-q2-2024/topics/html-documents-quarto/">video</a>
around 8:30.</p>
</div>
<div id="task-4-render-your-index.qmd-to-html" class="section level2">
<h2>TASK 4: RENDER YOUR <code>index.qmd</code> TO HTML</h2>
<p>Render your qmd to a HTML webpage, and check to see that your tabs
look correct!</p>
</div>
<div id="task-5-push-changes-to-github" class="section level2">
<h2>TASK 5: PUSH CHANGES TO GITHUB</h2>
<p>Commit and push your newly rendered webpage to the remote
repository.</p>
</div>
<div id="task-6-deploy-to-github-pages" class="section level2">
<h2>TASK 6: DEPLOY TO GITHUB PAGES</h2>
<p>Change the settings of your repo to deploy the website to GitHub
pages.</p>
</div>
</div>
<div id="submission" class="section level2">
<h2>Submission</h2>
<div id="submission" class="section level1">
<h1>Submission</h1>
<ul>
<li>Submit the link to the deployed website as a <strong>text file
(.txt)</strong>.</li>
Expand Down

0 comments on commit 473de73

Please sign in to comment.