Building Shiny Application Series - Layout and HTML
-
Upload
olga-scrivner -
Category
Data & Analytics
-
view
192 -
download
6
Transcript of Building Shiny Application Series - Layout and HTML
![Page 1: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/1.jpg)
Shiny Series Fall 2017
Olga Scrivner and Jefferson Davis
Week 1
![Page 2: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/2.jpg)
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
![Page 3: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/3.jpg)
Installation Instructions
• Download R - link
• Download Rstudio - link
• Instructions - slides
![Page 4: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/4.jpg)
Examples
• Shiny Gallery - link
• Show Me Shiny - link
• Interactive Dashboard - link
![Page 5: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/5.jpg)
Shiny Structure
http://littleactuary.github.io/blog/Web-application-framework-with-Shiny/ http://deanattali.com/blog/building-shiny-apps-tutorial/
![Page 6: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/6.jpg)
Rstudio Structure
RStudio
http://dss.princeton.edu/training/RStudio101.pdf
![Page 7: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/7.jpg)
Installing Shiny Package
Bottom right window Packages
Select Install
![Page 8: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/8.jpg)
Installing Shiny Package
![Page 9: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/9.jpg)
Selecting Shiny Package
![Page 10: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/10.jpg)
File > New File > R Script
Creating New R File
![Page 11: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/11.jpg)
Run
Shiny Demo
Run Demo in R script Demo in the Browser
Place cursor on the line or select runExample(“04_mpg”)
![Page 12: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/12.jpg)
Closing Demo App
![Page 13: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/13.jpg)
Practice 1: Open Shiny App
Download and unzip word-cloud.zip Set Directory to word-cloud folder
![Page 14: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/14.jpg)
Practice 1: Open Shiny App
File > Open File Select IU.R - User Interface File
![Page 15: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/15.jpg)
Practice 1: Run Shiny App
![Page 16: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/16.jpg)
Practice 1: Run Shiny App
![Page 17: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/17.jpg)
UI.R - Layout
![Page 18: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/18.jpg)
Practice 2: Identify Elements in UI.R
Strings - “green”Numbers - blueFunctions, Variables - blackComments - # green
![Page 19: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/19.jpg)
HTML Tags
• h1() = header1
• br() = line break
• p() = paragraph
• hr() = line
http://shiny.rstudio.com/articles/tag-glossary.html
![Page 20: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/20.jpg)
Change Title
Add subtitle
Add line break
Add horizontal line
Save File (File>Save)
RunApp
Practice 3: HTML Title Panel
![Page 21: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/21.jpg)
Add paragraph
Save File (File>Save)
RunApp
Practice 3: HTML Main Panel
![Page 22: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/22.jpg)
Possible Errors - Syntax
Missing Commas
![Page 23: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/23.jpg)
Create New Shiny App
Layout Functions and Data
![Page 24: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/24.jpg)
Create New Shiny App
![Page 25: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/25.jpg)
Layout Guide and Tutorial
• http://deanattali.com/blog/building-shiny-apps-tutorial/
• https://shiny.rstudio.com/articles/layout-guide.html
![Page 26: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/26.jpg)
Sidebar Position
![Page 27: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/27.jpg)
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
![Page 28: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/28.jpg)
Creating Columns
fluidPage(....fluidRow(
column(5,#content
))
Maximum - 12: can create columns of any size <=12
![Page 29: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/29.jpg)
Creating Columns
fluidPage(fluidRow(
column(5,#content
),column(3)))Maximum - 12: can create columns of any size <=12
![Page 30: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/30.jpg)
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()
![Page 31: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/31.jpg)
Practice 4: Creating New Columns and New Rows
![Page 32: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/32.jpg)
Shiny Dashboard Package
• Install shinydashboardpackage
• Select shinydashboard
The dashboardPage() function expects three components: a header, sidebar, and body
![Page 33: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/33.jpg)
Practice 5: Create Dashboard
• https://rstudio.github.io/shinydashboard/structure.html
![Page 34: Building Shiny Application Series - Layout and HTML](https://reader031.fdocuments.in/reader031/viewer/2022021923/5a66b9457f8b9ab87e8b482b/html5/thumbnails/34.jpg)
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