Lab 12: Dashboards in R

This lab will introduce you to making dashboards in R. In this lab, we will be using the ggplot2 and plotly packages for visualization. First, we will produce simple plots using ggplot2, and then we will convert them into interactive plots using plotly. Finally, you will be introduced to flexdashboard, a package that provides a simple way to combine visualizations into dashboards and storyboards.

What are dashboards?

Dashboards are web pages for interactively visualizing data, and can be created using the RMarkdown files that we are already familiar with.

Whereas the PDFs we have created so far are good for writing reports, dashboards work well as web pages that you can visit to monitor the status of some system based on its data.

For example, GMU has a dashboard that can be used to monitor COVID on the Fairfax campus: https://www.gmu.edu/campus-covid-19-data

The `pokemon` dataset

It may be 2022, but you still gotta catch ’em all. Yes, this week we will be visualizing Pokemon statistics.

This dataset was originally downloaded from Kaggle here. The table contains the following columns about Pokemon from the eponymous game/media franchise:

Column	Description
`#`	ID for each pokemon
`Name`	Name of each pokemon
`Type 1`	Each pokemon has a type, this determines weakness/resistance to attacks
`Type 2`	Some pokemon are dual type and have 2
`Total`	sum of all stats that come after this, a general guide to how strong a pokemon is
`HP`	hit points, or health, defines how much damage a pokemon can withstand before fainting
`Attack`	the base modifier for normal attacks (eg. Scratch, Punch)
`Defense`	the base damage resistance against normal attacks
`SP Atk`	special attack, the base modifier for special attacks (e.g. fire blast, bubble beam)
`SP Def`	the base damage resistance against special attacks
`Speed`	determines which pokemon attacks first each round

Required Packages

Please install the following packages by running each of these lines of code in the Console tab in RStudio.

# For the dashboard
install.packages("flexdashboard")

# For interactive dataframes
install.packages("crosstalk")

Exercises

Create an RMarkdown file in RStudio by going to the File menu, then New File, and then R Markdown.
- If there is a button that says Create Empty Document, then click that to create an empty Rmd file. (This button is not always available, depending on your version of RStudio.)
- Otherwise if that button does not exist, create the file with the default options, and then delete all the contents that are in the file by default.
Save the new (empty) file in the project folder with the name lab11.Rmd.

In the Git pane in RStudio, you should see this file appear. Commit the lab11.Rmd file, and push it to GitHub.
Take a look at the contents of the RMarkdown file that you just created.

RStudio create the file with a default header section as well as some example contents.

The header section should look similar to this:
```
---
title: "R Notebook"
output: html_document
---
```
Add a line into the header section to add your name as an author, and another line for the date (as you have done in previous labs). Change the title to Lab 11.

The output line indicates what format we want to knit the document into. In previous labs in the course, we have knitted to PDF files. However, in the example above, we have selected the HTML format, which is a web page. You can try knitting the lab11.Rmd file to an HTML file to see what this looks like. The output will open in a web browser, but the structure should be similar to PDF documents that you are familiar with.

An R dashboard is also an HTML webpage, but it is structured as a dashboard with columns and rows, rather than as a continuous document.

Change the output from html_document to flexdashboard::flex_dashboard

This tells RStudio to use the flexdashboard library to create our final HTML file when we knit our document. Try knitting the document again. You should find that the document now knits to a flexdashboard, and the default content is no longer formatted into a continuous document.

