building shiny application series - layout and html
TRANSCRIPT
Shiny Series Fall 2017
Olga Scrivner and Jefferson Davis
Week 1
What is Shiny?
• Rstudio is an open source “set of integrated tools to help you be more productive with R”
• Shiny is a package from Rstudio to build interactive web interfaces/pages/applications
Installation Instructions
• Download R - link
• Download Rstudio - link
• Instructions - slides
Examples
• Shiny Gallery - link
• Show Me Shiny - link
• Interactive Dashboard - link
Shiny Structure
http://littleactuary.github.io/blog/Web-application-framework-with-Shiny/ http://deanattali.com/blog/building-shiny-apps-tutorial/
Rstudio Structure
RStudio
http://dss.princeton.edu/training/RStudio101.pdf
Installing Shiny Package
Bottom right window Packages
Select Install
Installing Shiny Package
Selecting Shiny Package
File > New File > R Script
Creating New R File
Run
Shiny Demo
Run Demo in R script Demo in the Browser
Place cursor on the line or select runExample(“04_mpg”)
Closing Demo App
Practice 1: Open Shiny App
Download and unzip word-cloud.zip Set Directory to word-cloud folder
Practice 1: Open Shiny App
File > Open File Select IU.R - User Interface File
Practice 1: Run Shiny App
Practice 1: Run Shiny App
UI.R - Layout
Practice 2: Identify Elements in UI.R
Strings - “green”Numbers - blueFunctions, Variables - blackComments - # green
HTML Tags
• h1() = header1
• br() = line break
• p() = paragraph
• hr() = line
http://shiny.rstudio.com/articles/tag-glossary.html
Change Title
Add subtitle
Add line break
Add horizontal line
Save File (File>Save)
RunApp
Practice 3: HTML Title Panel
Add paragraph
Save File (File>Save)
RunApp
Practice 3: HTML Main Panel
Possible Errors - Syntax
Missing Commas
Create New Shiny App
Layout Functions and Data
Create New Shiny App
Layout Guide and Tutorial
• http://deanattali.com/blog/building-shiny-apps-tutorial/
• https://shiny.rstudio.com/articles/layout-guide.html
Sidebar Position
fluidPage()
• Creates a display that automatically adjusts to the dimensions of your user’s browser window
• fluidRow() - creates a row that adjusts to the dimensions of the browser
• column() - create a column within the row
Creating Columns
fluidPage(....fluidRow(
column(5,#content
))
Maximum - 12: can create columns of any size <=12
Creating Columns
fluidPage(fluidRow(
column(5,#content
),column(3)))Maximum - 12: can create columns of any size <=12
Practice 4: Creating New Columns and New Rows• Add two more columns of size 4 and 3
• Add a title to each new column with h3()
• Create the content for each title
• Create a paragraph in each column
• Create a new Row and a column of size 12 with horizontal line hr() and title h3()
Practice 4: Creating New Columns and New Rows
Shiny Dashboard Package
• Install shinydashboardpackage
• Select shinydashboard
The dashboardPage() function expects three components: a header, sidebar, and body
Practice 5: Create Dashboard
• https://rstudio.github.io/shinydashboard/structure.html
Credits - Images• https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png
• http://www.mcclellandlegge.com/img/shiny-logo.png
• http://deanattali.com/blog/building-shiny-apps-tutorial/
• http://littleactuary.github.io/blog/Web-application-framework-with-Shiny/
• https://shiny.rstudio.com/
• http://dss.princeton.edu/training/RStudio101.pdf