From b73dbf70a00fbb946c3cece7ba2dc164f03f1123 Mon Sep 17 00:00:00 2001 From: Giuliet Kibler Date: Fri, 15 Nov 2024 11:24:31 -0800 Subject: [PATCH] Updated the Nav Bar --- ...6B341-output.json => 0195A27C-output.json} | 12 +----- .Rproj.user/C95B2B66/sources/prop/94E4A7EF | 11 +++++ .Rproj.user/C95B2B66/sources/prop/B967D013 | 2 +- .Rproj.user/C95B2B66/sources/prop/D51E2546 | 2 +- .Rproj.user/C95B2B66/sources/prop/INDEX | 1 + .../session-fed852d2/8587408B-contents | 7 +++ .../sources/session-fed852d2/9D5A61CE | 8 ++-- .../session-fed852d2/9D5A61CE-contents | 2 +- .../sources/session-fed852d2/A9963FE8 | 8 ++-- .../session-fed852d2/A9963FE8-contents | 2 + .../notebooks/0919B127-about/1/s/chunks.json | 1 + .Rproj.user/shared/notebooks/paths | 1 + .../_freeze/index/execute-results/html.json | 4 +- .quarto/idx/about.qmd.json | 2 +- .quarto/idx/index.qmd.json | 2 +- .quarto/preview/lock | 2 +- .quarto/xref/9ffdf0ea | 2 +- _quarto.yml | 2 +- about.qmd | 4 +- docs/about.html | 43 +------------------ docs/index.html | 11 ++--- docs/search.json | 2 +- index.qmd | 2 + 23 files changed, 55 insertions(+), 78 deletions(-) rename .Rproj.user/C95B2B66/jobs/{A236B341-output.json => 0195A27C-output.json} (58%) create mode 100644 .Rproj.user/C95B2B66/sources/prop/94E4A7EF create mode 100644 .Rproj.user/C95B2B66/sources/session-fed852d2/8587408B-contents create mode 100644 .Rproj.user/shared/notebooks/0919B127-about/1/s/chunks.json diff --git a/.Rproj.user/C95B2B66/jobs/A236B341-output.json b/.Rproj.user/C95B2B66/jobs/0195A27C-output.json similarity index 58% rename from .Rproj.user/C95B2B66/jobs/A236B341-output.json rename to .Rproj.user/C95B2B66/jobs/0195A27C-output.json index 0beb333..c85238e 100644 --- a/.Rproj.user/C95B2B66/jobs/A236B341-output.json +++ b/.Rproj.user/C95B2B66/jobs/0195A27C-output.json @@ -1,13 +1,4 @@ [1,"==> quarto preview index.qmd --to html --no-watch-inputs --no-browse\n\n"] -[1,"\u001B[31m\n\nprocessing file: index.qmd\n\u001B[39m"] -[1,"\r | \r | | 0%\r | \r |.......... | 20% \r | \r |..................... | 40% [setup] "] -[1,"\r | \r |............................... | 60% \r | \r |.......................................... | 80% [unnamed-chunk-1]"] -[1,"\r | \r |....................................................| 100% \r \n\u001B[31moutput file: index.knit.md\n\n\u001B[39m"] -[1,"\u001B[1mpandoc \u001B[22m\n to: html\n output-file: index.html\n standalone: true\n title-prefix: Website\n section-divs: true\n html-math-method: mathjax\n wrap: none\n default-image-extension: png\n css:\n - styles.css\n toc: true\n \n\u001B[1mmetadata\u001B[22m\n document-css: false\n link-citations: true\n date-format: long\n lang: en\n editor: visual\n theme: cosmo\n title: Website\n author: Giuliet Kibler\n description: This is an example for the PM 566\n \n"] -[1,"Output created: docs/index.html\n\n\u001B[1m\u001B[34mTerminating existing preview server....\u001B[39m\u001B[22m\u001B[1m\u001B[34mDONE\n\u001B[39m\u001B[22m\n\u001B[1m\u001B[34mPreparing to preview\u001B[39m\u001B[22m\n"] -[1,"\n\u001B[32mWatching files for changes\u001B[39m\n\u001B[32mBrowse at \u001B[39m\u001B[4m\u001B[32mhttp://localhost:6496/\u001B[39m\u001B[24m\n"] -[1,"\u001B[32mGET: /\u001B[39m\n"] -[1,"\u001B[31m /img/github_pages_publish.png (404: Not Found)\u001B[39m\n"] [1,"\u001B[31m\n\nprocessing file: index.qmd\n\u001B[39m\r | \r | | 0%\r | \r |.... | 8% \r | \r |........ | 15% [setup] "] [1,"\r | \r |............ | 23% \r | \r |................ | 31% [unnamed-chunk-1]"] [1,"\r | \r |.................... | 38% \r | \r |........................ | 46% [load-data] "] @@ -16,5 +7,6 @@ [1,"\r | \r |............................................ | 85% \r | \r |................................................ | 92% [p2] "] [1,"\r | \r |....................................................| 100% \r \n\u001B[31moutput file: index.knit.md\n\n\u001B[39m"] [1,"\u001B[1mpandoc \u001B[22m\n to: html\n output-file: index.html\n standalone: true\n title-prefix: Website\n section-divs: true\n html-math-method: mathjax\n wrap: none\n default-image-extension: png\n css:\n - styles.css\n toc: true\n \n\u001B[1mmetadata\u001B[22m\n document-css: false\n link-citations: true\n date-format: long\n lang: en\n editor: visual\n theme: cosmo\n title: Website\n author: Giuliet Kibler\n description: This is a website example for the PM 566 Lab 12\n \n"] -[1,"Output created: docs/index.html\n\n\u001B[32mWatching files for changes\u001B[39m\n"] +[1,"Output created: docs/index.html\n\n\u001B[1m\u001B[34mPreparing to preview\u001B[39m\u001B[22m\n"] +[1,"\n\u001B[32mWatching files for changes\u001B[39m\n\u001B[32mBrowse at \u001B[39m\u001B[4m\u001B[32mhttp://localhost:3338/\u001B[39m\u001B[24m\n"] [1,"\u001B[32mGET: /\u001B[39m\n"] diff --git a/.Rproj.user/C95B2B66/sources/prop/94E4A7EF b/.Rproj.user/C95B2B66/sources/prop/94E4A7EF new file mode 100644 index 0000000..3b3967f --- /dev/null +++ b/.Rproj.user/C95B2B66/sources/prop/94E4A7EF @@ -0,0 +1,11 @@ +{ + "rmdVisualMode": "true", + "rmdVisualWrapConfigured": "true", + "source_window_id": "", + "Source": "Source", + "docOutlineVisible": "1", + "rmdVisualCollapsedChunks": "", + "rmdVisualModeLocation": "58:0", + "cursorPosition": "0,0", + "scrollLine": "0" +} \ No newline at end of file diff --git a/.Rproj.user/C95B2B66/sources/prop/B967D013 b/.Rproj.user/C95B2B66/sources/prop/B967D013 index 1ba0a86..08291b0 100644 --- a/.Rproj.user/C95B2B66/sources/prop/B967D013 +++ b/.Rproj.user/C95B2B66/sources/prop/B967D013 @@ -5,7 +5,7 @@ "Source": "Source", "docOutlineVisible": "1", "rmdVisualCollapsedChunks": "", - "rmdVisualModeLocation": "14473:7748.5", + "rmdVisualModeLocation": "16846:9686", "cursorPosition": "530,0", "scrollLine": "421", "last_setup_crc32": "fed852d2bb269e18" diff --git a/.Rproj.user/C95B2B66/sources/prop/D51E2546 b/.Rproj.user/C95B2B66/sources/prop/D51E2546 index 3a2cf48..6e2ebed 100644 --- a/.Rproj.user/C95B2B66/sources/prop/D51E2546 +++ b/.Rproj.user/C95B2B66/sources/prop/D51E2546 @@ -1,6 +1,6 @@ { "source_window_id": "", "Source": "Source", - "cursorPosition": "20,0", + "cursorPosition": "9,20", "scrollLine": "0" } \ No newline at end of file diff --git a/.Rproj.user/C95B2B66/sources/prop/INDEX b/.Rproj.user/C95B2B66/sources/prop/INDEX index c087424..c5207ef 100644 --- a/.Rproj.user/C95B2B66/sources/prop/INDEX +++ b/.Rproj.user/C95B2B66/sources/prop/INDEX @@ -1,4 +1,5 @@ ~%2FDesktop%2FPM566labs%2FAssignment%204.qmd="4076374A" ~%2FDesktop%2FWebsite%2F_quarto.yml="D51E2546" +~%2FDesktop%2FWebsite%2Fabout.qmd="94E4A7EF" ~%2FDesktop%2FWebsite%2Findex.qmd="B967D013" ~%2FDesktop%2FWebsite%2Fstyles.css="6BE3395E" diff --git a/.Rproj.user/C95B2B66/sources/session-fed852d2/8587408B-contents b/.Rproj.user/C95B2B66/sources/session-fed852d2/8587408B-contents new file mode 100644 index 0000000..ce1972a --- /dev/null +++ b/.Rproj.user/C95B2B66/sources/session-fed852d2/8587408B-contents @@ -0,0 +1,7 @@ +--- +title: "About" +--- + +About this site + +This is PM 566 Lab 12's website diff --git a/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE b/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE index fc6a485..a9025ab 100644 --- a/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE +++ b/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE @@ -3,7 +3,7 @@ "path": "~/Desktop/Website/_quarto.yml", "project_path": "_quarto.yml", "type": "yaml", - "hash": "0", + "hash": "1712238605", "contents": "", "dirty": false, "created": 1731693434110.0, @@ -12,15 +12,15 @@ "properties": { "source_window_id": "", "Source": "Source", - "cursorPosition": "20,0", + "cursorPosition": "9,20", "scrollLine": "0" }, "folds": "", - "lastKnownWriteTime": 1731694939, + "lastKnownWriteTime": 1731698578, "encoding": "UTF-8", "collab_server": "", "source_window": "", - "last_content_update": 1731694939810, + "last_content_update": 1731698578327, "read_only": false, "read_only_alternatives": [] } \ No newline at end of file diff --git a/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE-contents b/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE-contents index 8b86cf7..7cd30b5 100644 --- a/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE-contents +++ b/.Rproj.user/C95B2B66/sources/session-fed852d2/9D5A61CE-contents @@ -7,7 +7,7 @@ website: navbar: left: - href: index.qmd - text: Home + text: Lab 12 - about.qmd format: diff --git a/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8 b/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8 index ef285ae..5665530 100644 --- a/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8 +++ b/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8 @@ -3,7 +3,7 @@ "path": "~/Desktop/Website/index.qmd", "project_path": "index.qmd", "type": "quarto_markdown", - "hash": "3911104870", + "hash": "261556291", "contents": "", "dirty": false, "created": 1731693443810.0, @@ -16,17 +16,17 @@ "Source": "Source", "docOutlineVisible": "1", "rmdVisualCollapsedChunks": "", - "rmdVisualModeLocation": "14473:7748.5", + "rmdVisualModeLocation": "16846:9686", "cursorPosition": "530,0", "scrollLine": "421", "last_setup_crc32": "fed852d2bb269e18" }, "folds": "", - "lastKnownWriteTime": 1731698116, + "lastKnownWriteTime": 1731698650, "encoding": "UTF-8", "collab_server": "", "source_window": "", - "last_content_update": 1731698116937, + "last_content_update": 1731698650286, "read_only": false, "read_only_alternatives": [] } \ No newline at end of file diff --git a/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8-contents b/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8-contents index e389580..e1bc2e5 100644 --- a/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8-contents +++ b/.Rproj.user/C95B2B66/sources/session-fed852d2/A9963FE8-contents @@ -513,6 +513,8 @@ Then please submit your lab by adding a link to this week's lab issue: https://g Note that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`. +I will do this seperately. +

