diff --git a/_quarto.yml b/_quarto.yml index 16d95d2..5a00057 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -3,27 +3,25 @@ project: output-dir: docs website: - title: "OTTR Template Website" + title: "Data Visualization Essentials" navbar: left: - text: "" href: index.qmd icon: fa-home - - text: 1. Setup - href: setup.qmd - - text: 2. Hosting - href: hosting.qmd - - text: Editing - href: editing.qmd - - text: 3. Style - href: style.qmd - - text: 4. Git Actions - href: git_actions.qmd - - text: More ottr docs - href: https://www.ottrproject.org/ + - text: Slides and Resources + href: background.qmd + - text: Exploring Plot Types + href: plots.qmd + - text: Discussing Common Challenges + href: discussion.qmd + - text: Activity + href: activity.qmd + format: html: theme: cosmo css: styles.css toc: true + toc-location: left diff --git a/activity.qmd b/activity.qmd new file mode 100644 index 0000000..7822f95 --- /dev/null +++ b/activity.qmd @@ -0,0 +1,11 @@ +# Data + +Link to data (or explain how to get it) + +# Description of data + +Provide a brief description of the data + +# Activity description + +What are we going to do in this activity diff --git a/background.qmd b/background.qmd new file mode 100644 index 0000000..5b372d5 --- /dev/null +++ b/background.qmd @@ -0,0 +1,11 @@ +# Slides + +Add slides link + +# Pre-requisites (if any) + +List any pre-requisites for activities + +# Other Resources + +Add other resources here diff --git a/contact.qmd b/contact.qmd deleted file mode 100644 index fc4eedc..0000000 --- a/contact.qmd +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: "**Contact Us**" -output: - html_document ---- - - - -If you have questions please contact: - -* Carrie Wright (cwrigh60@jhu.edu) diff --git a/discussion.qmd b/discussion.qmd new file mode 100644 index 0000000..abd57a3 --- /dev/null +++ b/discussion.qmd @@ -0,0 +1,7 @@ +# Discussion prompt + +Add the discussion prompt here + +# Include some examples? + +Possibly provide some examples of challenges to get the conversation started diff --git a/editing.qmd b/editing.qmd deleted file mode 100644 index e65c8f5..0000000 --- a/editing.qmd +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: "Editing" -output: html_document ---- - -Now that your website is alive and hosted, how do you start customizing it to have your content? - -If you already know how to file pull requests, feel free to start making edits as you see fit using some of the structure points we've noted below. - -If you are not familiar with pull requests, [read this guide to get started](https://www.ottrproject.org/editing_website.html). - - -## Title - -To change the title of the website, modify the `name` line of the `_site.yml` file. - -```{r, fig.align='center', fig.alt= "Change title", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/title.png") -``` - -## Modifying pages - -Pages are specified in the navigation bar by the lines that say `-text:` and `href:` . - -The `-text:` specifies what the navigation bar will say for that tab. - -The `href:` specifies which rendered Rmd file to use for that tab, it needs to be the html version of this file. - -The tabs are specified to be aligned to the left (as specified by the `left` on line 5). - -The tabs will appear in the order listed. - -You can also add icons to these tabs using [font awesome](https://fontawesome.com/) as is shown for the contact page on line 18. - -```{r, fig.align='center', fig.alt= "Page modification", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/page_modification.png") -``` - -Other icon options include [Bootstap glyphicons](https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp) or [ion icons](https://ionic.io/ionicons). Note that **not all icons will work** because they are not all set up with the packages that make rendering the website possible, so this may require some trial and error. Here is an example of how you would use all of these icon options to add more: - -```{r, fig.align='center', fig.alt= "more icon options", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/more_icons.png") -``` - - -This would result in a navigation bar with these icons: - -```{r, fig.align='center', fig.alt= "more icon options", echo = FALSE, out.width="70%"} -knitr::include_graphics("resources/images/more_icons_result.png") -``` diff --git a/git_actions.qmd b/git_actions.qmd deleted file mode 100644 index f53e97d..0000000 --- a/git_actions.qmd +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "Git Actions" -output: html_document ---- - - -We have set up several checks for website content edits. - -When you create a pull request, you will see something like this if everything is successful. You can click on the `preview of website here` link to see a preview. Please note that some features may not be possible to see in the preview. For example, icons may only show up as a box. - -```{r, fig.align='center', fig.alt= "pull request checks", echo = FALSE, out.width="70%"} -knitr::include_graphics("resources/images/checks.png") -``` - -## Rendering Action - -If the rendering action fails, you will see something like this: - -```{r, fig.align='center', fig.alt= "render issue pull request image", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/render_fail.png") -``` - -If you click on where it says `Details` on the far right, you will be taken to more information about what may have gone wrong. - -```{r, fig.align='center', fig.alt= "render issue pull request image", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/render_fail2.png") -``` - - -For example, we can see that an R object was not found in one of the files. You could identify which file by scrolling up. - -```{r, fig.align='center', fig.alt= "render issue pull request image", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/render_fail_details.png") -``` - -## Spelling and Style Action - -You may find that you have spelling errors if you get the following message from your pull request (PR): - -```{r, fig.align='center', fig.alt= "spelling issue pull request image", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/spelling.png") -``` - -If this happens, click the `Download the errors here.` link. This will take you to a table with words that the check thought were misspelled, as well as what file they occurred in and the lines in that file. - -Add words that are **not** actually misspelled to the `dictionary.txt` file located in the `resources` directory. It's a good idea to try to keep this in alphabetical order. - -For words that are indeed misspelled, fix the errors and push your changes to your pull request. - -You should then see that your pull request has a different message that tells you that you have no spelling errors. - -## URL Check - -You may find that you have broken URLs. If so, you will get this message when you create a Pull Request. - -```{r, fig.align='center', fig.alt= "URL issue pull request image", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/url_check.png") -``` -You can click on the `Download the errors here` link to see a document with a list of broken URLs and what files they are located in, like this: - -```{r, fig.align='center', fig.alt= "broken url list", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/urls.png") -``` - -Here we can see that there are two URLs that are broken in the `git_actions.Rmd` file. - -## Completing a Pull Request - -Once all the Git Action checks pass, you can merge your pull request to your main branch for your website. - -```{r, fig.align='center', fig.alt= "finishing a pull request", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/checks2.png") -``` - -If you are only working on this yourself without others to review your pull request, you can click the `Merge without waiting for requirements to be met` box, so that you can click the `Merge pull request` button. - - diff --git a/hosting.qmd b/hosting.qmd deleted file mode 100644 index aedd72b..0000000 --- a/hosting.qmd +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: "Hosting" -output: html_document ---- - -## Hosting Setup - -To host your website on GitHub, you will need to go to settings and click on the pages tab. - -Again to go to settings click on the far upper right corner: - -```{r, fig.align='center', fig.alt= "Clicking on settings", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/settings.png") -``` - -Click on Pages: - -```{r, fig.align='center', fig.alt= "Clicking on pages", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/pages.png") -``` - -Select the main branch and the root directory and press save. Be sure to also check the "Enforce HTTPS" box. Afterwards your repository should look like this: - -```{r, fig.align='center', fig.alt= "setup website hosting", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/website_setup.png") -``` - -Note that in general, your website will be published to a URL like this: - -``` -https://username.github.io/repository_name/ -``` -If you have multiple websites published underneath your username or organization, this should still publish fine. This website will be a subdirectory that is named whatever you have named this repository. - -If you've published this website underneath a GitHub organization (not your own personal GitHub profile), then in the above example URL the organization name will be where we've put `username`. - -For more about GitHub pages (including how to personalize your URL) see the GitHub pages documentation here: https://pages.github.com/ - -Sometimes, GitHub page publishing will take a bit of time. You can click on the `Actions` tab in your repository and see if there is a `pages and deployment` action currently running (indicated by a yellow circle next to the action name). If this is the case, you will need to wait until this becomes a green check mark before your GitHub page will be published. diff --git a/index.qmd b/index.qmd index 084f365..4aea78d 100644 --- a/index.qmd +++ b/index.qmd @@ -1,36 +1,31 @@ --- -title: "**Website Name**" +title: "**DeCoDE Institute Summer 2026: Data Visualization Essentials**" output: html_document --- - - ### **About** -This website was created with the [OTTR_Quarto website template](https://github.com/ottrproject/OTTR_Quarto). - -This enables simpler creation of websites that have automated checks for broken URLs and spelling errors, as well as automated rendering of all html files. No need to worry about git conflicts for html files! See [ottrproject.org](https://www.ottrproject.org/) for more docs and details. - -Here is how you can include images in your website pages (this one is saved in `resources/images` to keep things tidy: - -```{r, fig.align='center', fig.alt= "Example image", echo = FALSE, out.width="30%"} -knitr::include_graphics("resources/images/example_image.png") -``` - - - -We will go through the following: - -1. How to set up your repository to enable the GitHub actions of the template. (Setup tab) -2. How to host your website using GitHub (Hosting tab) -3. How to modify your website structure (Structure tab) -4. How to change your website style (Style tab) -5. More information about GitHub Actions (Git Actions tab) - -Click on each tab to learn more. - - +This workshop introduces key considerations for creating effective data visualizations, including how to choose appropriate plots and communicate insights clearly. Participants will learn core design principles, accessibility practices, and strategies to avoid misleading or distorted visuals. Through examples attendees will develop skills to evaluate and create clear, informative, and publication-ready figures. + +We will + +* Discuss Background and Fundamentals + * What is Data Visualization? + * Why is Data Visualization important? + * What are common uses for Data Visualization? + * Types of data and research questions +* Discuss and Explore Plot types + * Building blocks + * Visual design principles + * Exploring Common plot types + * Basic and Field Specific + * When is a specific plot type the most appropriate to use? +* Discuss Ethical and Accessible Data Visualization + * What are best practices? + * Suggesting changes or improvements +* Discussion: common challenges +* Activity: Building an expository graph + +[Access to Slides for Workshop](https://docs.google.com/presentation/d/1wSy8jDOnuETR5Y9jbK6m5eNbQsxSWnyYio-wPs-m3YE/edit?usp=sharing) diff --git a/plots.qmd b/plots.qmd new file mode 100644 index 0000000..53689f7 --- /dev/null +++ b/plots.qmd @@ -0,0 +1,11 @@ +# Activity Instructions + +Add instructions here + +# List of plot types + +Add list of plot types to choose from here + +# link + +Link to the google doc or slide deck where information should be added here diff --git a/resources/dictionary.txt b/resources/dictionary.txt index a220f97..df27bff 100644 --- a/resources/dictionary.txt +++ b/resources/dictionary.txt @@ -4,6 +4,7 @@ cheatsheet css custimization cwrigh +DeCoDE Dockerfile Dockerhub favicon @@ -14,6 +15,8 @@ HTTPS lightblue lightgreen OTTR +pre +Pre Rmd subdir th diff --git a/setup.qmd b/setup.qmd deleted file mode 100644 index 9b170f1..0000000 --- a/setup.qmd +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: "Setup" -output: html_document ---- - - -### Getting started - -Create your repository by clicking on the `Use this Template` button at [OTTR_Template_Website repository](https://github.com/ottrproject/OTTR_Template_Website) - -![](resources/images/create-repo.png) - -You'll need to make your repository `public`. - -### Set your GH_PAT - -To enable the GitHub actions, your repository needs to be setup in a specific way. - -For OTTR GitHub actions to run, they need to have credentials through a personal access token. - -1. Set up your own personal access token [following these instructions](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) - but create a **classic token**. Keep this personal access token handy for the next step. When you get to the permissions page, check the box that says `repo` and select all that is underneath that header. No other permissions are necessary. - -
Click here for more detailed instructions. The instructions for this step may change with updates to GitHub. - -First, go to your username settings, by clicking on your user icon (upper right corner) and scrolling down to settings. - -```{r, fig.align='center', fig.alt= "User settings", echo = FALSE, out.width="20%"} -knitr::include_graphics("resources/images/usersettings.png") -``` - - -Next, scroll all the way down on the far right menu to "Developer Settings". - -```{r, fig.align='center', fig.alt= "User settings", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/developer_settings.png") -``` - - -Then select "Personal Access Tokens" and "Tokens (classic)" - -```{r, fig.align='center', fig.alt= "classic tokens", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/classic_tokens.png") -``` - -Then click "Generate new token" and confirm that you want classic. - -```{r, fig.align='center', fig.alt= "generate classic token", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/generate_classic.png") -``` - -Finally, add a name select all the repo scopes and scroll down to the green button to generate the token. Copy this somewhere safe to then paste into your repository settings. - -```{r, fig.align='center', fig.alt= "set up token", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/set_up_token.png") -``` - -
- -2. In your new OTTR_Template_Website derived repository, go to Settings > Secrets and variables > Actions. Click `New Repository Secret`. - -```{r, fig.align='center', fig.alt= "classic tokens", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/repo_action_token.png") -``` - - -```{r, fig.align='center', fig.alt= "new repository secret", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/gh_pat_set_up.png") -``` - - -In the window opened, name this new secret `GH_PAT` and paste the personal access token in the box below. (Note that the name `GH_PAT` is specific to how OTTR works and other secret names cannot be used and for OTTR to still work). - -Click the green button to add the secret. - -```{r, fig.align='center', fig.alt= "Clicking on settings", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/setting_gh_pat.png") -``` - -### Allow GitHub Actions - -Go to the settings menu for your repository that you created from the template. This should be located at the top of GitHub on the right side. - -Scroll down to the "Actions" button and click it, then click "General". -```{r, fig.align='center', fig.alt= "allowing workflows", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/actions.png") -``` - -```{r, fig.align='center', fig.alt= "allowing workflows", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/general.png") -``` - - - -Scroll down to the workflow permissions section and select "Read and write permissions", then click "Allow GitHub actions to create and approve pull requests. - -Finally, click "save". - -```{r, fig.align='center', fig.alt= "allowing workflows", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/workflows.png") -``` - -### Protect branches - - -Although this isn't entirely required, its strongly recommended that you use these settings to protect your `main` branches. - -Click on settings in the far upper right corner: - -```{r, fig.align='center', fig.alt= "Clicking on settings", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/settings.png") -``` -Click on branches: - -```{r, fig.align='center', fig.alt= "Clicking on settings", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/branches.png") -``` -Click the add rule button. - -```{r, fig.align='center', fig.alt= "Adding rule", echo = FALSE} -knitr::include_graphics("resources/images/add_rule.png") -``` -Type "main" as the branch name pattern: - -```{r, fig.align='center', fig.alt= "adding main branch rule", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/main_branch.png") -``` -Click on the following boxes to require pull requests before merging: - -```{r, fig.align='center', fig.alt= "modify branch rules", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/branch_rule.png") -``` - -Note that if you have admin privileges on this repository, you will likely still be able to override these branch protections so use caution when git pushing! diff --git a/style.qmd b/style.qmd deleted file mode 100644 index c740966..0000000 --- a/style.qmd +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: "Style" -output: html_document ---- - -## Navigation bar - -To change the part of the navigation bar that says "OTTR Quarto", modify the title within the `_quarto.yml` file. - - -```{r, fig.align='center', fig.alt= "Change nav bar", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/navbar.png") -``` - - -## Overall theme - -To change the color scheme/fonts of the website modify the `theme` in the `_site.yml` file (see [here](https://bookdown.org/yihui/blogdown/themes.html) for options): - -```{r, fig.align='center', fig.alt= "Change theme", echo = FALSE, out.width="40%"} -knitr::include_graphics("resources/images/theme.png") -``` - -## Change the favicon - -The small image that shows up on the browser can also be changed. - -You can make a small image to replace the existing one by going to https://favicon.io/favicon-converter/ and uploading an image that you would like. - -Next, simply replace the image called `favicon.ico` in the `images` directory within the `resources` directory with the image you just created and downloaded from the favicon converter website. - -## Additional changes - -To make additional changes to the style, you can modify the `styles.css` file with css code. This [website](https://www.w3schools.com/css/) has great information about css code. - -As an example if you wanted to change the color of the blue line to green you could change where it says `lightblue` to `lightgreen` in the `styles.css` file. You can also use a hex color code like those that can be found at this [website](https://htmlcolorcodes.com/), such as `#00FF9E` to get a specific shade. - - -```{r, fig.align='center', fig.alt= "Change color of line", echo = FALSE, out.width="80%"} -knitr::include_graphics("resources/images/blue.png") -``` - -Note that if you change the css file with a new element that is not already defined like `body` then you would need to do it as done with the `banner` element. This was then added to the index.Rmd file by using: - -``` - -``` - -Also checkout the [Quarto docs](https://quarto.org/docs/websites/#workflow) for more customization of the pages. -