Building Shiny Application Series - Layout and HTML

Post on 23-Jan-2018

191 views 6 download

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

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