Once you have finished this exercise, commit your progress so far.
If you created the file as an empty document, there should be no content below the header section. (If you accidentally created a template file with contents, then delete everything after the closing --- of the header section.

Then, below the header section, create a layout with two columns by entering this content:
```
Column
-------------------------------------

### Component 1

```{r}
```

Column
-------------------------------------

### Component 2

```{r}
```
```
Try knitting the file again, and see how the dashboard looks now. You should find there are 2 columns, each containing one of the components:

Once you have finished this exercise, commit your progress so far.
flexdashboard layouts

There are all kinds of flexdashboard layouts that we can create very simply. If you are interested, try copy-and-pasting a few of the examples here: https://rmarkdown.rstudio.com/flexdashboard/layouts.html (make sure you go back to the template above when you are finished).

There are a few general principles to understand to format dashboards.
- Level 1 headings create new pages. You can create level 1 headings as either
```
Page 1
==========
```
  or
```
# Page 1
```
  (The line of equals signs is an alternative to the # symbol.)
- Level 2 headings create columns (default) or rows.
```
Column 1
--------
```
  or
```
## Column 2
```
  To create rows instead of columns, you need to set the orientation option in the header section:
```
  output: 
    flexdashboard::flex_dashboard:
      orientation: rows
```
- Level 3 headings create boxes that group content:
```
### Content Box 1
```
  (Try adding an extra content box to one of the columns in the template and see what happens.)
- We can customize pages, columns/rows, or boxes by puttings options inside curly brackets after the name
  
  For example, to convert a column (level 2) into a sidebar:
```
SidebarName {.sidebar}
----------------------
```
Using the flexdashboard layouts guide above, add a sidebar to your dashboard.

You should also keep the two columns that we created in the previous question, so that your dashboard with sidebar looks like this:

Once you have finished this exercise, commit your answers.
Now we will start adding some content to the dashboard.
- Immediately below the header section (but before any of the content), add a new code chunk.
  
  This will be out setup code chunk, so give it the name setup and set it so that neither its code not its output appear in the dashboard using the include = FALSE option:
```
```{r setup, include = FALSE}
  
```
```
- In the setup chunk,, add code to load the following 3 packages: tidyverse, plotly, and crosstalk. Recall that packages are loaded with the library function, e.g.
```
library(tidyverse)
```
- Below these, add another line of code to read in the data from the pokemon.csv file using the read_csv function, and store it as a variable called pokemon. You should do this in setup chunk at the top of the Rmd file. (You can leave the columns as their default datatypes.) Make sure you use read_csv and not read.csv (read_csv is a more modern function that is part of the tidyverse).
Once you have finished this exercise, commit your progress so far.
Next we will create our first graph.
- Under the “Component 2” heading in the right-hand column, create a scatter plot showing the Attack (y-axis) vs Defense. Knit your file to a dashboard and take a look at what it looks like. Color the points by the Type 1 variable (remember that because Type 1 contains a space, we have to wrap it in backticks, `, when we use it as a variable).
- This ggplot graph is static, and so is not sized to the available area. To fix this, we need to convert our ggplot graph into a dynamic plotly graph. You can do this by first saving the ggplot graph as a new variable, and then using the ggplotly function on that variable. For example:
```
p <- pokemon %>%
  ggplot() + ...

ggplotly(p)
```
  Do this to convert your ggplot scatter plot into a plotly scatter plot. You should see that it resizes itself to occupy the entire column.
Once you have finished this exercise, commit your progress so far.
Under the “Component 1” heading (i.e. the left hand column of the dashboard), create a box plot to show the distribution of the Total column for different types of Pokemon (i.e. Total is on the y-axis, and Type 1 is on the x-axis).

You should also color the box plots by the Type 1 variables using the fill parameter.

Order the box plots by the median of Total for each type of pokemon (as we did in Assignment 10 in CDS 101).

Make sure you rename the x-axis label for this graph with the labs function. (You do not need to add a title - we will do this in Exercise 9 ).

Convert your ggplot graph to a plotly graph, as in the previous question, and make sure that we do not see the code of this chunk.

Once you have finished this exercise, commit your progress so far.
We have now create two graphs to show our data. However, both graphs are relatively static. One of the advantages of dashboards is that we can create interactive visualizations. Let’s do that.
- First we need to convert our pokemon dataframe to a SharedData object. This is part of the crosstalk package, and allows one part of the dashboard to alter the dataset and have those alterations reflected in other parts of the dashboard.
  
  Add this line to the bottom of the setup chunk:
```
shared_pokemon <- SharedData$new(pokemon)
```
- Next, update the code for both your graphs so that they use the shared_pokemon dataset rather than the pokemon dataset.
  
  If you knit the Rmd file to a dashboard now, it should look the same as before.
- However, we can now add a control element to our dashboard to select different parts of the data. Under the sidebar section in your Rmd file, add a code chunk with the following line of code:
```
filter_select("poke_type", "Pokemon Type", shared_pokemon, ~`Type 1`)
```
  If you re-knit your dashboard, you should see that there is now a drop-down menu that you can use to select different types of pokemon. As you do so, the plots should update to show only pokemon of those types!
Once you have finished this exercise, commit your progress so far.
Finally, let’s add some finishing touches to our dashboard to make it more presentable:
- Change the names of the components (Component 1 and Component 2) to appropriate titles for each of the graphs by editing these headers in the Rmd file.
- Give the x-axis of the box plot a more appropriate label (you can use the labs function as we have done before).
- The labels on the box plot’s x-axis will overlap by default. You can reduce this by rotating them, by add the following function to your ggplot code:
```
... + theme(axis.text.x = element_text(angle = 45))
```
Once you have finished this exercise, commit your progress so far.

How to submit

You must submit two ways:

Commit and push both the Lab12.Rmd and the Lab12.html file to GitHub
Download the Lab12.html file, zip it and upload that .zip file to the Lab 12 posting on Blackboard.
- To download the Lab12.html (after knitting it), find the file in the Files tab of RStudio (bottom right pane), and click the checkbox next to the file name. Then at the top of the Files tab, click the More button, and then click Export and download the file.
- To make sure that you have downloaded the correct html file, go to the Downloads folder on your computer and find the Lab12.html that should now be in there. Double click on the file, and your dashboard should open in a new tab in your web browser.
- Zip the Lab12.html file.
  - On Windows, right click on the file, select “Send to” and then select “Compressed (zipped) folder”. This will create a file called Lab12.zip, which you can upload to Blackboard.
  - On a Mac, you can follow these instructions

Optional exercise (ungraded): host your dashboard as a webpage on the internet

This is an optional step.

Create a GitHub repository under your own profile. Instructions: …
Commit the Lab12.html dashboard file in that repository. Several ways to do this: …
In the GitHub repository that you created, go to the Settings and then select the Pages section from the settings menu.
- This should take you to a settings webpage called GitHub Pages, which allows you to host web pages from a GitHUb repository.
- In the first dropdown options box, change “None” to “master”, and leave the second dropdown options box as it’s default setting (which should be “/ (root)”).
- Then click “Save”.
You (and anyone else on the internet) should now be able to view your dashboard. You should be able to see it by going to a link like this:

https://your_GitHub_username.github.io/the_repository_name/Lab12.html

Make sure you replace your GitHub username and repository name in that link. If your dashboard HTML file is named something other than “Lab12.html” then you will also need to change the file name at the end of the web address.

GitHub pages are a great way of publishing dashboards, and creating a personal website or online data science portfolio to impress employers.

Many of this courses materials are hosted on GitHub pages, such as the course textbook and lab website.

Credits

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. All the instructions are written by Dominic White.