# References diff --git a/.Rproj.user/shared/notebooks/0919B127-about/1/s/chunks.json b/.Rproj.user/shared/notebooks/0919B127-about/1/s/chunks.json new file mode 100644 index 0000000..ab42bf1 --- /dev/null +++ b/.Rproj.user/shared/notebooks/0919B127-about/1/s/chunks.json @@ -0,0 +1 @@ +{"chunk_definitions":[],"doc_write_time":1731698564} \ No newline at end of file diff --git a/.Rproj.user/shared/notebooks/paths b/.Rproj.user/shared/notebooks/paths index 703645d..519d658 100644 --- a/.Rproj.user/shared/notebooks/paths +++ b/.Rproj.user/shared/notebooks/paths @@ -1,3 +1,4 @@ /Users/giulietkibler/Desktop/PM566labs/Assignment 4.qmd="CF5A48D9" +/Users/giulietkibler/Desktop/Website/about.qmd="0919B127" /Users/giulietkibler/Desktop/Website/index.qmd="D1B09BAC" /Users/giulietkibler/Desktop/Website/styles.css="DBAB81DC" diff --git a/.quarto/_freeze/index/execute-results/html.json b/.quarto/_freeze/index/execute-results/html.json index 31fb8af..653395f 100644 --- a/.quarto/_freeze/index/execute-results/html.json +++ b/.quarto/_freeze/index/execute-results/html.json @@ -1,8 +1,8 @@ { - "hash": "3f074b323c5d71829efe68ded7c51a08", + "hash": "65285b66aa879dac10cd977afbc5f263", "result": { "engine": "knitr", - "markdown": "---\ntitle: \"Website\"\nauthor: \"Giuliet Kibler\"\ndescription: \"This is a website example for the PM 566 Lab 12\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\n::: {.cell}\n\n:::\n\n::: {.cell layout-align=\"center\"}\n\n:::\n\n\n\n\n
\n\n# Objectives\n\nThe objective of today's lab is to create a project website using the **rmarkdown** package and deploy it using GitHub pages. We will include interactive visualizations on the website.\n\nFor this lab, we have created some initial content for you to work with as an example. The code is found at: https://github.com/ksiegmund/PM566-lab12-example.\n\nYour objective will be to create your own *project* website using this content as a reference.\n\nNote that if you want to create a *personal* website using the **rmarkdown** package hosted on GitHub Pages, you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n
\n\n------------------------------------------------------------------------\n\n# Workflow Overview\n\nBuilding websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.\n\nThere are two main steps for creating a personal website that will be hosted on GitHub:\n\nI. Local setup
II. GitHub setup\n\n
\n\n------------------------------------------------------------------------\n\n
\n\n# I. Local Setup\n\nThe basic workflow is as follows:\n\n1. Create a project directory and an R Project file (`.Rproj`)\n2. Create a `_site.yml` and `index.Rmd` file in your new directory\n3. Add additional page content if desired through other `.Rmd` files\n4. Edit these files to create content and manage layout (and knit to view)\n5. Add a style sheet (CSS) if desired\n6. Build website\n - Build tab \\> Build Website or\n - in the console: `rmarkdown::render_site()` This creates the output: `index.html`\n\n
\n\n## Step 0: Look at existing content\n\nClone the website repository at https://github.com/ksiegmund/PM566-lab12-example with example project website content into a NEW directory for the lab, e.g. `\"week12-lab\"`.\n\n**Note**: we are not initializing this as a git repository, we will do that in Step 1. We are just downloading the contents.\n\n``` shell\nmkdir ~/week12-lab\ngit clone https://github.com/ksiegmund/PM566-lab12-example\n```\n\nThen open the file `PM566-lab12-example.Rproj`. For MacOS you can do that through command line using\n\n``` shell\nopen PM566-lab12-example.Rproj\n```\n\nOtherwise, you can manually open the file from your directory.\n\nOnce you have it opened:\n\n- Check out the contents of this repository. What files does it contain?\n\n- Take a few moments to compare the contents of this repository to the final website at https://ksiegmund.github.io/PM566-lab12-example\n\n
\n\n## Step 1: Create project website directory\n\nCreate and go to the directory you want to create your website in, e.g. `\"PM566-final-project\"`, and initialize git.\n\nIn command line:\n\n``` shell\nmkdir ~/PM566-final-project\ncd ~/PM566-final-project\ngit init\n```\n\n
\n\n## Step 2: Create and add essential files *from scratch*\n\nRecall from lecture that the minimum requirements for an R Markdown website are:\n\n- `index.Rmd`: contains the content for the website homepage\n- `_site.yml`: contains metadata for the website\n\nCreate these essential files, as well as a `README.md`, add all to git queue, and commit to your website repository.\n\n**Note**: You can use the `echo` command in command line to initialize the files (in MacOS you can also use the `touch` command):\n\n``` shell\necho My PM566 Final Project Website > README.md\necho > _site.yml\necho > index.Rmd\ngit add --all\ngit commit -m \"initalizing repository\"\n```\n\n
\n\n## Step 3: Create `.Rproj` file\n\nCreate an R Project file using RStudio IDE:\n\nGo to RStudio IDE \\> File \\> New Project \\> Existing Directory\n\nThe R Project is useful because RStudio will recognize your project as a website, and provide appropriate build tools.\n\n**Note**: After creating the R Project and initial files, you *may* need to close the project and reopen it before R will recognize it as a website and show the appropriate build tools.\n\n
\n\n## Step 4: Edit the content\n\n### Step 4.1: Edit the YAML file\n\nEdit the `_site.yml` file to include the metadata, layout, and theme you want for your website.\n\nFirst let's take a look at a basic example of a `_site.yml` file for a website with one page:\n\n``` markdown\nname: \"my-website\"\nnavbar:\n title: \"My Website\"\n left:\n - text: \"Home\"\n href: index.html\noutput:\n html_document:\n theme: cosmo\n```\n\nThis is the minimum you need to include in your `_site.yml`.\n\nNow let's take a look at the `_site.yml` from the website repository you downloaded into `\"week12-lab\"`. It looks like this:\n\n``` markdown\nname: \"my-website\"\noutput_dir: \".\"\nnavbar:\n title: \"PM566 Final Project\"\n left:\n - text: \"Home\"\n href: index.html\n - text: \"Lab 12\"\n href: 12-lab.html\n right:\n - icon: fa-github fa-lg\n href: https://github.com/USCbiostats/PM566\n - text: \"PM566 Home\"\n href: https://uscbiostats.github.io/PM566/\noutput:\n html_document:\n theme: cosmo\n include:\n after_body: footer.html\n css: styles.css\n```\n\nInspecting this, and the output on the completed website at https://ksiegmund.github.io/PM566-lab12-example, how do you add links to internal webpages? How do you add links to external websites? How do you add icons?\n\nInternal webpage links are in the left section. External websites are in the right section. Aded icons are in the output section.\n\n**Note**: recall that the `output_dir` field indicates which directory to copy site content into (`\"_site\"` is the default if none is specified). It can be `\".\"` to keep all content within the root website directory alongside the source code.\n\n**Note**: Preview themes [here](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.) and play around with different options. Themes are easy to change even after you have added content.\n\nNow your task is to create a YAML for your website that includes only the essential components for your website. Either copy the content of the simple `_site.yml` into your own `_site.yml` file in your website directory `PM566-final-project`, or replicate it yourself line by line.\n\n**Note**: YAML language is very picky so make sure your content is formatted appropriately. If you are not sure, either look up the appropriate text in the [reference guide](https://bookdown.org/yihui/rmarkdown/), search google, or copy from a website you know works!\n\n
\n\n### Step 4.2: Edit internal `.Rmd` files\n\nEdit and create `.Rmd` files that contain your website content, which will produce the html pages of your website when you knit them.\n\nFor example, the `index.Rmd` could look like this:\n\n``` markdown\n---\ntitle: \"PM566 Final Project\"\nauthor: \"Your Name\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\nThis is my PM566 Final Project website.\n```\n\n
\n\nThe `toc` specifies whether there is a table of contents, and `toc_float` provides the option to float the table of contents to the left of the main document content. The floating table of contents will always be visible even when the document is scrolled. There are other options for how to display the `toc` in R Markdown HTML output which you can read about [here](https://bookdown.org/yihui/rmarkdown/html-document.html#table-of-contents).\n\n
\n\nAfter you are done with your `index.Rmd` file, knit it to check the output. Either click the `Knit` option in the toolbar or in the console type `rmarkdown::render_site(\"index.Rmd\")`. This will render the output into a file `index.html` which you can check out by opening the file in your directory:\n\n
\n\n## Step 5: Build website\n\nNow we have the content and layout setup, we can build the website! This can be done in two ways:\n\n- Build tab \\> Build Website\n\n in the console: `rmarkdown::render_site()`\n\n**rmarkdown** has created all the additional files you need for your website. Check them out in your directory. Most importantly, the `index.html` file provides a preview of the site, which you can look at in a browser as above:\n\n**Note**: As you make changes, you should re-render (or equivalently, re-build) the website. Recall from lecture that RStudio supports \"live preview\" of changes that you make to supporting files within your website (e.g., CSS, JavaScript, `.Rmd` partials, R scripts, and YAML config files), but this only rebuilds the active page. So once you are happy with the results of rendering you should make sure to rebuild the entire site using `rmarkdown::render_site()` to ensure that all pages inherit your changes.\n\n
\n\n### Styles\n\nYou will see that your R Markdown website comes with a style class, specified by your chosen theme specified in your YAML (or the default theme if not chosen). You can also modify your site using CSS style sheets. As discussed in lecture, styles can be modified in 3 ways: in-line with HTML, placing a style section in your HTML document, defining the CSS in an external file that is then referenced as a link in your HTML. Feel free to play around with the external style sheet `styles.css` that came with the example website.\n\n
\n\n### Commit!\n\nDon't be afraid of commitment! Add your changes as you go along.\n\n``` shell\ncd ~/PM566-final-project\ngit add --all\ngit commit -m \"Rendered website\"\n```\n\n------------------------------------------------------------------------\n\n# II. GitHub setup\n\n## Overview\n\n1. Create project on GitHub\n2. Initialize project on Git\n3. Push project files to the GitHub repository for your project\n4. Deploy the website by enabling GitHub pages for the repository\n\n
\n\n## Step 6: Create project on GitHub\n\nCreate an online (remote) repository for your project using GitHub
\n\n## Step 7: Initialize project with git\n\nIn command line:\n\nAdd the remote using `git remote add`\n\n``` shell\ngit remote add origin https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git\n```\n\nOptionally, use the commands `git status` and `git remote -v` to check out the status.\n\n
\n\n## Step 8: Push website content to remote\n\nPush the changes to the remote using `git push`\n\n``` shell\ngit push -u origin main\n```\n\n**Note** In 2020 Github changed its default repository name from \"master\" to \"main\", so if you're creating a new repository after 2020, it will named \"main\".\n\n
\n\n## Step 9: Deploy the website\n\nEnable GitHub pages for the repository by going to the repository's Settings \\> GitHub Pages. For the branch option (left button), you'll switch from the selected \"none\" to the \"main branch\" folder. For the folder option (right button) (/(root) vs. /docs), you'll choose /(root) if you included the parameter `output_dir: \".\"` in your YAML. Otherwise, the output directory will default to the /docs folder, and you should select that as the source folder. Then hit Save:\n\n
\n\n## Step 10: Preview content!\n\nIt's live! Go to the website at www.YOUR_GH_NAME.github.io/YOUR_PROJECT_NAME/ (the website should appear to you when you click the appropriate setting in GitHub Pages)\n\nWOO HOO!\n\n
\n\n------------------------------------------------------------------------\n\n# III. Add interactive visuals\n\nYour task here is to create 2 interactive visuals, using **plotly**, **leaflet**, **DT**, or anything else you have explored, and post them on your website at `index.Rmd`.\n\n
\n\n## Step 11: Source processing code\n\nFirst you can source any necessary code, meaning run it. For example, let's use the COVID-19 data from the NYT we explored in week 11. In the example repository you downloaded into `\"week12-lab\"`, we have provided the code `process_covid_data.R` which goes through the first steps we carried out in the lab of downloading and processing the data. To source this code, in your `index.Rmd` file, include a code chunk with the `source(process_COVID_data.R)` command:\n\n\n\n\n::: {.cell layout-align=\"center\"}\n\n```{.r .code-r .cell-code}\nsource(\"process_COVID_data.R\")\n```\n:::\n\n\n\n\n
\n\n**Note**: Make sure that you include the following libraries and formatting code at the beginning of your `index.Rmd` file, which will allow you to run the `source(\"process_COVID_data.R\")` code:\n\n```` markdown\n```{r setup, message=FALSE, echo=FALSE, warning=FALSE}\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n```\n````\n\nYou may also want to include some code chunk options for your whole document using `opts_chunk$set()`, for example the options we specified in the `12-lab.Rmd` file:\n\n```` markdown\n```\n# Initialize code chunk options\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\")\n```\n````\n\n## Step 12: Add code for visuals\n\nThen you can add some code chunks to create the interactive visuals you want to include. I will add some code to create a couple of the **plotly** figures we created in lab. I am naming each plot but not outputting them here, because I will want to do that in independent code chunks as we will see in the next step.\n\n**Note**: Code chunks do not require names, but it can be useful to name them because they can be referenced elsewhere in the document. Note that if you do name them (like this one: `plot1`), you will need to be sure to give each an independent name because code chunks cannot share the same name.\n\n\n\n\n::: {.cell layout-align=\"center\"}\n\n```{.r .code-r-small .cell-code}\nsource(\"process_COVID_data.R\")\np1_scatter <- cv_states_today |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n\n# filter out \"District of Columbia\"\ncv_states_today_scatter <- cv_states_today |> filter(state!=\"District of Columbia\")\n\np2_scatter <- cv_states_today_scatter |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n```\n:::\n\n\n\n\n
\n\nNow, create 2 figures of your own, either using the code above, the code from last week's lab, or creating new figures based on the data created by the `process_COVID_data.R` code.\n\n

\n\n## Step 13: Display figures in tabs {.tabset}\n\nCreate tabs to display each figure. We do that using the following R Markdown language using the `{.tabset}` option:\n\n```` markdown\n\n## Showcasing plots {.tabset}\n\n### Tab 1\n\n```{r echo=FALSE}\np1_scatter\n```\n\n### Tab 2\n\n```{r echo=FALSE}\np2_scatter\n```\n\n## {-}\n````\n\nThe `{-}` closes the tabs. Tabs work at multiple levels of hierarchy: ##, ###, and ####.\n\n
\n\nThe output will look like this:\n\n### Figure 1\n\n\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n\n### Figure 2\n\n\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n\n## {.unnumbered}\n\n
\n\nKnit the page `index.Rmd` to check the output. It may take a bit longer now that we're also processing the data from the NYT. (Recall from lecture we can do that once per session by inputting the global option `opts_chunk$set(cache=TRUE)`).\n\n
\n\n## Step 14: Update website content\n\nYou've now made some edits to your website. To get the updates onto the live webpage, you need to re-render the site to create the HTML output from your `.Rmd` file edits, and push the updates to the remote GitHub repository:\n\n- In the R console: `rmarkdown::render_site()`\n\n- Preview contents by looking at the `index.html` file in a browser\n\n- Add and push changes to remote from your website project repository locally (e.g. `PM566-final-project`):\n\n``` shell\ngit add --all\ngit commit -m \"interactive visuals\"\ngit push\n```\n\nPreview your changes online at your website!\n\n**Note**: It may take up to 10 minutes for the content to render.\n\n
\n\n# Turn in your lab\n\nAdd the online link to your website in your `README.md` file, e.g.\n\n``` markdown\nThis is my PM566 lab12 website home. The website is online at https://ksiegmund.github.io/PM566-lab12-example/12-lab.html.\n```\n\nThen please submit your lab by adding a link to this week's lab issue: https://github.com/USCbiostats/PM566/issues/65 in your final commit.\n\n
\n\n# Extra credit: Creating a personal website\n\nNote that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n

\n\n# References\n\nUseful references for creating websites can be found here:\n\n- [R Markdown reference guide](https://bookdown.org/yihui/rmarkdown/)\n- [R Markdown basic website themes](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.)\n\nThis lab was informed by:\n\n- [Chapter 10.5: Websites in rmarkdown’s site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html) in [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/), Yihui Xie, J. J. Allaire, Garrett Grolemund\n- [Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor\n\n

\n", + "markdown": "---\ntitle: \"Website\"\nauthor: \"Giuliet Kibler\"\ndescription: \"This is a website example for the PM 566 Lab 12\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\n::: {.cell}\n\n:::\n\n::: {.cell layout-align=\"center\"}\n\n:::\n\n\n\n\n
\n\n# Objectives\n\nThe objective of today's lab is to create a project website using the **rmarkdown** package and deploy it using GitHub pages. We will include interactive visualizations on the website.\n\nFor this lab, we have created some initial content for you to work with as an example. The code is found at: https://github.com/ksiegmund/PM566-lab12-example.\n\nYour objective will be to create your own *project* website using this content as a reference.\n\nNote that if you want to create a *personal* website using the **rmarkdown** package hosted on GitHub Pages, you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n
\n\n------------------------------------------------------------------------\n\n# Workflow Overview\n\nBuilding websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.\n\nThere are two main steps for creating a personal website that will be hosted on GitHub:\n\nI. Local setup
II. GitHub setup\n\n
\n\n------------------------------------------------------------------------\n\n
\n\n# I. Local Setup\n\nThe basic workflow is as follows:\n\n1. Create a project directory and an R Project file (`.Rproj`)\n2. Create a `_site.yml` and `index.Rmd` file in your new directory\n3. Add additional page content if desired through other `.Rmd` files\n4. Edit these files to create content and manage layout (and knit to view)\n5. Add a style sheet (CSS) if desired\n6. Build website\n - Build tab \\> Build Website or\n - in the console: `rmarkdown::render_site()` This creates the output: `index.html`\n\n
\n\n## Step 0: Look at existing content\n\nClone the website repository at https://github.com/ksiegmund/PM566-lab12-example with example project website content into a NEW directory for the lab, e.g. `\"week12-lab\"`.\n\n**Note**: we are not initializing this as a git repository, we will do that in Step 1. We are just downloading the contents.\n\n``` shell\nmkdir ~/week12-lab\ngit clone https://github.com/ksiegmund/PM566-lab12-example\n```\n\nThen open the file `PM566-lab12-example.Rproj`. For MacOS you can do that through command line using\n\n``` shell\nopen PM566-lab12-example.Rproj\n```\n\nOtherwise, you can manually open the file from your directory.\n\nOnce you have it opened:\n\n- Check out the contents of this repository. What files does it contain?\n\n- Take a few moments to compare the contents of this repository to the final website at https://ksiegmund.github.io/PM566-lab12-example\n\n
\n\n## Step 1: Create project website directory\n\nCreate and go to the directory you want to create your website in, e.g. `\"PM566-final-project\"`, and initialize git.\n\nIn command line:\n\n``` shell\nmkdir ~/PM566-final-project\ncd ~/PM566-final-project\ngit init\n```\n\n
\n\n## Step 2: Create and add essential files *from scratch*\n\nRecall from lecture that the minimum requirements for an R Markdown website are:\n\n- `index.Rmd`: contains the content for the website homepage\n- `_site.yml`: contains metadata for the website\n\nCreate these essential files, as well as a `README.md`, add all to git queue, and commit to your website repository.\n\n**Note**: You can use the `echo` command in command line to initialize the files (in MacOS you can also use the `touch` command):\n\n``` shell\necho My PM566 Final Project Website > README.md\necho > _site.yml\necho > index.Rmd\ngit add --all\ngit commit -m \"initalizing repository\"\n```\n\n
\n\n## Step 3: Create `.Rproj` file\n\nCreate an R Project file using RStudio IDE:\n\nGo to RStudio IDE \\> File \\> New Project \\> Existing Directory\n\nThe R Project is useful because RStudio will recognize your project as a website, and provide appropriate build tools.\n\n**Note**: After creating the R Project and initial files, you *may* need to close the project and reopen it before R will recognize it as a website and show the appropriate build tools.\n\n
\n\n## Step 4: Edit the content\n\n### Step 4.1: Edit the YAML file\n\nEdit the `_site.yml` file to include the metadata, layout, and theme you want for your website.\n\nFirst let's take a look at a basic example of a `_site.yml` file for a website with one page:\n\n``` markdown\nname: \"my-website\"\nnavbar:\n title: \"My Website\"\n left:\n - text: \"Home\"\n href: index.html\noutput:\n html_document:\n theme: cosmo\n```\n\nThis is the minimum you need to include in your `_site.yml`.\n\nNow let's take a look at the `_site.yml` from the website repository you downloaded into `\"week12-lab\"`. It looks like this:\n\n``` markdown\nname: \"my-website\"\noutput_dir: \".\"\nnavbar:\n title: \"PM566 Final Project\"\n left:\n - text: \"Home\"\n href: index.html\n - text: \"Lab 12\"\n href: 12-lab.html\n right:\n - icon: fa-github fa-lg\n href: https://github.com/USCbiostats/PM566\n - text: \"PM566 Home\"\n href: https://uscbiostats.github.io/PM566/\noutput:\n html_document:\n theme: cosmo\n include:\n after_body: footer.html\n css: styles.css\n```\n\nInspecting this, and the output on the completed website at https://ksiegmund.github.io/PM566-lab12-example, how do you add links to internal webpages? How do you add links to external websites? How do you add icons?\n\nInternal webpage links are in the left section. External websites are in the right section. Aded icons are in the output section.\n\n**Note**: recall that the `output_dir` field indicates which directory to copy site content into (`\"_site\"` is the default if none is specified). It can be `\".\"` to keep all content within the root website directory alongside the source code.\n\n**Note**: Preview themes [here](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.) and play around with different options. Themes are easy to change even after you have added content.\n\nNow your task is to create a YAML for your website that includes only the essential components for your website. Either copy the content of the simple `_site.yml` into your own `_site.yml` file in your website directory `PM566-final-project`, or replicate it yourself line by line.\n\n**Note**: YAML language is very picky so make sure your content is formatted appropriately. If you are not sure, either look up the appropriate text in the [reference guide](https://bookdown.org/yihui/rmarkdown/), search google, or copy from a website you know works!\n\n
\n\n### Step 4.2: Edit internal `.Rmd` files\n\nEdit and create `.Rmd` files that contain your website content, which will produce the html pages of your website when you knit them.\n\nFor example, the `index.Rmd` could look like this:\n\n``` markdown\n---\ntitle: \"PM566 Final Project\"\nauthor: \"Your Name\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\nThis is my PM566 Final Project website.\n```\n\n
\n\nThe `toc` specifies whether there is a table of contents, and `toc_float` provides the option to float the table of contents to the left of the main document content. The floating table of contents will always be visible even when the document is scrolled. There are other options for how to display the `toc` in R Markdown HTML output which you can read about [here](https://bookdown.org/yihui/rmarkdown/html-document.html#table-of-contents).\n\n
\n\nAfter you are done with your `index.Rmd` file, knit it to check the output. Either click the `Knit` option in the toolbar or in the console type `rmarkdown::render_site(\"index.Rmd\")`. This will render the output into a file `index.html` which you can check out by opening the file in your directory:\n\n
\n\n## Step 5: Build website\n\nNow we have the content and layout setup, we can build the website! This can be done in two ways:\n\n- Build tab \\> Build Website\n\n in the console: `rmarkdown::render_site()`\n\n**rmarkdown** has created all the additional files you need for your website. Check them out in your directory. Most importantly, the `index.html` file provides a preview of the site, which you can look at in a browser as above:\n\n**Note**: As you make changes, you should re-render (or equivalently, re-build) the website. Recall from lecture that RStudio supports \"live preview\" of changes that you make to supporting files within your website (e.g., CSS, JavaScript, `.Rmd` partials, R scripts, and YAML config files), but this only rebuilds the active page. So once you are happy with the results of rendering you should make sure to rebuild the entire site using `rmarkdown::render_site()` to ensure that all pages inherit your changes.\n\n
\n\n### Styles\n\nYou will see that your R Markdown website comes with a style class, specified by your chosen theme specified in your YAML (or the default theme if not chosen). You can also modify your site using CSS style sheets. As discussed in lecture, styles can be modified in 3 ways: in-line with HTML, placing a style section in your HTML document, defining the CSS in an external file that is then referenced as a link in your HTML. Feel free to play around with the external style sheet `styles.css` that came with the example website.\n\n
\n\n### Commit!\n\nDon't be afraid of commitment! Add your changes as you go along.\n\n``` shell\ncd ~/PM566-final-project\ngit add --all\ngit commit -m \"Rendered website\"\n```\n\n------------------------------------------------------------------------\n\n# II. GitHub setup\n\n## Overview\n\n1. Create project on GitHub\n2. Initialize project on Git\n3. Push project files to the GitHub repository for your project\n4. Deploy the website by enabling GitHub pages for the repository\n\n
\n\n## Step 6: Create project on GitHub\n\nCreate an online (remote) repository for your project using GitHub
\n\n## Step 7: Initialize project with git\n\nIn command line:\n\nAdd the remote using `git remote add`\n\n``` shell\ngit remote add origin https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git\n```\n\nOptionally, use the commands `git status` and `git remote -v` to check out the status.\n\n
\n\n## Step 8: Push website content to remote\n\nPush the changes to the remote using `git push`\n\n``` shell\ngit push -u origin main\n```\n\n**Note** In 2020 Github changed its default repository name from \"master\" to \"main\", so if you're creating a new repository after 2020, it will named \"main\".\n\n
\n\n## Step 9: Deploy the website\n\nEnable GitHub pages for the repository by going to the repository's Settings \\> GitHub Pages. For the branch option (left button), you'll switch from the selected \"none\" to the \"main branch\" folder. For the folder option (right button) (/(root) vs. /docs), you'll choose /(root) if you included the parameter `output_dir: \".\"` in your YAML. Otherwise, the output directory will default to the /docs folder, and you should select that as the source folder. Then hit Save:\n\n
\n\n## Step 10: Preview content!\n\nIt's live! Go to the website at www.YOUR_GH_NAME.github.io/YOUR_PROJECT_NAME/ (the website should appear to you when you click the appropriate setting in GitHub Pages)\n\nWOO HOO!\n\n
\n\n------------------------------------------------------------------------\n\n# III. Add interactive visuals\n\nYour task here is to create 2 interactive visuals, using **plotly**, **leaflet**, **DT**, or anything else you have explored, and post them on your website at `index.Rmd`.\n\n
\n\n## Step 11: Source processing code\n\nFirst you can source any necessary code, meaning run it. For example, let's use the COVID-19 data from the NYT we explored in week 11. In the example repository you downloaded into `\"week12-lab\"`, we have provided the code `process_covid_data.R` which goes through the first steps we carried out in the lab of downloading and processing the data. To source this code, in your `index.Rmd` file, include a code chunk with the `source(process_COVID_data.R)` command:\n\n\n\n\n::: {.cell layout-align=\"center\"}\n\n```{.r .code-r .cell-code}\nsource(\"process_COVID_data.R\")\n```\n:::\n\n\n\n\n
\n\n**Note**: Make sure that you include the following libraries and formatting code at the beginning of your `index.Rmd` file, which will allow you to run the `source(\"process_COVID_data.R\")` code:\n\n```` markdown\n```{r setup, message=FALSE, echo=FALSE, warning=FALSE}\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n```\n````\n\nYou may also want to include some code chunk options for your whole document using `opts_chunk$set()`, for example the options we specified in the `12-lab.Rmd` file:\n\n```` markdown\n```\n# Initialize code chunk options\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\")\n```\n````\n\n## Step 12: Add code for visuals\n\nThen you can add some code chunks to create the interactive visuals you want to include. I will add some code to create a couple of the **plotly** figures we created in lab. I am naming each plot but not outputting them here, because I will want to do that in independent code chunks as we will see in the next step.\n\n**Note**: Code chunks do not require names, but it can be useful to name them because they can be referenced elsewhere in the document. Note that if you do name them (like this one: `plot1`), you will need to be sure to give each an independent name because code chunks cannot share the same name.\n\n\n\n\n::: {.cell layout-align=\"center\"}\n\n```{.r .code-r-small .cell-code}\nsource(\"process_COVID_data.R\")\np1_scatter <- cv_states_today |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n\n# filter out \"District of Columbia\"\ncv_states_today_scatter <- cv_states_today |> filter(state!=\"District of Columbia\")\n\np2_scatter <- cv_states_today_scatter |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n```\n:::\n\n\n\n\n
\n\nNow, create 2 figures of your own, either using the code above, the code from last week's lab, or creating new figures based on the data created by the `process_COVID_data.R` code.\n\n

\n\n## Step 13: Display figures in tabs {.tabset}\n\nCreate tabs to display each figure. We do that using the following R Markdown language using the `{.tabset}` option:\n\n```` markdown\n\n## Showcasing plots {.tabset}\n\n### Tab 1\n\n```{r echo=FALSE}\np1_scatter\n```\n\n### Tab 2\n\n```{r echo=FALSE}\np2_scatter\n```\n\n## {-}\n````\n\nThe `{-}` closes the tabs. Tabs work at multiple levels of hierarchy: ##, ###, and ####.\n\n
\n\nThe output will look like this:\n\n### Figure 1\n\n\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n\n### Figure 2\n\n\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n\n## {.unnumbered}\n\n
\n\nKnit the page `index.Rmd` to check the output. It may take a bit longer now that we're also processing the data from the NYT. (Recall from lecture we can do that once per session by inputting the global option `opts_chunk$set(cache=TRUE)`).\n\n
\n\n## Step 14: Update website content\n\nYou've now made some edits to your website. To get the updates onto the live webpage, you need to re-render the site to create the HTML output from your `.Rmd` file edits, and push the updates to the remote GitHub repository:\n\n- In the R console: `rmarkdown::render_site()`\n\n- Preview contents by looking at the `index.html` file in a browser\n\n- Add and push changes to remote from your website project repository locally (e.g. `PM566-final-project`):\n\n``` shell\ngit add --all\ngit commit -m \"interactive visuals\"\ngit push\n```\n\nPreview your changes online at your website!\n\n**Note**: It may take up to 10 minutes for the content to render.\n\n
\n\n# Turn in your lab\n\nAdd the online link to your website in your `README.md` file, e.g.\n\n``` markdown\nThis is my PM566 lab12 website home. The website is online at https://ksiegmund.github.io/PM566-lab12-example/12-lab.html.\n```\n\nThen please submit your lab by adding a link to this week's lab issue: https://github.com/USCbiostats/PM566/issues/65 in your final commit.\n\n
\n\n# Extra credit: Creating a personal website\n\nNote that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\nI will do this seperately.\n\n

\n\n# References\n\nUseful references for creating websites can be found here:\n\n- [R Markdown reference guide](https://bookdown.org/yihui/rmarkdown/)\n- [R Markdown basic website themes](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.)\n\nThis lab was informed by:\n\n- [Chapter 10.5: Websites in rmarkdown’s site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html) in [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/), Yihui Xie, J. J. Allaire, Garrett Grolemund\n- [Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor\n\n

\n", "supporting": [], "filters": [ "rmarkdown/pagebreak.lua" diff --git a/.quarto/idx/about.qmd.json b/.quarto/idx/about.qmd.json index e4e1318..2bce980 100644 --- a/.quarto/idx/about.qmd.json +++ b/.quarto/idx/about.qmd.json @@ -1 +1 @@ -{"title":"About","markdown":{"yaml":{"title":"About"},"containsRefs":false,"markdown":"\n\nAbout this site\n\n```{r}\n1 + 1\n```\n","srcMarkdownNoYaml":"\n\nAbout this site\n\n```{r}\n1 + 1\n```\n"},"formats":{"html":{"identifier":{"display-name":"HTML","target-format":"html","base-format":"html"},"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"ipynb-shell-interactivity":null,"plotly-connected":true,"engine":"knitr"},"render":{"keep-tex":false,"keep-typ":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"inline-includes":false,"preserve-yaml":false,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-min-runs":1,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[],"notebook-links":true},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["styles.css"],"toc":true,"output-file":"about.html"},"language":{"toc-title-document":"Table of contents","toc-title-website":"On this page","related-formats-title":"Other Formats","related-notebooks-title":"Notebooks","source-notebooks-prefix":"Source","other-links-title":"Other Links","code-links-title":"Code Links","launch-dev-container-title":"Launch Dev Container","launch-binder-title":"Launch Binder","article-notebook-label":"Article Notebook","notebook-preview-download":"Download Notebook","notebook-preview-download-src":"Download Source","notebook-preview-back":"Back to Article","manuscript-meca-bundle":"MECA Bundle","section-title-abstract":"Abstract","section-title-appendices":"Appendices","section-title-footnotes":"Footnotes","section-title-references":"References","section-title-reuse":"Reuse","section-title-copyright":"Copyright","section-title-citation":"Citation","appendix-attribution-cite-as":"For attribution, please cite this work as:","appendix-attribution-bibtex":"BibTeX citation:","appendix-view-license":"View License","title-block-author-single":"Author","title-block-author-plural":"Authors","title-block-affiliation-single":"Affiliation","title-block-affiliation-plural":"Affiliations","title-block-published":"Published","title-block-modified":"Modified","title-block-keywords":"Keywords","callout-tip-title":"Tip","callout-note-title":"Note","callout-warning-title":"Warning","callout-important-title":"Important","callout-caution-title":"Caution","code-summary":"Code","code-tools-menu-caption":"Code","code-tools-show-all-code":"Show All Code","code-tools-hide-all-code":"Hide All Code","code-tools-view-source":"View Source","code-tools-source-code":"Source Code","tools-share":"Share","tools-download":"Download","code-line":"Line","code-lines":"Lines","copy-button-tooltip":"Copy to Clipboard","copy-button-tooltip-success":"Copied!","repo-action-links-edit":"Edit this page","repo-action-links-source":"View source","repo-action-links-issue":"Report an issue","back-to-top":"Back to top","search-no-results-text":"No results","search-matching-documents-text":"matching documents","search-copy-link-title":"Copy link to search","search-hide-matches-text":"Hide additional matches","search-more-match-text":"more match in this document","search-more-matches-text":"more matches in this document","search-clear-button-title":"Clear","search-text-placeholder":"","search-detached-cancel-button-title":"Cancel","search-submit-button-title":"Submit","search-label":"Search","toggle-section":"Toggle section","toggle-sidebar":"Toggle sidebar navigation","toggle-dark-mode":"Toggle dark mode","toggle-reader-mode":"Toggle reader mode","toggle-navigation":"Toggle navigation","crossref-fig-title":"Figure","crossref-tbl-title":"Table","crossref-lst-title":"Listing","crossref-thm-title":"Theorem","crossref-lem-title":"Lemma","crossref-cor-title":"Corollary","crossref-prp-title":"Proposition","crossref-cnj-title":"Conjecture","crossref-def-title":"Definition","crossref-exm-title":"Example","crossref-exr-title":"Exercise","crossref-ch-prefix":"Chapter","crossref-apx-prefix":"Appendix","crossref-sec-prefix":"Section","crossref-eq-prefix":"Equation","crossref-lof-title":"List of Figures","crossref-lot-title":"List of Tables","crossref-lol-title":"List of Listings","environment-proof-title":"Proof","environment-remark-title":"Remark","environment-solution-title":"Solution","listing-page-order-by":"Order By","listing-page-order-by-default":"Default","listing-page-order-by-date-asc":"Oldest","listing-page-order-by-date-desc":"Newest","listing-page-order-by-number-desc":"High to Low","listing-page-order-by-number-asc":"Low to High","listing-page-field-date":"Date","listing-page-field-title":"Title","listing-page-field-description":"Description","listing-page-field-author":"Author","listing-page-field-filename":"File Name","listing-page-field-filemodified":"Modified","listing-page-field-subtitle":"Subtitle","listing-page-field-readingtime":"Reading Time","listing-page-field-wordcount":"Word Count","listing-page-field-categories":"Categories","listing-page-minutes-compact":"{0} min","listing-page-category-all":"All","listing-page-no-matches":"No matching items","listing-page-words":"{0} words","listing-page-filter":"Filter","draft":"Draft"},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.5.57","editor":"visual","theme":"cosmo","title":"About"},"extensions":{"book":{"multiFile":true}}}},"projectFormats":["html"]} \ No newline at end of file +{"title":"About","markdown":{"yaml":{"title":"About"},"containsRefs":false,"markdown":"\n\nAbout this site\n\nThis is PM 566 Lab 12's website\n","srcMarkdownNoYaml":"\n\nAbout this site\n\nThis is PM 566 Lab 12's website\n"},"formats":{"html":{"identifier":{"display-name":"HTML","target-format":"html","base-format":"html"},"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"ipynb-shell-interactivity":null,"plotly-connected":true,"engine":"markdown"},"render":{"keep-tex":false,"keep-typ":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"inline-includes":false,"preserve-yaml":false,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-min-runs":1,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[],"notebook-links":true},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["styles.css"],"toc":true,"output-file":"about.html"},"language":{"toc-title-document":"Table of contents","toc-title-website":"On this page","related-formats-title":"Other Formats","related-notebooks-title":"Notebooks","source-notebooks-prefix":"Source","other-links-title":"Other Links","code-links-title":"Code Links","launch-dev-container-title":"Launch Dev Container","launch-binder-title":"Launch Binder","article-notebook-label":"Article Notebook","notebook-preview-download":"Download Notebook","notebook-preview-download-src":"Download Source","notebook-preview-back":"Back to Article","manuscript-meca-bundle":"MECA Bundle","section-title-abstract":"Abstract","section-title-appendices":"Appendices","section-title-footnotes":"Footnotes","section-title-references":"References","section-title-reuse":"Reuse","section-title-copyright":"Copyright","section-title-citation":"Citation","appendix-attribution-cite-as":"For attribution, please cite this work as:","appendix-attribution-bibtex":"BibTeX citation:","appendix-view-license":"View License","title-block-author-single":"Author","title-block-author-plural":"Authors","title-block-affiliation-single":"Affiliation","title-block-affiliation-plural":"Affiliations","title-block-published":"Published","title-block-modified":"Modified","title-block-keywords":"Keywords","callout-tip-title":"Tip","callout-note-title":"Note","callout-warning-title":"Warning","callout-important-title":"Important","callout-caution-title":"Caution","code-summary":"Code","code-tools-menu-caption":"Code","code-tools-show-all-code":"Show All Code","code-tools-hide-all-code":"Hide All Code","code-tools-view-source":"View Source","code-tools-source-code":"Source Code","tools-share":"Share","tools-download":"Download","code-line":"Line","code-lines":"Lines","copy-button-tooltip":"Copy to Clipboard","copy-button-tooltip-success":"Copied!","repo-action-links-edit":"Edit this page","repo-action-links-source":"View source","repo-action-links-issue":"Report an issue","back-to-top":"Back to top","search-no-results-text":"No results","search-matching-documents-text":"matching documents","search-copy-link-title":"Copy link to search","search-hide-matches-text":"Hide additional matches","search-more-match-text":"more match in this document","search-more-matches-text":"more matches in this document","search-clear-button-title":"Clear","search-text-placeholder":"","search-detached-cancel-button-title":"Cancel","search-submit-button-title":"Submit","search-label":"Search","toggle-section":"Toggle section","toggle-sidebar":"Toggle sidebar navigation","toggle-dark-mode":"Toggle dark mode","toggle-reader-mode":"Toggle reader mode","toggle-navigation":"Toggle navigation","crossref-fig-title":"Figure","crossref-tbl-title":"Table","crossref-lst-title":"Listing","crossref-thm-title":"Theorem","crossref-lem-title":"Lemma","crossref-cor-title":"Corollary","crossref-prp-title":"Proposition","crossref-cnj-title":"Conjecture","crossref-def-title":"Definition","crossref-exm-title":"Example","crossref-exr-title":"Exercise","crossref-ch-prefix":"Chapter","crossref-apx-prefix":"Appendix","crossref-sec-prefix":"Section","crossref-eq-prefix":"Equation","crossref-lof-title":"List of Figures","crossref-lot-title":"List of Tables","crossref-lol-title":"List of Listings","environment-proof-title":"Proof","environment-remark-title":"Remark","environment-solution-title":"Solution","listing-page-order-by":"Order By","listing-page-order-by-default":"Default","listing-page-order-by-date-asc":"Oldest","listing-page-order-by-date-desc":"Newest","listing-page-order-by-number-desc":"High to Low","listing-page-order-by-number-asc":"Low to High","listing-page-field-date":"Date","listing-page-field-title":"Title","listing-page-field-description":"Description","listing-page-field-author":"Author","listing-page-field-filename":"File Name","listing-page-field-filemodified":"Modified","listing-page-field-subtitle":"Subtitle","listing-page-field-readingtime":"Reading Time","listing-page-field-wordcount":"Word Count","listing-page-field-categories":"Categories","listing-page-minutes-compact":"{0} min","listing-page-category-all":"All","listing-page-no-matches":"No matching items","listing-page-words":"{0} words","listing-page-filter":"Filter","draft":"Draft"},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.5.57","editor":"visual","theme":"cosmo","title":"About"},"extensions":{"book":{"multiFile":true}}}},"projectFormats":["html"]} \ No newline at end of file diff --git a/.quarto/idx/index.qmd.json b/.quarto/idx/index.qmd.json index d5ffe5e..2799b1c 100644 --- a/.quarto/idx/index.qmd.json +++ b/.quarto/idx/index.qmd.json @@ -1 +1 @@ -{"title":"Website","markdown":{"yaml":{"title":"Website","author":"Giuliet Kibler","description":"This is a website example for the PM 566 Lab 12","output":{"html_document":{"toc":true,"toc_float":true}}},"headingText":"INITALIZE CODE CHUNK OPTIONS","containsRefs":false,"markdown":"\n\n```{r setup, message=FALSE, echo=FALSE, warning=FALSE}\n\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\",\n class.source = \"code-r\")\n```\n\n```{css, echo = FALSE}\n.code-r { /* Code block */\n font-size: 15px;\n}\n\n.code-r-small { /* Code block */\n font-size: 10px;\n}\n```\n\n
\n\n# Objectives\n\nThe objective of today's lab is to create a project website using the **rmarkdown** package and deploy it using GitHub pages. We will include interactive visualizations on the website.\n\nFor this lab, we have created some initial content for you to work with as an example. The code is found at: https://github.com/ksiegmund/PM566-lab12-example.\n\nYour objective will be to create your own *project* website using this content as a reference.\n\nNote that if you want to create a *personal* website using the **rmarkdown** package hosted on GitHub Pages, you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n
\n\n------------------------------------------------------------------------\n\n# Workflow Overview\n\nBuilding websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.\n\nThere are two main steps for creating a personal website that will be hosted on GitHub:\n\nI. Local setup
II. GitHub setup\n\n
\n\n------------------------------------------------------------------------\n\n
\n\n# I. Local Setup\n\nThe basic workflow is as follows:\n\n1. Create a project directory and an R Project file (`.Rproj`)\n2. Create a `_site.yml` and `index.Rmd` file in your new directory\n3. Add additional page content if desired through other `.Rmd` files\n4. Edit these files to create content and manage layout (and knit to view)\n5. Add a style sheet (CSS) if desired\n6. Build website\n - Build tab \\> Build Website or\n - in the console: `rmarkdown::render_site()` This creates the output: `index.html`\n\n
\n\n## Step 0: Look at existing content\n\nClone the website repository at https://github.com/ksiegmund/PM566-lab12-example with example project website content into a NEW directory for the lab, e.g. `\"week12-lab\"`.\n\n**Note**: we are not initializing this as a git repository, we will do that in Step 1. We are just downloading the contents.\n\n``` shell\nmkdir ~/week12-lab\ngit clone https://github.com/ksiegmund/PM566-lab12-example\n```\n\nThen open the file `PM566-lab12-example.Rproj`. For MacOS you can do that through command line using\n\n``` shell\nopen PM566-lab12-example.Rproj\n```\n\nOtherwise, you can manually open the file from your directory.\n\nOnce you have it opened:\n\n- Check out the contents of this repository. What files does it contain?\n\n- Take a few moments to compare the contents of this repository to the final website at https://ksiegmund.github.io/PM566-lab12-example\n\n
\n\n## Step 1: Create project website directory\n\nCreate and go to the directory you want to create your website in, e.g. `\"PM566-final-project\"`, and initialize git.\n\nIn command line:\n\n``` shell\nmkdir ~/PM566-final-project\ncd ~/PM566-final-project\ngit init\n```\n\n
\n\n## Step 2: Create and add essential files *from scratch*\n\nRecall from lecture that the minimum requirements for an R Markdown website are:\n\n- `index.Rmd`: contains the content for the website homepage\n- `_site.yml`: contains metadata for the website\n\nCreate these essential files, as well as a `README.md`, add all to git queue, and commit to your website repository.\n\n**Note**: You can use the `echo` command in command line to initialize the files (in MacOS you can also use the `touch` command):\n\n``` shell\necho My PM566 Final Project Website > README.md\necho > _site.yml\necho > index.Rmd\ngit add --all\ngit commit -m \"initalizing repository\"\n```\n\n
\n\n## Step 3: Create `.Rproj` file\n\nCreate an R Project file using RStudio IDE:\n\nGo to RStudio IDE \\> File \\> New Project \\> Existing Directory\n\nThe R Project is useful because RStudio will recognize your project as a website, and provide appropriate build tools.\n\n**Note**: After creating the R Project and initial files, you *may* need to close the project and reopen it before R will recognize it as a website and show the appropriate build tools.\n\n
\n\n## Step 4: Edit the content\n\n### Step 4.1: Edit the YAML file\n\nEdit the `_site.yml` file to include the metadata, layout, and theme you want for your website.\n\nFirst let's take a look at a basic example of a `_site.yml` file for a website with one page:\n\n``` markdown\nname: \"my-website\"\nnavbar:\n title: \"My Website\"\n left:\n - text: \"Home\"\n href: index.html\noutput:\n html_document:\n theme: cosmo\n```\n\nThis is the minimum you need to include in your `_site.yml`.\n\nNow let's take a look at the `_site.yml` from the website repository you downloaded into `\"week12-lab\"`. It looks like this:\n\n``` markdown\nname: \"my-website\"\noutput_dir: \".\"\nnavbar:\n title: \"PM566 Final Project\"\n left:\n - text: \"Home\"\n href: index.html\n - text: \"Lab 12\"\n href: 12-lab.html\n right:\n - icon: fa-github fa-lg\n href: https://github.com/USCbiostats/PM566\n - text: \"PM566 Home\"\n href: https://uscbiostats.github.io/PM566/\noutput:\n html_document:\n theme: cosmo\n include:\n after_body: footer.html\n css: styles.css\n```\n\nInspecting this, and the output on the completed website at https://ksiegmund.github.io/PM566-lab12-example, how do you add links to internal webpages? How do you add links to external websites? How do you add icons?\n\nInternal webpage links are in the left section. External websites are in the right section. Aded icons are in the output section.\n\n**Note**: recall that the `output_dir` field indicates which directory to copy site content into (`\"_site\"` is the default if none is specified). It can be `\".\"` to keep all content within the root website directory alongside the source code.\n\n**Note**: Preview themes [here](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.) and play around with different options. Themes are easy to change even after you have added content.\n\nNow your task is to create a YAML for your website that includes only the essential components for your website. Either copy the content of the simple `_site.yml` into your own `_site.yml` file in your website directory `PM566-final-project`, or replicate it yourself line by line.\n\n**Note**: YAML language is very picky so make sure your content is formatted appropriately. If you are not sure, either look up the appropriate text in the [reference guide](https://bookdown.org/yihui/rmarkdown/), search google, or copy from a website you know works!\n\n
\n\n### Step 4.2: Edit internal `.Rmd` files\n\nEdit and create `.Rmd` files that contain your website content, which will produce the html pages of your website when you knit them.\n\nFor example, the `index.Rmd` could look like this:\n\n``` markdown\n---\ntitle: \"PM566 Final Project\"\nauthor: \"Your Name\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\nThis is my PM566 Final Project website.\n```\n\n
\n\nThe `toc` specifies whether there is a table of contents, and `toc_float` provides the option to float the table of contents to the left of the main document content. The floating table of contents will always be visible even when the document is scrolled. There are other options for how to display the `toc` in R Markdown HTML output which you can read about [here](https://bookdown.org/yihui/rmarkdown/html-document.html#table-of-contents).\n\n
\n\nAfter you are done with your `index.Rmd` file, knit it to check the output. Either click the `Knit` option in the toolbar or in the console type `rmarkdown::render_site(\"index.Rmd\")`. This will render the output into a file `index.html` which you can check out by opening the file in your directory:\n\n
\n\n## Step 5: Build website\n\nNow we have the content and layout setup, we can build the website! This can be done in two ways:\n\n- Build tab \\> Build Website\n\n in the console: `rmarkdown::render_site()`\n\n**rmarkdown** has created all the additional files you need for your website. Check them out in your directory. Most importantly, the `index.html` file provides a preview of the site, which you can look at in a browser as above:\n\n**Note**: As you make changes, you should re-render (or equivalently, re-build) the website. Recall from lecture that RStudio supports \"live preview\" of changes that you make to supporting files within your website (e.g., CSS, JavaScript, `.Rmd` partials, R scripts, and YAML config files), but this only rebuilds the active page. So once you are happy with the results of rendering you should make sure to rebuild the entire site using `rmarkdown::render_site()` to ensure that all pages inherit your changes.\n\n
\n\n### Styles\n\nYou will see that your R Markdown website comes with a style class, specified by your chosen theme specified in your YAML (or the default theme if not chosen). You can also modify your site using CSS style sheets. As discussed in lecture, styles can be modified in 3 ways: in-line with HTML, placing a style section in your HTML document, defining the CSS in an external file that is then referenced as a link in your HTML. Feel free to play around with the external style sheet `styles.css` that came with the example website.\n\n
\n\n### Commit!\n\nDon't be afraid of commitment! Add your changes as you go along.\n\n``` shell\ncd ~/PM566-final-project\ngit add --all\ngit commit -m \"Rendered website\"\n```\n\n------------------------------------------------------------------------\n\n# II. GitHub setup\n\n## Overview\n\n1. Create project on GitHub\n2. Initialize project on Git\n3. Push project files to the GitHub repository for your project\n4. Deploy the website by enabling GitHub pages for the repository\n\n
\n\n## Step 6: Create project on GitHub\n\nCreate an online (remote) repository for your project using GitHub
\n\n## Step 7: Initialize project with git\n\nIn command line:\n\nAdd the remote using `git remote add`\n\n``` shell\ngit remote add origin https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git\n```\n\nOptionally, use the commands `git status` and `git remote -v` to check out the status.\n\n
\n\n## Step 8: Push website content to remote\n\nPush the changes to the remote using `git push`\n\n``` shell\ngit push -u origin main\n```\n\n**Note** In 2020 Github changed its default repository name from \"master\" to \"main\", so if you're creating a new repository after 2020, it will named \"main\".\n\n
\n\n## Step 9: Deploy the website\n\nEnable GitHub pages for the repository by going to the repository's Settings \\> GitHub Pages. For the branch option (left button), you'll switch from the selected \"none\" to the \"main branch\" folder. For the folder option (right button) (/(root) vs. /docs), you'll choose /(root) if you included the parameter `output_dir: \".\"` in your YAML. Otherwise, the output directory will default to the /docs folder, and you should select that as the source folder. Then hit Save:\n\n
\n\n## Step 10: Preview content!\n\nIt's live! Go to the website at www.YOUR_GH_NAME.github.io/YOUR_PROJECT_NAME/ (the website should appear to you when you click the appropriate setting in GitHub Pages)\n\nWOO HOO!\n\n
\n\n------------------------------------------------------------------------\n\n# III. Add interactive visuals\n\nYour task here is to create 2 interactive visuals, using **plotly**, **leaflet**, **DT**, or anything else you have explored, and post them on your website at `index.Rmd`.\n\n
\n\n## Step 11: Source processing code\n\nFirst you can source any necessary code, meaning run it. For example, let's use the COVID-19 data from the NYT we explored in week 11. In the example repository you downloaded into `\"week12-lab\"`, we have provided the code `process_covid_data.R` which goes through the first steps we carried out in the lab of downloading and processing the data. To source this code, in your `index.Rmd` file, include a code chunk with the `source(process_COVID_data.R)` command:\n\n```{r load-data}\nsource(\"process_COVID_data.R\")\n```\n\n
\n\n**Note**: Make sure that you include the following libraries and formatting code at the beginning of your `index.Rmd` file, which will allow you to run the `source(\"process_COVID_data.R\")` code:\n\n```` markdown\n`r ''````{r setup, message=FALSE, echo=FALSE, warning=FALSE}\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n```\n````\n\nYou may also want to include some code chunk options for your whole document using `opts_chunk$set()`, for example the options we specified in the `12-lab.Rmd` file:\n\n```` markdown\n`r ''````\n# Initialize code chunk options\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\")\n```\n````\n\n## Step 12: Add code for visuals\n\nThen you can add some code chunks to create the interactive visuals you want to include. I will add some code to create a couple of the **plotly** figures we created in lab. I am naming each plot but not outputting them here, because I will want to do that in independent code chunks as we will see in the next step.\n\n**Note**: Code chunks do not require names, but it can be useful to name them because they can be referenced elsewhere in the document. Note that if you do name them (like this one: `plot1`), you will need to be sure to give each an independent name because code chunks cannot share the same name.\n\n```{r plot1, class.source=\"code-r-small\"}\nsource(\"process_COVID_data.R\")\np1_scatter <- cv_states_today |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n\n# filter out \"District of Columbia\"\ncv_states_today_scatter <- cv_states_today |> filter(state!=\"District of Columbia\")\n\np2_scatter <- cv_states_today_scatter |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n```\n\n
\n\nNow, create 2 figures of your own, either using the code above, the code from last week's lab, or creating new figures based on the data created by the `process_COVID_data.R` code.\n\n

\n\n## Step 13: Display figures in tabs {.tabset}\n\nCreate tabs to display each figure. We do that using the following R Markdown language using the `{.tabset}` option:\n\n```` markdown\n\n## Showcasing plots {.tabset}\n\n### Tab 1\n\n`r ''````{r echo=FALSE}\np1_scatter\n```\n\n### Tab 2\n\n`r ''````{r echo=FALSE}\np2_scatter\n```\n\n## {-}\n````\n\nThe `{-}` closes the tabs. Tabs work at multiple levels of hierarchy: ##, ###, and ####.\n\n
\n\nThe output will look like this:\n\n### Figure 1\n\n```{r p1, echo=FALSE}\np1_scatter\n```\n\n### Figure 2\n\n```{r p2, echo=FALSE}\np2_scatter\n```\n\n## {.unnumbered}\n\n
\n\nKnit the page `index.Rmd` to check the output. It may take a bit longer now that we're also processing the data from the NYT. (Recall from lecture we can do that once per session by inputting the global option `opts_chunk$set(cache=TRUE)`).\n\n
\n\n## Step 14: Update website content\n\nYou've now made some edits to your website. To get the updates onto the live webpage, you need to re-render the site to create the HTML output from your `.Rmd` file edits, and push the updates to the remote GitHub repository:\n\n- In the R console: `rmarkdown::render_site()`\n\n- Preview contents by looking at the `index.html` file in a browser\n\n- Add and push changes to remote from your website project repository locally (e.g. `PM566-final-project`):\n\n``` shell\ngit add --all\ngit commit -m \"interactive visuals\"\ngit push\n```\n\nPreview your changes online at your website!\n\n**Note**: It may take up to 10 minutes for the content to render.\n\n
\n\n# Turn in your lab\n\nAdd the online link to your website in your `README.md` file, e.g.\n\n``` markdown\nThis is my PM566 lab12 website home. The website is online at https://ksiegmund.github.io/PM566-lab12-example/12-lab.html.\n```\n\nThen please submit your lab by adding a link to this week's lab issue: https://github.com/USCbiostats/PM566/issues/65 in your final commit.\n\n
\n\n# Extra credit: Creating a personal website\n\nNote that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n

\n\n# References\n\nUseful references for creating websites can be found here:\n\n- [R Markdown reference guide](https://bookdown.org/yihui/rmarkdown/)\n- [R Markdown basic website themes](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.)\n\nThis lab was informed by:\n\n- [Chapter 10.5: Websites in rmarkdown’s site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html) in [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/), Yihui Xie, J. J. Allaire, Garrett Grolemund\n- [Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor\n\n

\n","srcMarkdownNoYaml":"\n\n```{r setup, message=FALSE, echo=FALSE, warning=FALSE}\n\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n\n# INITALIZE CODE CHUNK OPTIONS\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\",\n class.source = \"code-r\")\n```\n\n```{css, echo = FALSE}\n.code-r { /* Code block */\n font-size: 15px;\n}\n\n.code-r-small { /* Code block */\n font-size: 10px;\n}\n```\n\n
\n\n# Objectives\n\nThe objective of today's lab is to create a project website using the **rmarkdown** package and deploy it using GitHub pages. We will include interactive visualizations on the website.\n\nFor this lab, we have created some initial content for you to work with as an example. The code is found at: https://github.com/ksiegmund/PM566-lab12-example.\n\nYour objective will be to create your own *project* website using this content as a reference.\n\nNote that if you want to create a *personal* website using the **rmarkdown** package hosted on GitHub Pages, you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n
\n\n------------------------------------------------------------------------\n\n# Workflow Overview\n\nBuilding websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.\n\nThere are two main steps for creating a personal website that will be hosted on GitHub:\n\nI. Local setup
II. GitHub setup\n\n
\n\n------------------------------------------------------------------------\n\n
\n\n# I. Local Setup\n\nThe basic workflow is as follows:\n\n1. Create a project directory and an R Project file (`.Rproj`)\n2. Create a `_site.yml` and `index.Rmd` file in your new directory\n3. Add additional page content if desired through other `.Rmd` files\n4. Edit these files to create content and manage layout (and knit to view)\n5. Add a style sheet (CSS) if desired\n6. Build website\n - Build tab \\> Build Website or\n - in the console: `rmarkdown::render_site()` This creates the output: `index.html`\n\n
\n\n## Step 0: Look at existing content\n\nClone the website repository at https://github.com/ksiegmund/PM566-lab12-example with example project website content into a NEW directory for the lab, e.g. `\"week12-lab\"`.\n\n**Note**: we are not initializing this as a git repository, we will do that in Step 1. We are just downloading the contents.\n\n``` shell\nmkdir ~/week12-lab\ngit clone https://github.com/ksiegmund/PM566-lab12-example\n```\n\nThen open the file `PM566-lab12-example.Rproj`. For MacOS you can do that through command line using\n\n``` shell\nopen PM566-lab12-example.Rproj\n```\n\nOtherwise, you can manually open the file from your directory.\n\nOnce you have it opened:\n\n- Check out the contents of this repository. What files does it contain?\n\n- Take a few moments to compare the contents of this repository to the final website at https://ksiegmund.github.io/PM566-lab12-example\n\n
\n\n## Step 1: Create project website directory\n\nCreate and go to the directory you want to create your website in, e.g. `\"PM566-final-project\"`, and initialize git.\n\nIn command line:\n\n``` shell\nmkdir ~/PM566-final-project\ncd ~/PM566-final-project\ngit init\n```\n\n
\n\n## Step 2: Create and add essential files *from scratch*\n\nRecall from lecture that the minimum requirements for an R Markdown website are:\n\n- `index.Rmd`: contains the content for the website homepage\n- `_site.yml`: contains metadata for the website\n\nCreate these essential files, as well as a `README.md`, add all to git queue, and commit to your website repository.\n\n**Note**: You can use the `echo` command in command line to initialize the files (in MacOS you can also use the `touch` command):\n\n``` shell\necho My PM566 Final Project Website > README.md\necho > _site.yml\necho > index.Rmd\ngit add --all\ngit commit -m \"initalizing repository\"\n```\n\n
\n\n## Step 3: Create `.Rproj` file\n\nCreate an R Project file using RStudio IDE:\n\nGo to RStudio IDE \\> File \\> New Project \\> Existing Directory\n\nThe R Project is useful because RStudio will recognize your project as a website, and provide appropriate build tools.\n\n**Note**: After creating the R Project and initial files, you *may* need to close the project and reopen it before R will recognize it as a website and show the appropriate build tools.\n\n
\n\n## Step 4: Edit the content\n\n### Step 4.1: Edit the YAML file\n\nEdit the `_site.yml` file to include the metadata, layout, and theme you want for your website.\n\nFirst let's take a look at a basic example of a `_site.yml` file for a website with one page:\n\n``` markdown\nname: \"my-website\"\nnavbar:\n title: \"My Website\"\n left:\n - text: \"Home\"\n href: index.html\noutput:\n html_document:\n theme: cosmo\n```\n\nThis is the minimum you need to include in your `_site.yml`.\n\nNow let's take a look at the `_site.yml` from the website repository you downloaded into `\"week12-lab\"`. It looks like this:\n\n``` markdown\nname: \"my-website\"\noutput_dir: \".\"\nnavbar:\n title: \"PM566 Final Project\"\n left:\n - text: \"Home\"\n href: index.html\n - text: \"Lab 12\"\n href: 12-lab.html\n right:\n - icon: fa-github fa-lg\n href: https://github.com/USCbiostats/PM566\n - text: \"PM566 Home\"\n href: https://uscbiostats.github.io/PM566/\noutput:\n html_document:\n theme: cosmo\n include:\n after_body: footer.html\n css: styles.css\n```\n\nInspecting this, and the output on the completed website at https://ksiegmund.github.io/PM566-lab12-example, how do you add links to internal webpages? How do you add links to external websites? How do you add icons?\n\nInternal webpage links are in the left section. External websites are in the right section. Aded icons are in the output section.\n\n**Note**: recall that the `output_dir` field indicates which directory to copy site content into (`\"_site\"` is the default if none is specified). It can be `\".\"` to keep all content within the root website directory alongside the source code.\n\n**Note**: Preview themes [here](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.) and play around with different options. Themes are easy to change even after you have added content.\n\nNow your task is to create a YAML for your website that includes only the essential components for your website. Either copy the content of the simple `_site.yml` into your own `_site.yml` file in your website directory `PM566-final-project`, or replicate it yourself line by line.\n\n**Note**: YAML language is very picky so make sure your content is formatted appropriately. If you are not sure, either look up the appropriate text in the [reference guide](https://bookdown.org/yihui/rmarkdown/), search google, or copy from a website you know works!\n\n
\n\n### Step 4.2: Edit internal `.Rmd` files\n\nEdit and create `.Rmd` files that contain your website content, which will produce the html pages of your website when you knit them.\n\nFor example, the `index.Rmd` could look like this:\n\n``` markdown\n---\ntitle: \"PM566 Final Project\"\nauthor: \"Your Name\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\nThis is my PM566 Final Project website.\n```\n\n
\n\nThe `toc` specifies whether there is a table of contents, and `toc_float` provides the option to float the table of contents to the left of the main document content. The floating table of contents will always be visible even when the document is scrolled. There are other options for how to display the `toc` in R Markdown HTML output which you can read about [here](https://bookdown.org/yihui/rmarkdown/html-document.html#table-of-contents).\n\n
\n\nAfter you are done with your `index.Rmd` file, knit it to check the output. Either click the `Knit` option in the toolbar or in the console type `rmarkdown::render_site(\"index.Rmd\")`. This will render the output into a file `index.html` which you can check out by opening the file in your directory:\n\n
\n\n## Step 5: Build website\n\nNow we have the content and layout setup, we can build the website! This can be done in two ways:\n\n- Build tab \\> Build Website\n\n in the console: `rmarkdown::render_site()`\n\n**rmarkdown** has created all the additional files you need for your website. Check them out in your directory. Most importantly, the `index.html` file provides a preview of the site, which you can look at in a browser as above:\n\n**Note**: As you make changes, you should re-render (or equivalently, re-build) the website. Recall from lecture that RStudio supports \"live preview\" of changes that you make to supporting files within your website (e.g., CSS, JavaScript, `.Rmd` partials, R scripts, and YAML config files), but this only rebuilds the active page. So once you are happy with the results of rendering you should make sure to rebuild the entire site using `rmarkdown::render_site()` to ensure that all pages inherit your changes.\n\n
\n\n### Styles\n\nYou will see that your R Markdown website comes with a style class, specified by your chosen theme specified in your YAML (or the default theme if not chosen). You can also modify your site using CSS style sheets. As discussed in lecture, styles can be modified in 3 ways: in-line with HTML, placing a style section in your HTML document, defining the CSS in an external file that is then referenced as a link in your HTML. Feel free to play around with the external style sheet `styles.css` that came with the example website.\n\n
\n\n### Commit!\n\nDon't be afraid of commitment! Add your changes as you go along.\n\n``` shell\ncd ~/PM566-final-project\ngit add --all\ngit commit -m \"Rendered website\"\n```\n\n------------------------------------------------------------------------\n\n# II. GitHub setup\n\n## Overview\n\n1. Create project on GitHub\n2. Initialize project on Git\n3. Push project files to the GitHub repository for your project\n4. Deploy the website by enabling GitHub pages for the repository\n\n
\n\n## Step 6: Create project on GitHub\n\nCreate an online (remote) repository for your project using GitHub
\n\n## Step 7: Initialize project with git\n\nIn command line:\n\nAdd the remote using `git remote add`\n\n``` shell\ngit remote add origin https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git\n```\n\nOptionally, use the commands `git status` and `git remote -v` to check out the status.\n\n
\n\n## Step 8: Push website content to remote\n\nPush the changes to the remote using `git push`\n\n``` shell\ngit push -u origin main\n```\n\n**Note** In 2020 Github changed its default repository name from \"master\" to \"main\", so if you're creating a new repository after 2020, it will named \"main\".\n\n
\n\n## Step 9: Deploy the website\n\nEnable GitHub pages for the repository by going to the repository's Settings \\> GitHub Pages. For the branch option (left button), you'll switch from the selected \"none\" to the \"main branch\" folder. For the folder option (right button) (/(root) vs. /docs), you'll choose /(root) if you included the parameter `output_dir: \".\"` in your YAML. Otherwise, the output directory will default to the /docs folder, and you should select that as the source folder. Then hit Save:\n\n
\n\n## Step 10: Preview content!\n\nIt's live! Go to the website at www.YOUR_GH_NAME.github.io/YOUR_PROJECT_NAME/ (the website should appear to you when you click the appropriate setting in GitHub Pages)\n\nWOO HOO!\n\n
\n\n------------------------------------------------------------------------\n\n# III. Add interactive visuals\n\nYour task here is to create 2 interactive visuals, using **plotly**, **leaflet**, **DT**, or anything else you have explored, and post them on your website at `index.Rmd`.\n\n
\n\n## Step 11: Source processing code\n\nFirst you can source any necessary code, meaning run it. For example, let's use the COVID-19 data from the NYT we explored in week 11. In the example repository you downloaded into `\"week12-lab\"`, we have provided the code `process_covid_data.R` which goes through the first steps we carried out in the lab of downloading and processing the data. To source this code, in your `index.Rmd` file, include a code chunk with the `source(process_COVID_data.R)` command:\n\n```{r load-data}\nsource(\"process_COVID_data.R\")\n```\n\n
\n\n**Note**: Make sure that you include the following libraries and formatting code at the beginning of your `index.Rmd` file, which will allow you to run the `source(\"process_COVID_data.R\")` code:\n\n```` markdown\n`r ''````{r setup, message=FALSE, echo=FALSE, warning=FALSE}\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n```\n````\n\nYou may also want to include some code chunk options for your whole document using `opts_chunk$set()`, for example the options we specified in the `12-lab.Rmd` file:\n\n```` markdown\n`r ''````\n# Initialize code chunk options\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\")\n```\n````\n\n## Step 12: Add code for visuals\n\nThen you can add some code chunks to create the interactive visuals you want to include. I will add some code to create a couple of the **plotly** figures we created in lab. I am naming each plot but not outputting them here, because I will want to do that in independent code chunks as we will see in the next step.\n\n**Note**: Code chunks do not require names, but it can be useful to name them because they can be referenced elsewhere in the document. Note that if you do name them (like this one: `plot1`), you will need to be sure to give each an independent name because code chunks cannot share the same name.\n\n```{r plot1, class.source=\"code-r-small\"}\nsource(\"process_COVID_data.R\")\np1_scatter <- cv_states_today |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n\n# filter out \"District of Columbia\"\ncv_states_today_scatter <- cv_states_today |> filter(state!=\"District of Columbia\")\n\np2_scatter <- cv_states_today_scatter |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n```\n\n
\n\nNow, create 2 figures of your own, either using the code above, the code from last week's lab, or creating new figures based on the data created by the `process_COVID_data.R` code.\n\n

\n\n## Step 13: Display figures in tabs {.tabset}\n\nCreate tabs to display each figure. We do that using the following R Markdown language using the `{.tabset}` option:\n\n```` markdown\n\n## Showcasing plots {.tabset}\n\n### Tab 1\n\n`r ''````{r echo=FALSE}\np1_scatter\n```\n\n### Tab 2\n\n`r ''````{r echo=FALSE}\np2_scatter\n```\n\n## {-}\n````\n\nThe `{-}` closes the tabs. Tabs work at multiple levels of hierarchy: ##, ###, and ####.\n\n
\n\nThe output will look like this:\n\n### Figure 1\n\n```{r p1, echo=FALSE}\np1_scatter\n```\n\n### Figure 2\n\n```{r p2, echo=FALSE}\np2_scatter\n```\n\n## {.unnumbered}\n\n
\n\nKnit the page `index.Rmd` to check the output. It may take a bit longer now that we're also processing the data from the NYT. (Recall from lecture we can do that once per session by inputting the global option `opts_chunk$set(cache=TRUE)`).\n\n
\n\n## Step 14: Update website content\n\nYou've now made some edits to your website. To get the updates onto the live webpage, you need to re-render the site to create the HTML output from your `.Rmd` file edits, and push the updates to the remote GitHub repository:\n\n- In the R console: `rmarkdown::render_site()`\n\n- Preview contents by looking at the `index.html` file in a browser\n\n- Add and push changes to remote from your website project repository locally (e.g. `PM566-final-project`):\n\n``` shell\ngit add --all\ngit commit -m \"interactive visuals\"\ngit push\n```\n\nPreview your changes online at your website!\n\n**Note**: It may take up to 10 minutes for the content to render.\n\n
\n\n# Turn in your lab\n\nAdd the online link to your website in your `README.md` file, e.g.\n\n``` markdown\nThis is my PM566 lab12 website home. The website is online at https://ksiegmund.github.io/PM566-lab12-example/12-lab.html.\n```\n\nThen please submit your lab by adding a link to this week's lab issue: https://github.com/USCbiostats/PM566/issues/65 in your final commit.\n\n
\n\n# Extra credit: Creating a personal website\n\nNote that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n

\n\n# References\n\nUseful references for creating websites can be found here:\n\n- [R Markdown reference guide](https://bookdown.org/yihui/rmarkdown/)\n- [R Markdown basic website themes](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.)\n\nThis lab was informed by:\n\n- [Chapter 10.5: Websites in rmarkdown’s site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html) in [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/), Yihui Xie, J. J. Allaire, Garrett Grolemund\n- [Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor\n\n

\n"},"formats":{"html":{"identifier":{"display-name":"HTML","target-format":"html","base-format":"html"},"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":{"html_document":{"toc":true,"toc_float":true}},"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"ipynb-shell-interactivity":null,"plotly-connected":true,"engine":"knitr"},"render":{"keep-tex":false,"keep-typ":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"inline-includes":false,"preserve-yaml":false,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-min-runs":1,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[],"notebook-links":true},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["styles.css"],"toc":true,"output-file":"index.html"},"language":{"toc-title-document":"Table of contents","toc-title-website":"On this page","related-formats-title":"Other Formats","related-notebooks-title":"Notebooks","source-notebooks-prefix":"Source","other-links-title":"Other Links","code-links-title":"Code Links","launch-dev-container-title":"Launch Dev Container","launch-binder-title":"Launch Binder","article-notebook-label":"Article Notebook","notebook-preview-download":"Download Notebook","notebook-preview-download-src":"Download Source","notebook-preview-back":"Back to Article","manuscript-meca-bundle":"MECA Bundle","section-title-abstract":"Abstract","section-title-appendices":"Appendices","section-title-footnotes":"Footnotes","section-title-references":"References","section-title-reuse":"Reuse","section-title-copyright":"Copyright","section-title-citation":"Citation","appendix-attribution-cite-as":"For attribution, please cite this work as:","appendix-attribution-bibtex":"BibTeX citation:","appendix-view-license":"View License","title-block-author-single":"Author","title-block-author-plural":"Authors","title-block-affiliation-single":"Affiliation","title-block-affiliation-plural":"Affiliations","title-block-published":"Published","title-block-modified":"Modified","title-block-keywords":"Keywords","callout-tip-title":"Tip","callout-note-title":"Note","callout-warning-title":"Warning","callout-important-title":"Important","callout-caution-title":"Caution","code-summary":"Code","code-tools-menu-caption":"Code","code-tools-show-all-code":"Show All Code","code-tools-hide-all-code":"Hide All Code","code-tools-view-source":"View Source","code-tools-source-code":"Source Code","tools-share":"Share","tools-download":"Download","code-line":"Line","code-lines":"Lines","copy-button-tooltip":"Copy to Clipboard","copy-button-tooltip-success":"Copied!","repo-action-links-edit":"Edit this page","repo-action-links-source":"View source","repo-action-links-issue":"Report an issue","back-to-top":"Back to top","search-no-results-text":"No results","search-matching-documents-text":"matching documents","search-copy-link-title":"Copy link to search","search-hide-matches-text":"Hide additional matches","search-more-match-text":"more match in this document","search-more-matches-text":"more matches in this document","search-clear-button-title":"Clear","search-text-placeholder":"","search-detached-cancel-button-title":"Cancel","search-submit-button-title":"Submit","search-label":"Search","toggle-section":"Toggle section","toggle-sidebar":"Toggle sidebar navigation","toggle-dark-mode":"Toggle dark mode","toggle-reader-mode":"Toggle reader mode","toggle-navigation":"Toggle navigation","crossref-fig-title":"Figure","crossref-tbl-title":"Table","crossref-lst-title":"Listing","crossref-thm-title":"Theorem","crossref-lem-title":"Lemma","crossref-cor-title":"Corollary","crossref-prp-title":"Proposition","crossref-cnj-title":"Conjecture","crossref-def-title":"Definition","crossref-exm-title":"Example","crossref-exr-title":"Exercise","crossref-ch-prefix":"Chapter","crossref-apx-prefix":"Appendix","crossref-sec-prefix":"Section","crossref-eq-prefix":"Equation","crossref-lof-title":"List of Figures","crossref-lot-title":"List of Tables","crossref-lol-title":"List of Listings","environment-proof-title":"Proof","environment-remark-title":"Remark","environment-solution-title":"Solution","listing-page-order-by":"Order By","listing-page-order-by-default":"Default","listing-page-order-by-date-asc":"Oldest","listing-page-order-by-date-desc":"Newest","listing-page-order-by-number-desc":"High to Low","listing-page-order-by-number-asc":"Low to High","listing-page-field-date":"Date","listing-page-field-title":"Title","listing-page-field-description":"Description","listing-page-field-author":"Author","listing-page-field-filename":"File Name","listing-page-field-filemodified":"Modified","listing-page-field-subtitle":"Subtitle","listing-page-field-readingtime":"Reading Time","listing-page-field-wordcount":"Word Count","listing-page-field-categories":"Categories","listing-page-minutes-compact":"{0} min","listing-page-category-all":"All","listing-page-no-matches":"No matching items","listing-page-words":"{0} words","listing-page-filter":"Filter","draft":"Draft"},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.5.57","editor":"visual","theme":"cosmo","title":"Website","author":"Giuliet Kibler","description":"This is a website example for the PM 566 Lab 12"},"extensions":{"book":{"multiFile":true}}}},"projectFormats":["html"]} \ No newline at end of file +{"title":"Website","markdown":{"yaml":{"title":"Website","author":"Giuliet Kibler","description":"This is a website example for the PM 566 Lab 12","output":{"html_document":{"toc":true,"toc_float":true}}},"headingText":"INITALIZE CODE CHUNK OPTIONS","containsRefs":false,"markdown":"\n\n```{r setup, message=FALSE, echo=FALSE, warning=FALSE}\n\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\",\n class.source = \"code-r\")\n```\n\n```{css, echo = FALSE}\n.code-r { /* Code block */\n font-size: 15px;\n}\n\n.code-r-small { /* Code block */\n font-size: 10px;\n}\n```\n\n
\n\n# Objectives\n\nThe objective of today's lab is to create a project website using the **rmarkdown** package and deploy it using GitHub pages. We will include interactive visualizations on the website.\n\nFor this lab, we have created some initial content for you to work with as an example. The code is found at: https://github.com/ksiegmund/PM566-lab12-example.\n\nYour objective will be to create your own *project* website using this content as a reference.\n\nNote that if you want to create a *personal* website using the **rmarkdown** package hosted on GitHub Pages, you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n
\n\n------------------------------------------------------------------------\n\n# Workflow Overview\n\nBuilding websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.\n\nThere are two main steps for creating a personal website that will be hosted on GitHub:\n\nI. Local setup
II. GitHub setup\n\n
\n\n------------------------------------------------------------------------\n\n
\n\n# I. Local Setup\n\nThe basic workflow is as follows:\n\n1. Create a project directory and an R Project file (`.Rproj`)\n2. Create a `_site.yml` and `index.Rmd` file in your new directory\n3. Add additional page content if desired through other `.Rmd` files\n4. Edit these files to create content and manage layout (and knit to view)\n5. Add a style sheet (CSS) if desired\n6. Build website\n - Build tab \\> Build Website or\n - in the console: `rmarkdown::render_site()` This creates the output: `index.html`\n\n
\n\n## Step 0: Look at existing content\n\nClone the website repository at https://github.com/ksiegmund/PM566-lab12-example with example project website content into a NEW directory for the lab, e.g. `\"week12-lab\"`.\n\n**Note**: we are not initializing this as a git repository, we will do that in Step 1. We are just downloading the contents.\n\n``` shell\nmkdir ~/week12-lab\ngit clone https://github.com/ksiegmund/PM566-lab12-example\n```\n\nThen open the file `PM566-lab12-example.Rproj`. For MacOS you can do that through command line using\n\n``` shell\nopen PM566-lab12-example.Rproj\n```\n\nOtherwise, you can manually open the file from your directory.\n\nOnce you have it opened:\n\n- Check out the contents of this repository. What files does it contain?\n\n- Take a few moments to compare the contents of this repository to the final website at https://ksiegmund.github.io/PM566-lab12-example\n\n
\n\n## Step 1: Create project website directory\n\nCreate and go to the directory you want to create your website in, e.g. `\"PM566-final-project\"`, and initialize git.\n\nIn command line:\n\n``` shell\nmkdir ~/PM566-final-project\ncd ~/PM566-final-project\ngit init\n```\n\n
\n\n## Step 2: Create and add essential files *from scratch*\n\nRecall from lecture that the minimum requirements for an R Markdown website are:\n\n- `index.Rmd`: contains the content for the website homepage\n- `_site.yml`: contains metadata for the website\n\nCreate these essential files, as well as a `README.md`, add all to git queue, and commit to your website repository.\n\n**Note**: You can use the `echo` command in command line to initialize the files (in MacOS you can also use the `touch` command):\n\n``` shell\necho My PM566 Final Project Website > README.md\necho > _site.yml\necho > index.Rmd\ngit add --all\ngit commit -m \"initalizing repository\"\n```\n\n
\n\n## Step 3: Create `.Rproj` file\n\nCreate an R Project file using RStudio IDE:\n\nGo to RStudio IDE \\> File \\> New Project \\> Existing Directory\n\nThe R Project is useful because RStudio will recognize your project as a website, and provide appropriate build tools.\n\n**Note**: After creating the R Project and initial files, you *may* need to close the project and reopen it before R will recognize it as a website and show the appropriate build tools.\n\n
\n\n## Step 4: Edit the content\n\n### Step 4.1: Edit the YAML file\n\nEdit the `_site.yml` file to include the metadata, layout, and theme you want for your website.\n\nFirst let's take a look at a basic example of a `_site.yml` file for a website with one page:\n\n``` markdown\nname: \"my-website\"\nnavbar:\n title: \"My Website\"\n left:\n - text: \"Home\"\n href: index.html\noutput:\n html_document:\n theme: cosmo\n```\n\nThis is the minimum you need to include in your `_site.yml`.\n\nNow let's take a look at the `_site.yml` from the website repository you downloaded into `\"week12-lab\"`. It looks like this:\n\n``` markdown\nname: \"my-website\"\noutput_dir: \".\"\nnavbar:\n title: \"PM566 Final Project\"\n left:\n - text: \"Home\"\n href: index.html\n - text: \"Lab 12\"\n href: 12-lab.html\n right:\n - icon: fa-github fa-lg\n href: https://github.com/USCbiostats/PM566\n - text: \"PM566 Home\"\n href: https://uscbiostats.github.io/PM566/\noutput:\n html_document:\n theme: cosmo\n include:\n after_body: footer.html\n css: styles.css\n```\n\nInspecting this, and the output on the completed website at https://ksiegmund.github.io/PM566-lab12-example, how do you add links to internal webpages? How do you add links to external websites? How do you add icons?\n\nInternal webpage links are in the left section. External websites are in the right section. Aded icons are in the output section.\n\n**Note**: recall that the `output_dir` field indicates which directory to copy site content into (`\"_site\"` is the default if none is specified). It can be `\".\"` to keep all content within the root website directory alongside the source code.\n\n**Note**: Preview themes [here](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.) and play around with different options. Themes are easy to change even after you have added content.\n\nNow your task is to create a YAML for your website that includes only the essential components for your website. Either copy the content of the simple `_site.yml` into your own `_site.yml` file in your website directory `PM566-final-project`, or replicate it yourself line by line.\n\n**Note**: YAML language is very picky so make sure your content is formatted appropriately. If you are not sure, either look up the appropriate text in the [reference guide](https://bookdown.org/yihui/rmarkdown/), search google, or copy from a website you know works!\n\n
\n\n### Step 4.2: Edit internal `.Rmd` files\n\nEdit and create `.Rmd` files that contain your website content, which will produce the html pages of your website when you knit them.\n\nFor example, the `index.Rmd` could look like this:\n\n``` markdown\n---\ntitle: \"PM566 Final Project\"\nauthor: \"Your Name\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\nThis is my PM566 Final Project website.\n```\n\n
\n\nThe `toc` specifies whether there is a table of contents, and `toc_float` provides the option to float the table of contents to the left of the main document content. The floating table of contents will always be visible even when the document is scrolled. There are other options for how to display the `toc` in R Markdown HTML output which you can read about [here](https://bookdown.org/yihui/rmarkdown/html-document.html#table-of-contents).\n\n
\n\nAfter you are done with your `index.Rmd` file, knit it to check the output. Either click the `Knit` option in the toolbar or in the console type `rmarkdown::render_site(\"index.Rmd\")`. This will render the output into a file `index.html` which you can check out by opening the file in your directory:\n\n
\n\n## Step 5: Build website\n\nNow we have the content and layout setup, we can build the website! This can be done in two ways:\n\n- Build tab \\> Build Website\n\n in the console: `rmarkdown::render_site()`\n\n**rmarkdown** has created all the additional files you need for your website. Check them out in your directory. Most importantly, the `index.html` file provides a preview of the site, which you can look at in a browser as above:\n\n**Note**: As you make changes, you should re-render (or equivalently, re-build) the website. Recall from lecture that RStudio supports \"live preview\" of changes that you make to supporting files within your website (e.g., CSS, JavaScript, `.Rmd` partials, R scripts, and YAML config files), but this only rebuilds the active page. So once you are happy with the results of rendering you should make sure to rebuild the entire site using `rmarkdown::render_site()` to ensure that all pages inherit your changes.\n\n
\n\n### Styles\n\nYou will see that your R Markdown website comes with a style class, specified by your chosen theme specified in your YAML (or the default theme if not chosen). You can also modify your site using CSS style sheets. As discussed in lecture, styles can be modified in 3 ways: in-line with HTML, placing a style section in your HTML document, defining the CSS in an external file that is then referenced as a link in your HTML. Feel free to play around with the external style sheet `styles.css` that came with the example website.\n\n
\n\n### Commit!\n\nDon't be afraid of commitment! Add your changes as you go along.\n\n``` shell\ncd ~/PM566-final-project\ngit add --all\ngit commit -m \"Rendered website\"\n```\n\n------------------------------------------------------------------------\n\n# II. GitHub setup\n\n## Overview\n\n1. Create project on GitHub\n2. Initialize project on Git\n3. Push project files to the GitHub repository for your project\n4. Deploy the website by enabling GitHub pages for the repository\n\n
\n\n## Step 6: Create project on GitHub\n\nCreate an online (remote) repository for your project using GitHub
\n\n## Step 7: Initialize project with git\n\nIn command line:\n\nAdd the remote using `git remote add`\n\n``` shell\ngit remote add origin https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git\n```\n\nOptionally, use the commands `git status` and `git remote -v` to check out the status.\n\n
\n\n## Step 8: Push website content to remote\n\nPush the changes to the remote using `git push`\n\n``` shell\ngit push -u origin main\n```\n\n**Note** In 2020 Github changed its default repository name from \"master\" to \"main\", so if you're creating a new repository after 2020, it will named \"main\".\n\n
\n\n## Step 9: Deploy the website\n\nEnable GitHub pages for the repository by going to the repository's Settings \\> GitHub Pages. For the branch option (left button), you'll switch from the selected \"none\" to the \"main branch\" folder. For the folder option (right button) (/(root) vs. /docs), you'll choose /(root) if you included the parameter `output_dir: \".\"` in your YAML. Otherwise, the output directory will default to the /docs folder, and you should select that as the source folder. Then hit Save:\n\n
\n\n## Step 10: Preview content!\n\nIt's live! Go to the website at www.YOUR_GH_NAME.github.io/YOUR_PROJECT_NAME/ (the website should appear to you when you click the appropriate setting in GitHub Pages)\n\nWOO HOO!\n\n
\n\n------------------------------------------------------------------------\n\n# III. Add interactive visuals\n\nYour task here is to create 2 interactive visuals, using **plotly**, **leaflet**, **DT**, or anything else you have explored, and post them on your website at `index.Rmd`.\n\n
\n\n## Step 11: Source processing code\n\nFirst you can source any necessary code, meaning run it. For example, let's use the COVID-19 data from the NYT we explored in week 11. In the example repository you downloaded into `\"week12-lab\"`, we have provided the code `process_covid_data.R` which goes through the first steps we carried out in the lab of downloading and processing the data. To source this code, in your `index.Rmd` file, include a code chunk with the `source(process_COVID_data.R)` command:\n\n```{r load-data}\nsource(\"process_COVID_data.R\")\n```\n\n
\n\n**Note**: Make sure that you include the following libraries and formatting code at the beginning of your `index.Rmd` file, which will allow you to run the `source(\"process_COVID_data.R\")` code:\n\n```` markdown\n`r ''````{r setup, message=FALSE, echo=FALSE, warning=FALSE}\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n```\n````\n\nYou may also want to include some code chunk options for your whole document using `opts_chunk$set()`, for example the options we specified in the `12-lab.Rmd` file:\n\n```` markdown\n`r ''````\n# Initialize code chunk options\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\")\n```\n````\n\n## Step 12: Add code for visuals\n\nThen you can add some code chunks to create the interactive visuals you want to include. I will add some code to create a couple of the **plotly** figures we created in lab. I am naming each plot but not outputting them here, because I will want to do that in independent code chunks as we will see in the next step.\n\n**Note**: Code chunks do not require names, but it can be useful to name them because they can be referenced elsewhere in the document. Note that if you do name them (like this one: `plot1`), you will need to be sure to give each an independent name because code chunks cannot share the same name.\n\n```{r plot1, class.source=\"code-r-small\"}\nsource(\"process_COVID_data.R\")\np1_scatter <- cv_states_today |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n\n# filter out \"District of Columbia\"\ncv_states_today_scatter <- cv_states_today |> filter(state!=\"District of Columbia\")\n\np2_scatter <- cv_states_today_scatter |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n```\n\n
\n\nNow, create 2 figures of your own, either using the code above, the code from last week's lab, or creating new figures based on the data created by the `process_COVID_data.R` code.\n\n

\n\n## Step 13: Display figures in tabs {.tabset}\n\nCreate tabs to display each figure. We do that using the following R Markdown language using the `{.tabset}` option:\n\n```` markdown\n\n## Showcasing plots {.tabset}\n\n### Tab 1\n\n`r ''````{r echo=FALSE}\np1_scatter\n```\n\n### Tab 2\n\n`r ''````{r echo=FALSE}\np2_scatter\n```\n\n## {-}\n````\n\nThe `{-}` closes the tabs. Tabs work at multiple levels of hierarchy: ##, ###, and ####.\n\n
\n\nThe output will look like this:\n\n### Figure 1\n\n```{r p1, echo=FALSE}\np1_scatter\n```\n\n### Figure 2\n\n```{r p2, echo=FALSE}\np2_scatter\n```\n\n## {.unnumbered}\n\n
\n\nKnit the page `index.Rmd` to check the output. It may take a bit longer now that we're also processing the data from the NYT. (Recall from lecture we can do that once per session by inputting the global option `opts_chunk$set(cache=TRUE)`).\n\n
\n\n## Step 14: Update website content\n\nYou've now made some edits to your website. To get the updates onto the live webpage, you need to re-render the site to create the HTML output from your `.Rmd` file edits, and push the updates to the remote GitHub repository:\n\n- In the R console: `rmarkdown::render_site()`\n\n- Preview contents by looking at the `index.html` file in a browser\n\n- Add and push changes to remote from your website project repository locally (e.g. `PM566-final-project`):\n\n``` shell\ngit add --all\ngit commit -m \"interactive visuals\"\ngit push\n```\n\nPreview your changes online at your website!\n\n**Note**: It may take up to 10 minutes for the content to render.\n\n
\n\n# Turn in your lab\n\nAdd the online link to your website in your `README.md` file, e.g.\n\n``` markdown\nThis is my PM566 lab12 website home. The website is online at https://ksiegmund.github.io/PM566-lab12-example/12-lab.html.\n```\n\nThen please submit your lab by adding a link to this week's lab issue: https://github.com/USCbiostats/PM566/issues/65 in your final commit.\n\n
\n\n# Extra credit: Creating a personal website\n\nNote that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\nI will do this seperately.\n\n

\n\n# References\n\nUseful references for creating websites can be found here:\n\n- [R Markdown reference guide](https://bookdown.org/yihui/rmarkdown/)\n- [R Markdown basic website themes](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.)\n\nThis lab was informed by:\n\n- [Chapter 10.5: Websites in rmarkdown’s site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html) in [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/), Yihui Xie, J. J. Allaire, Garrett Grolemund\n- [Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor\n\n

\n","srcMarkdownNoYaml":"\n\n```{r setup, message=FALSE, echo=FALSE, warning=FALSE}\n\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n\n# INITALIZE CODE CHUNK OPTIONS\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\",\n class.source = \"code-r\")\n```\n\n```{css, echo = FALSE}\n.code-r { /* Code block */\n font-size: 15px;\n}\n\n.code-r-small { /* Code block */\n font-size: 10px;\n}\n```\n\n
\n\n# Objectives\n\nThe objective of today's lab is to create a project website using the **rmarkdown** package and deploy it using GitHub pages. We will include interactive visualizations on the website.\n\nFor this lab, we have created some initial content for you to work with as an example. The code is found at: https://github.com/ksiegmund/PM566-lab12-example.\n\nYour objective will be to create your own *project* website using this content as a reference.\n\nNote that if you want to create a *personal* website using the **rmarkdown** package hosted on GitHub Pages, you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\n
\n\n------------------------------------------------------------------------\n\n# Workflow Overview\n\nBuilding websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.\n\nThere are two main steps for creating a personal website that will be hosted on GitHub:\n\nI. Local setup
II. GitHub setup\n\n
\n\n------------------------------------------------------------------------\n\n
\n\n# I. Local Setup\n\nThe basic workflow is as follows:\n\n1. Create a project directory and an R Project file (`.Rproj`)\n2. Create a `_site.yml` and `index.Rmd` file in your new directory\n3. Add additional page content if desired through other `.Rmd` files\n4. Edit these files to create content and manage layout (and knit to view)\n5. Add a style sheet (CSS) if desired\n6. Build website\n - Build tab \\> Build Website or\n - in the console: `rmarkdown::render_site()` This creates the output: `index.html`\n\n
\n\n## Step 0: Look at existing content\n\nClone the website repository at https://github.com/ksiegmund/PM566-lab12-example with example project website content into a NEW directory for the lab, e.g. `\"week12-lab\"`.\n\n**Note**: we are not initializing this as a git repository, we will do that in Step 1. We are just downloading the contents.\n\n``` shell\nmkdir ~/week12-lab\ngit clone https://github.com/ksiegmund/PM566-lab12-example\n```\n\nThen open the file `PM566-lab12-example.Rproj`. For MacOS you can do that through command line using\n\n``` shell\nopen PM566-lab12-example.Rproj\n```\n\nOtherwise, you can manually open the file from your directory.\n\nOnce you have it opened:\n\n- Check out the contents of this repository. What files does it contain?\n\n- Take a few moments to compare the contents of this repository to the final website at https://ksiegmund.github.io/PM566-lab12-example\n\n
\n\n## Step 1: Create project website directory\n\nCreate and go to the directory you want to create your website in, e.g. `\"PM566-final-project\"`, and initialize git.\n\nIn command line:\n\n``` shell\nmkdir ~/PM566-final-project\ncd ~/PM566-final-project\ngit init\n```\n\n
\n\n## Step 2: Create and add essential files *from scratch*\n\nRecall from lecture that the minimum requirements for an R Markdown website are:\n\n- `index.Rmd`: contains the content for the website homepage\n- `_site.yml`: contains metadata for the website\n\nCreate these essential files, as well as a `README.md`, add all to git queue, and commit to your website repository.\n\n**Note**: You can use the `echo` command in command line to initialize the files (in MacOS you can also use the `touch` command):\n\n``` shell\necho My PM566 Final Project Website > README.md\necho > _site.yml\necho > index.Rmd\ngit add --all\ngit commit -m \"initalizing repository\"\n```\n\n
\n\n## Step 3: Create `.Rproj` file\n\nCreate an R Project file using RStudio IDE:\n\nGo to RStudio IDE \\> File \\> New Project \\> Existing Directory\n\nThe R Project is useful because RStudio will recognize your project as a website, and provide appropriate build tools.\n\n**Note**: After creating the R Project and initial files, you *may* need to close the project and reopen it before R will recognize it as a website and show the appropriate build tools.\n\n
\n\n## Step 4: Edit the content\n\n### Step 4.1: Edit the YAML file\n\nEdit the `_site.yml` file to include the metadata, layout, and theme you want for your website.\n\nFirst let's take a look at a basic example of a `_site.yml` file for a website with one page:\n\n``` markdown\nname: \"my-website\"\nnavbar:\n title: \"My Website\"\n left:\n - text: \"Home\"\n href: index.html\noutput:\n html_document:\n theme: cosmo\n```\n\nThis is the minimum you need to include in your `_site.yml`.\n\nNow let's take a look at the `_site.yml` from the website repository you downloaded into `\"week12-lab\"`. It looks like this:\n\n``` markdown\nname: \"my-website\"\noutput_dir: \".\"\nnavbar:\n title: \"PM566 Final Project\"\n left:\n - text: \"Home\"\n href: index.html\n - text: \"Lab 12\"\n href: 12-lab.html\n right:\n - icon: fa-github fa-lg\n href: https://github.com/USCbiostats/PM566\n - text: \"PM566 Home\"\n href: https://uscbiostats.github.io/PM566/\noutput:\n html_document:\n theme: cosmo\n include:\n after_body: footer.html\n css: styles.css\n```\n\nInspecting this, and the output on the completed website at https://ksiegmund.github.io/PM566-lab12-example, how do you add links to internal webpages? How do you add links to external websites? How do you add icons?\n\nInternal webpage links are in the left section. External websites are in the right section. Aded icons are in the output section.\n\n**Note**: recall that the `output_dir` field indicates which directory to copy site content into (`\"_site\"` is the default if none is specified). It can be `\".\"` to keep all content within the root website directory alongside the source code.\n\n**Note**: Preview themes [here](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.) and play around with different options. Themes are easy to change even after you have added content.\n\nNow your task is to create a YAML for your website that includes only the essential components for your website. Either copy the content of the simple `_site.yml` into your own `_site.yml` file in your website directory `PM566-final-project`, or replicate it yourself line by line.\n\n**Note**: YAML language is very picky so make sure your content is formatted appropriately. If you are not sure, either look up the appropriate text in the [reference guide](https://bookdown.org/yihui/rmarkdown/), search google, or copy from a website you know works!\n\n
\n\n### Step 4.2: Edit internal `.Rmd` files\n\nEdit and create `.Rmd` files that contain your website content, which will produce the html pages of your website when you knit them.\n\nFor example, the `index.Rmd` could look like this:\n\n``` markdown\n---\ntitle: \"PM566 Final Project\"\nauthor: \"Your Name\"\noutput: \n html_document:\n toc: TRUE\n toc_float: TRUE\n---\n\nThis is my PM566 Final Project website.\n```\n\n
\n\nThe `toc` specifies whether there is a table of contents, and `toc_float` provides the option to float the table of contents to the left of the main document content. The floating table of contents will always be visible even when the document is scrolled. There are other options for how to display the `toc` in R Markdown HTML output which you can read about [here](https://bookdown.org/yihui/rmarkdown/html-document.html#table-of-contents).\n\n
\n\nAfter you are done with your `index.Rmd` file, knit it to check the output. Either click the `Knit` option in the toolbar or in the console type `rmarkdown::render_site(\"index.Rmd\")`. This will render the output into a file `index.html` which you can check out by opening the file in your directory:\n\n
\n\n## Step 5: Build website\n\nNow we have the content and layout setup, we can build the website! This can be done in two ways:\n\n- Build tab \\> Build Website\n\n in the console: `rmarkdown::render_site()`\n\n**rmarkdown** has created all the additional files you need for your website. Check them out in your directory. Most importantly, the `index.html` file provides a preview of the site, which you can look at in a browser as above:\n\n**Note**: As you make changes, you should re-render (or equivalently, re-build) the website. Recall from lecture that RStudio supports \"live preview\" of changes that you make to supporting files within your website (e.g., CSS, JavaScript, `.Rmd` partials, R scripts, and YAML config files), but this only rebuilds the active page. So once you are happy with the results of rendering you should make sure to rebuild the entire site using `rmarkdown::render_site()` to ensure that all pages inherit your changes.\n\n
\n\n### Styles\n\nYou will see that your R Markdown website comes with a style class, specified by your chosen theme specified in your YAML (or the default theme if not chosen). You can also modify your site using CSS style sheets. As discussed in lecture, styles can be modified in 3 ways: in-line with HTML, placing a style section in your HTML document, defining the CSS in an external file that is then referenced as a link in your HTML. Feel free to play around with the external style sheet `styles.css` that came with the example website.\n\n
\n\n### Commit!\n\nDon't be afraid of commitment! Add your changes as you go along.\n\n``` shell\ncd ~/PM566-final-project\ngit add --all\ngit commit -m \"Rendered website\"\n```\n\n------------------------------------------------------------------------\n\n# II. GitHub setup\n\n## Overview\n\n1. Create project on GitHub\n2. Initialize project on Git\n3. Push project files to the GitHub repository for your project\n4. Deploy the website by enabling GitHub pages for the repository\n\n
\n\n## Step 6: Create project on GitHub\n\nCreate an online (remote) repository for your project using GitHub
\n\n## Step 7: Initialize project with git\n\nIn command line:\n\nAdd the remote using `git remote add`\n\n``` shell\ngit remote add origin https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git\n```\n\nOptionally, use the commands `git status` and `git remote -v` to check out the status.\n\n
\n\n## Step 8: Push website content to remote\n\nPush the changes to the remote using `git push`\n\n``` shell\ngit push -u origin main\n```\n\n**Note** In 2020 Github changed its default repository name from \"master\" to \"main\", so if you're creating a new repository after 2020, it will named \"main\".\n\n
\n\n## Step 9: Deploy the website\n\nEnable GitHub pages for the repository by going to the repository's Settings \\> GitHub Pages. For the branch option (left button), you'll switch from the selected \"none\" to the \"main branch\" folder. For the folder option (right button) (/(root) vs. /docs), you'll choose /(root) if you included the parameter `output_dir: \".\"` in your YAML. Otherwise, the output directory will default to the /docs folder, and you should select that as the source folder. Then hit Save:\n\n
\n\n## Step 10: Preview content!\n\nIt's live! Go to the website at www.YOUR_GH_NAME.github.io/YOUR_PROJECT_NAME/ (the website should appear to you when you click the appropriate setting in GitHub Pages)\n\nWOO HOO!\n\n
\n\n------------------------------------------------------------------------\n\n# III. Add interactive visuals\n\nYour task here is to create 2 interactive visuals, using **plotly**, **leaflet**, **DT**, or anything else you have explored, and post them on your website at `index.Rmd`.\n\n
\n\n## Step 11: Source processing code\n\nFirst you can source any necessary code, meaning run it. For example, let's use the COVID-19 data from the NYT we explored in week 11. In the example repository you downloaded into `\"week12-lab\"`, we have provided the code `process_covid_data.R` which goes through the first steps we carried out in the lab of downloading and processing the data. To source this code, in your `index.Rmd` file, include a code chunk with the `source(process_COVID_data.R)` command:\n\n```{r load-data}\nsource(\"process_COVID_data.R\")\n```\n\n
\n\n**Note**: Make sure that you include the following libraries and formatting code at the beginning of your `index.Rmd` file, which will allow you to run the `source(\"process_COVID_data.R\")` code:\n\n```` markdown\n`r ''````{r setup, message=FALSE, echo=FALSE, warning=FALSE}\nlibrary(data.table)\nlibrary(tidyverse)\nlibrary(dplyr)\nlibrary(plotly)\nlibrary(DT)\nlibrary(knitr)\n```\n````\n\nYou may also want to include some code chunk options for your whole document using `opts_chunk$set()`, for example the options we specified in the `12-lab.Rmd` file:\n\n```` markdown\n`r ''````\n# Initialize code chunk options\nopts_chunk$set(\n warning = FALSE,\n message = FALSE,\n eval=TRUE,\n echo = TRUE,\n cache = FALSE,\n fig.width = 7, \n fig.align = 'center',\n fig.asp = 0.618,\n out.width = \"700px\")\n```\n````\n\n## Step 12: Add code for visuals\n\nThen you can add some code chunks to create the interactive visuals you want to include. I will add some code to create a couple of the **plotly** figures we created in lab. I am naming each plot but not outputting them here, because I will want to do that in independent code chunks as we will see in the next step.\n\n**Note**: Code chunks do not require names, but it can be useful to name them because they can be referenced elsewhere in the document. Note that if you do name them (like this one: `plot1`), you will need to be sure to give each an independent name because code chunks cannot share the same name.\n\n```{r plot1, class.source=\"code-r-small\"}\nsource(\"process_COVID_data.R\")\np1_scatter <- cv_states_today |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n\n# filter out \"District of Columbia\"\ncv_states_today_scatter <- cv_states_today |> filter(state!=\"District of Columbia\")\n\np2_scatter <- cv_states_today_scatter |> \n plot_ly(x = ~pop_density, y = ~deathsper100k,\n type = 'scatter', mode = 'markers', color = ~state,\n size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5),\n hoverinfo = 'text',\n text = ~paste( paste(state, \":\", sep=\"\"), paste(\" Cases per 100k: \", per100k, sep=\"\") , paste(\" Deaths per 100k: \",\n deathsper100k, sep=\"\"), sep = \"
\")) |>\n layout(title = \"Population-normalized COVID-19 deaths vs. population density\",\n yaxis = list(title = \"Deaths per 100k\"), xaxis = list(title = \"Population Density\"),\n hovermode = \"compare\")\n```\n\n
\n\nNow, create 2 figures of your own, either using the code above, the code from last week's lab, or creating new figures based on the data created by the `process_COVID_data.R` code.\n\n

\n\n## Step 13: Display figures in tabs {.tabset}\n\nCreate tabs to display each figure. We do that using the following R Markdown language using the `{.tabset}` option:\n\n```` markdown\n\n## Showcasing plots {.tabset}\n\n### Tab 1\n\n`r ''````{r echo=FALSE}\np1_scatter\n```\n\n### Tab 2\n\n`r ''````{r echo=FALSE}\np2_scatter\n```\n\n## {-}\n````\n\nThe `{-}` closes the tabs. Tabs work at multiple levels of hierarchy: ##, ###, and ####.\n\n
\n\nThe output will look like this:\n\n### Figure 1\n\n```{r p1, echo=FALSE}\np1_scatter\n```\n\n### Figure 2\n\n```{r p2, echo=FALSE}\np2_scatter\n```\n\n## {.unnumbered}\n\n
\n\nKnit the page `index.Rmd` to check the output. It may take a bit longer now that we're also processing the data from the NYT. (Recall from lecture we can do that once per session by inputting the global option `opts_chunk$set(cache=TRUE)`).\n\n
\n\n## Step 14: Update website content\n\nYou've now made some edits to your website. To get the updates onto the live webpage, you need to re-render the site to create the HTML output from your `.Rmd` file edits, and push the updates to the remote GitHub repository:\n\n- In the R console: `rmarkdown::render_site()`\n\n- Preview contents by looking at the `index.html` file in a browser\n\n- Add and push changes to remote from your website project repository locally (e.g. `PM566-final-project`):\n\n``` shell\ngit add --all\ngit commit -m \"interactive visuals\"\ngit push\n```\n\nPreview your changes online at your website!\n\n**Note**: It may take up to 10 minutes for the content to render.\n\n
\n\n# Turn in your lab\n\nAdd the online link to your website in your `README.md` file, e.g.\n\n``` markdown\nThis is my PM566 lab12 website home. The website is online at https://ksiegmund.github.io/PM566-lab12-example/12-lab.html.\n```\n\nThen please submit your lab by adding a link to this week's lab issue: https://github.com/USCbiostats/PM566/issues/65 in your final commit.\n\n
\n\n# Extra credit: Creating a personal website\n\nNote that if you want to create a *personal* website you can do so following the same instructions, with the one difference that the repository you create should be called `YOUR_GH_NAME.github.io`.\n\nI will do this seperately.\n\n

\n\n# References\n\nUseful references for creating websites can be found here:\n\n- [R Markdown reference guide](https://bookdown.org/yihui/rmarkdown/)\n- [R Markdown basic website themes](https://www.datadreaming.org/post/r-markdown-theme-gallery/#:~:text=There%20are%2012%20additional%20themes,your%20theme%20from%20the%20default%20.)\n\nThis lab was informed by:\n\n- [Chapter 10.5: Websites in rmarkdown’s site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html) in [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/), Yihui Xie, J. J. Allaire, Garrett Grolemund\n- [Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor\n\n

\n"},"formats":{"html":{"identifier":{"display-name":"HTML","target-format":"html","base-format":"html"},"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":{"html_document":{"toc":true,"toc_float":true}},"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"ipynb-shell-interactivity":null,"plotly-connected":true,"engine":"knitr"},"render":{"keep-tex":false,"keep-typ":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"inline-includes":false,"preserve-yaml":false,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-min-runs":1,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[],"notebook-links":true},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["styles.css"],"toc":true,"output-file":"index.html"},"language":{"toc-title-document":"Table of contents","toc-title-website":"On this page","related-formats-title":"Other Formats","related-notebooks-title":"Notebooks","source-notebooks-prefix":"Source","other-links-title":"Other Links","code-links-title":"Code Links","launch-dev-container-title":"Launch Dev Container","launch-binder-title":"Launch Binder","article-notebook-label":"Article Notebook","notebook-preview-download":"Download Notebook","notebook-preview-download-src":"Download Source","notebook-preview-back":"Back to Article","manuscript-meca-bundle":"MECA Bundle","section-title-abstract":"Abstract","section-title-appendices":"Appendices","section-title-footnotes":"Footnotes","section-title-references":"References","section-title-reuse":"Reuse","section-title-copyright":"Copyright","section-title-citation":"Citation","appendix-attribution-cite-as":"For attribution, please cite this work as:","appendix-attribution-bibtex":"BibTeX citation:","appendix-view-license":"View License","title-block-author-single":"Author","title-block-author-plural":"Authors","title-block-affiliation-single":"Affiliation","title-block-affiliation-plural":"Affiliations","title-block-published":"Published","title-block-modified":"Modified","title-block-keywords":"Keywords","callout-tip-title":"Tip","callout-note-title":"Note","callout-warning-title":"Warning","callout-important-title":"Important","callout-caution-title":"Caution","code-summary":"Code","code-tools-menu-caption":"Code","code-tools-show-all-code":"Show All Code","code-tools-hide-all-code":"Hide All Code","code-tools-view-source":"View Source","code-tools-source-code":"Source Code","tools-share":"Share","tools-download":"Download","code-line":"Line","code-lines":"Lines","copy-button-tooltip":"Copy to Clipboard","copy-button-tooltip-success":"Copied!","repo-action-links-edit":"Edit this page","repo-action-links-source":"View source","repo-action-links-issue":"Report an issue","back-to-top":"Back to top","search-no-results-text":"No results","search-matching-documents-text":"matching documents","search-copy-link-title":"Copy link to search","search-hide-matches-text":"Hide additional matches","search-more-match-text":"more match in this document","search-more-matches-text":"more matches in this document","search-clear-button-title":"Clear","search-text-placeholder":"","search-detached-cancel-button-title":"Cancel","search-submit-button-title":"Submit","search-label":"Search","toggle-section":"Toggle section","toggle-sidebar":"Toggle sidebar navigation","toggle-dark-mode":"Toggle dark mode","toggle-reader-mode":"Toggle reader mode","toggle-navigation":"Toggle navigation","crossref-fig-title":"Figure","crossref-tbl-title":"Table","crossref-lst-title":"Listing","crossref-thm-title":"Theorem","crossref-lem-title":"Lemma","crossref-cor-title":"Corollary","crossref-prp-title":"Proposition","crossref-cnj-title":"Conjecture","crossref-def-title":"Definition","crossref-exm-title":"Example","crossref-exr-title":"Exercise","crossref-ch-prefix":"Chapter","crossref-apx-prefix":"Appendix","crossref-sec-prefix":"Section","crossref-eq-prefix":"Equation","crossref-lof-title":"List of Figures","crossref-lot-title":"List of Tables","crossref-lol-title":"List of Listings","environment-proof-title":"Proof","environment-remark-title":"Remark","environment-solution-title":"Solution","listing-page-order-by":"Order By","listing-page-order-by-default":"Default","listing-page-order-by-date-asc":"Oldest","listing-page-order-by-date-desc":"Newest","listing-page-order-by-number-desc":"High to Low","listing-page-order-by-number-asc":"Low to High","listing-page-field-date":"Date","listing-page-field-title":"Title","listing-page-field-description":"Description","listing-page-field-author":"Author","listing-page-field-filename":"File Name","listing-page-field-filemodified":"Modified","listing-page-field-subtitle":"Subtitle","listing-page-field-readingtime":"Reading Time","listing-page-field-wordcount":"Word Count","listing-page-field-categories":"Categories","listing-page-minutes-compact":"{0} min","listing-page-category-all":"All","listing-page-no-matches":"No matching items","listing-page-words":"{0} words","listing-page-filter":"Filter","draft":"Draft"},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.5.57","editor":"visual","theme":"cosmo","title":"Website","author":"Giuliet Kibler","description":"This is a website example for the PM 566 Lab 12"},"extensions":{"book":{"multiFile":true}}}},"projectFormats":["html"]} \ No newline at end of file diff --git a/.quarto/preview/lock b/.quarto/preview/lock index a23152d..0b63aa3 100644 --- a/.quarto/preview/lock +++ b/.quarto/preview/lock @@ -1 +1 @@ -20589 \ No newline at end of file +21020 \ No newline at end of file diff --git a/.quarto/xref/9ffdf0ea b/.quarto/xref/9ffdf0ea index 208374b..7df77d5 100644 --- a/.quarto/xref/9ffdf0ea +++ b/.quarto/xref/9ffdf0ea @@ -1 +1 @@ -{"entries":[],"headings":[]} \ No newline at end of file +{"headings":[],"entries":[]} \ No newline at end of file diff --git a/_quarto.yml b/_quarto.yml index 8b86cf7..7cd30b5 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -7,7 +7,7 @@ website: navbar: left: - href: index.qmd - text: Home + text: Lab 12 - about.qmd format: diff --git a/about.qmd b/about.qmd index 0c6f4a2..ce1972a 100644 --- a/about.qmd +++ b/about.qmd @@ -4,6 +4,4 @@ title: "About" About this site -```{r} -1 + 1 -``` +This is PM 566 Lab 12's website diff --git a/docs/about.html b/docs/about.html index f7f5b05..3b8ea32 100644 --- a/docs/about.html +++ b/docs/about.html @@ -20,40 +20,6 @@ margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ vertical-align: middle; } -/* CSS for syntax highlighting */ -pre > code.sourceCode { white-space: pre; position: relative; } -pre > code.sourceCode > span { line-height: 1.25; } -pre > code.sourceCode > span:empty { height: 1.2em; } -.sourceCode { overflow: visible; } -code.sourceCode > span { color: inherit; text-decoration: inherit; } -div.sourceCode { margin: 1em 0; } -pre.sourceCode { margin: 0; } -@media screen { -div.sourceCode { overflow: auto; } -} -@media print { -pre > code.sourceCode { white-space: pre-wrap; } -pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } -} -pre.numberSource code - { counter-reset: source-line 0; } -pre.numberSource code > span - { position: relative; left: -4em; counter-increment: source-line; } -pre.numberSource code > span > a:first-child::before - { content: counter(source-line); - position: relative; left: -1em; text-align: right; vertical-align: baseline; - border: none; display: inline-block; - -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; - -ms-user-select: none; user-select: none; - padding: 0 4px; width: 4em; - } -pre.numberSource { margin-left: 3em; padding-left: 4px; } -div.sourceCode - { } -@media screen { -pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } -} @@ -124,7 +90,7 @@