building shiny application series - layout and html

34
Shiny Series Fall 2017 Olga Scrivner and Jefferson Davis Week 1

Upload: olga-scrivner

Post on 23-Jan-2018

191 views

Category:

Data & Analytics


6 download

TRANSCRIPT

Page 1: Building Shiny Application Series - Layout and HTML

Shiny Series Fall 2017

Olga Scrivner and Jefferson Davis

Week 1

Page 2: Building Shiny Application Series - Layout and HTML

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 4: Building Shiny Application Series - Layout and HTML

Examples

• Shiny Gallery - link

• Show Me Shiny - link

• Interactive Dashboard - link

Page 5: Building Shiny Application Series - Layout and HTML

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

Rstudio Structure

RStudio

http://dss.princeton.edu/training/RStudio101.pdf

Page 7: Building Shiny Application Series - Layout and HTML

Installing Shiny Package

Bottom right window Packages

Select Install

Page 8: Building Shiny Application Series - Layout and HTML

Installing Shiny Package

Page 9: Building Shiny Application Series - Layout and HTML

Selecting Shiny Package

Page 10: Building Shiny Application Series - Layout and HTML

File > New File > R Script

Creating New R File

Page 11: Building Shiny Application Series - Layout and HTML

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

Closing Demo App

Page 13: Building Shiny Application Series - Layout and HTML

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

Practice 1: Open Shiny App

File > Open File Select IU.R - User Interface File

Page 15: Building Shiny Application Series - Layout and HTML

Practice 1: Run Shiny App

Page 16: Building Shiny Application Series - Layout and HTML

Practice 1: Run Shiny App

Page 17: Building Shiny Application Series - Layout and HTML

UI.R - Layout

Page 18: Building Shiny Application Series - Layout and HTML

Practice 2: Identify Elements in UI.R

Strings - “green”Numbers - blueFunctions, Variables - blackComments - # green

Page 19: Building Shiny Application Series - Layout and HTML

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

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

Add paragraph

Save File (File>Save)

RunApp

Practice 3: HTML Main Panel

Page 22: Building Shiny Application Series - Layout and HTML

Possible Errors - Syntax

Missing Commas

Page 23: Building Shiny Application Series - Layout and HTML

Create New Shiny App

Layout Functions and Data

Page 24: Building Shiny Application Series - Layout and HTML

Create New Shiny App

Page 25: Building Shiny Application Series - Layout and HTML

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

Sidebar Position

Page 27: Building Shiny Application Series - Layout and HTML

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

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

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

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

Practice 4: Creating New Columns and New Rows

Page 32: Building Shiny Application Series - Layout and HTML

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

Practice 5: Create Dashboard

• https://rstudio.github.io/shinydashboard/structure.html

Page 34: Building Shiny Application Series - Layout and 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