Edit config.toml

Change the site name

title = "Dani Cosme, M.S."

Enable emojis

enableEmoji = true

Navigation bar

More on menu management here. [[menu.main]] = Pages and links in the menu bar

• Can be external links (e.g. Twitter page) or internal links (e.g. /posts/)
  
• Default arrangement is alphabetical order
  
• To manually specify the order, add weight as a field

Add the following text to your config.toml page and see what happens:

[[menu.main]]
    name = "UO Data Science Club"
    url = "https://github.com/uodatascience"
    weight = 1

Create a new post

Using the IDE: Addins > New Post

In the console, the new_post() function will automatically create a new post and append the date to the front of the file name that you specify as an input.

setwd("../default-site/")
blogdown::new_post("newmd", ext = '.md')

Here is some text. Lots of text. So much text.

**Gee this is fun!**

Let's add a table, just for kicks.

| hours of sun | happiness |
|---|---|
| 0 | 1 |
| 3 | 4 |
| 5 | 7 |
| 7 | 10 |

mean(iris$Sepal.Length)

require(ggplot2)
ggplot(iris, aes(Sepal.Length, Sepal.Width, color = Species)) +
  geom_point() +
  geom_smooth(method = "lm") + 
  scale_color_manual(values = c("#3B9AB2", "#E4B80E", "#F21A00"))

setwd("../default-site/")
blogdown::new_post("newrmd", ext = '.Rmd')

# make the directory
mkdir ../default-site/content/data-visualization

# copy the HTML and .Rmd files to the directory
cp datavis.html ../default-site/content/data-visualization
cp datavis_rmd.Rmd ../default-site/content/data-visualization

setwd("../default-site/")
blogdown::serve_site()

/data-visualization/datavis
/data-visualization/datavis_rmd

The Structure of a Shiny App

Shiny apps are contained in a single, integrated script called app.R.

This script has at least three components:

• a user interface object (can be a call to a separate ui.R script)
• a server function (can be a call to a separate server.R script)
• a call to the shinyApp function
• optional: extra stuff in your global environment (can be a call to a separate global.R script)
• If you want to host your shiny app, save this script as app.R and put it in it’s own folder. The name for that folder will be the name of your shiny app.

# If you choose to host this app online, you'll need to copy everything in this code chunk and save it to app.R in it's own folder.  Then, set your working directory to the saved folder.  Finally, use the command 'rsconnect::deployApp()' to host your app.

# Here's a user interface (ui) component
library(shiny)

# Define UI for app that draws a histogram ----
ui <- fluidPage(

  # App title ----
  titlePanel("Hello Shiny!"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)

    ),

    # Main panel for displaying outputs ----
    mainPanel(

      # Output: Histogram ----
      plotOutput(outputId = "distPlot")

    )
  )
)

# Here's a server component

# Define server logic required to draw a histogram ----
server <- function(input, output) {

  # Histogram of the Old Faithful Geyser Data ----
  # with requested number of bins
  # This expression that generates a histogram is wrapped in a call
  # to renderPlot to indicate that:
  #
  # 1. It is "reactive" and therefore should be automatically
  #    re-executed when inputs (input$bins) change
  # 2. Its output type is a plot
  output$distPlot <- renderPlot({

    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

    })

}

# When you've made both components, you're ready to call shinyApp

shinyApp(ui = ui, server = server)

Layout

The layout of a shiny app is specified within the user interface with the function fluidPage() using the panel options.

• Specify a title with titlePanel(“my title”)
• Parition your layout into sidebar & main panels
• Change the position of a panel
• You can use some HTML5 tags without the <> brackets too
• Use ‘align’ to change text justification
• Use p() to create paragraphs

And so much more…

ui <- fluidPage(
  titlePanel(em("my italicized title", align = "center")),
  
  sidebarLayout(position = "left",
                sidebarPanel(strong("my bold sidebar\nand a picture\nof a shiny penny"),
                             img(src = "https://www.thefarmersbank.net/wp-content/uploads/2018/04/2005-Penny-Uncirculated-Obverse.png", height = 100, width = 100)),
                mainPanel(
                  h1("most important output"),
                  br(),
                  p("this is a paragraph that says nothing in particular.  it's just a bunch of sentences to illustrate a point about separating text.  watch, we're going to copy and paste it below as another paragraph."),
                  p("this is a paragraph that says nothing in particular.  it's just a bunch of sentences to illustrate a point about separating text."),
                  h2("less important output"),
                  h3(div("here's smaller text in blue", style = "color:blue")),
                  h4(p("here's a tiny text paragraph with just", span("a few orange words,", style = "color:orange"), "if you're into that."))
                )
  )
)

# Let's see what we created
# Uncomment the lines below and run this chunk only

server <- function(input, output) {
}
shinyApp(ui, server)

Control Widgets

Widgets are the interactive parts of a web application. When we include widgets in our shiny app, the user can manipulate features of the UI. Later, we’ll learn how to make the output of our app reflect these changes dynamically.

• Shiny has some built-in widgets. Below, we’ve listed their names and corresponding functions.

Note: If that’s not enough for you, install the shinyWidgets package for more!

• To add control widgets to your app, put one of the widget functions in the sidebarPanel or mainPanel of your UI. Every widget needs these ingredients:

  • a name (charcter string that you call later)
  • label (character string that the app user will see)

#install.packages("shinyWidgets")
library(shinyWidgets)

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("A Bunch of Widgets"),
  
  fluidRow(
    
    column(3,
           h3("Button Widgets"),
           actionButton("action", "Action"),
           br(),
           br(), 
           br(),
           submitButton("Submit"), 
           br(),
           br(),
           br(),
           actionBttn("fancy action", "Danger! Don't Click Me",
                      style = "jelly", color = "danger", size = "lg"),
           br(),
           br(),
           br(),
           actionGroupButtons(
             inputIds = c("btn1", "btn2", "btn3"), 
             labels = list("Action 1", "Action 2", tags$span(icon("gear"), "Action 3")), 
             status = "primary"),
           br(),
           br(),
           br(),
           downloadBttn("download button", "Click to Download"), 
           br(),
           br(),
           br(),
           prettyRadioButtons(inputId = "radio4", label = "Click me!",
                              choices = c("Click me !", "Me !", "Or me !"),
                              outline = TRUE,
                              plain = TRUE, icon = icon("thumbs-up"))),
           
    column(3,
           h3("Checkbox Widgets"),
           checkboxInput("checkbox", "Choice A", value = TRUE), 
           br(),
           br(),
           checkboxGroupInput("checkGroup", "Checkbox group", 
           choices = list("Choice 1" = 1, 
                          "Choice 2" = 2, 
                          "Choice 3" = 3), selected = 1),
           br(),
           br(),
           prettyCheckbox(inputId = "checkbox2",
                          label = "Click me!", thick = TRUE,
                          animation = "pulse", status = "info", 
                          fill = T, shape = "round", bigger = T),
           br(),
           br(),
           prettyCheckboxGroup(inputId = "checkgroup5",
                               label = "Click me!", icon = icon("check"),
                               choices = c("Click me !", "Me !", "Or me !"),
                               animation = "rotate", status = "default"),
           br(),
           br(),
           h4("pretty sweet checkbox"),
           prettyToggle(inputId = "toggle4",
                        label_on = "Yes!",
                        label_off = "No..", outline = TRUE,
                        plain = TRUE, icon_on = icon("thumbs-up"), 
                        icon_off = icon("thumbs-down"))),
    
    column(3, 
           h3("Date/Calendar Widgets"),
           airDatepickerInput(inputId = "default",
                              label = "Choose a date:"),
           br(),
           airDatepickerInput(inputId = "range",
                              label = "Select range of dates:",
                              range = TRUE, value = c(Sys.Date()-7, Sys.Date())),
           br(),
           airDatepickerInput(inputId = "multiple times",
                              label = "Indicate 3 times you're free to meet:",
                              timepicker = T,
                              placeholder = "meeting times",
                              multiple = 3, separator = " ; ", 
                              clearButton = TRUE),
           airDatepickerInput(inputId = "inline",
                              label = "Inline:",
                              inline = TRUE))
  ),
  
  fluidRow(
    
    column(3,
           fileInput("file", h3("File input"))),
    
    column(3, 
           h3("Help text"),
           helpText("Note: help text isn't a true widget,", 
                    "but it provides an easy way to add text to",
                    "accompany other widgets.")),
    
    column(3, 
           numericInput("num", 
                        h3("Numeric input"), 
                        value = 1))   
  ),
  
  fluidRow(
    
    column(3,
           radioButtons("radio", h3("Radio buttons"),
                        choices = list("Choice 1" = 1, "Choice 2" = 2,
                                       "Choice 3" = 3),selected = 1)),
    
    column(3,
           selectInput("select", h3("Select box"), 
                       choices = list("Choice 1" = 1, "Choice 2" = 2,
                                      "Choice 3" = 3), selected = 1)),
    
    column(3, 
           sliderInput("slider1", h3("Sliders"),
                       min = 0, max = 100, value = 50),
           sliderInput("slider2", "",
                       min = 0, max = 100, value = c(25, 75))
    ),
    
    column(3, 
           textInput("text", h3("Text input"), 
                     value = "Enter text..."))   
  )
  
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

Displaying Reactive Output

Reactive output displays automatically when a user interacts with your shiny app using one (or more) of the control widgets we just made.

We can make reactive output in two steps:

1. Add an R object in your UI function. Shiny has built-in functions to turn your R objects into UI-compatible output. Here’s a table with those built-in output functions and what they do.

• Put your output function in the your UI, in either the sidebarPanel or mainPanel.

• Your output function will take a character string, in quotes, as an argument. This character string corresponds to the name of a control widget in your UI.

# Here's an example based on one of the widgets we made earlier.

ui <- fluidPage(
  titlePanel("The Presidential Launch Codes"),
  
  sidebarLayout(
    sidebarPanel(
      helpText("Be careful.  Interacting with this shiny app could cause the world to implode."),
      
      actionBttn("fancy_action", "Danger! Don't Click Me",
                      style = "jelly", color = "danger", size = "lg")
    ),
    
    mainPanel(
      imageOutput("res_fancy_action")
    )
  )
)

2. Tell R how to build the object in your server function

• The server function makes on object called ‘output’ that contains a list of all the things we need to make a shiny app.

• Each output object that you make from step 1 needs to have it’s own entry/element in the server function.

• You need to name this element the same thing as you named your control widget.

• Finally, we need to call a widget value to make the output display reactively when a user manipulates the widget. (Hint: Sometimes (especially when you use button widgets), you need to add an observeEvent() command, like the one below.)

# Here's an example server function to go with the ui function above.

server <- function(input, output) {
  observeEvent(input$fancy_action, {
  
  output$res_fancy_action <- renderImage({ 
    endworld <- normalizePath(file.path('./pics',
                              paste('endworld', '.gif', sep='')))

    # Return a list containing the filename
    list(src = endworld)
  }, deleteFile = F)
  })
}

• Each output element should contain a render function.

• Each render function will only takes only one argument, which always take the form of an R expression in culy braces like these {}.

• Here’s a table describing the render functions that are built into shiny.

We’ve finished building our shiny app. To launch it in Rstudio, just run the the UI and server code chunks above and then run:

shinyApp(ui = ui, server = server)

Share Your Shiny App

Step 1: Create an account on shinyapps.io (https://www.shinyapps.io/admin/#/signup)

• Create an account name and then hit enter/return.

Step 2: Configure your account.

• Install rsconnect package in R
• Click the “show secret” button in step 2 of shinyapps.io
• Click the “copy to clipboard” button in step 2 of shinyapps.io
• Copy the info in the popup and paste it into R & run
• Load rsconnect library

Step 3: After you’ve created an awesome, original shiny app IN ITS OWN FOLDER

• Set your working directory to your shiny app folder
• Deploy your shiny app with rsconnect::deployApp()

install.packages('rsconnect')

##you should replace this with your own info from 
rsconnect::setAccountInfo(name='schavez', token='a bunch of numbers and letters', secret='secret numbers and letters')
library(rsconnect)

#Last Step: This step is for after you've made a shiny app
setwd("~/UO/Spring 2018/Data Science/personal_site/shinythings/shinytest/")
rsconnect::deployApp()

When deployApp() has finished running, a shinyapps.io website should pop up with your shiny app. Now, we can just use an inline frame to embed our shiny app in our new website, like this.

<iframe src="https://schavez.shinyapps.io/world/" style="border: none; width: 800px; height: 500px"></iframe>

And here it is, in all it’s glory.