--- title: "Widget Demo" author: "Jesse Lecy" runtime: shiny output: html_document --- ## Setup Note that to use Shiny widgets as part of your document, you need to create a new R Markdown document, then select Shiny as the template. # My Investment Portfolio Track the financial performance of five stocks over 1,000 weeks: ```{r} # data setup org1 <- cumsum( rnorm(1000) ) org2 <- cumsum( rnorm(1000) ) org3 <- cumsum( rnorm(1000) ) org4 <- cumsum( rnorm(1000) ) org5 <- cumsum( rnorm(1000) ) dat <- data.frame( A=org1, B=org2, C=org3, D=org4, E=org5 ) ymax <- max( dat ) ymin <- min( dat ) # create an empty plot with the correct dimensions plot.new() plot.window( xlim=c(0,1050), ylim=c(ymin,ymax) ) points( dat$A, type="l", col="gray70" ) points( dat$B, type="l", col="gray70" ) points( dat$C, type="l", col="gray70" ) points( dat$D, type="l", col="gray70" ) points( dat$E, type="l", col="gray70" ) axis( side=1, cex.axis=0.7, col="gray", col.axis="gray70" ) title( main="Return on Investment", col.main="gray", cex=1.5 ) text( 1000, dat$A[1000], "A", pos=4, col="gray" ) text( 1000, dat$B[1000], "B", pos=4, col="gray" ) text( 1000, dat$C[1000], "C", pos=4, col="gray" ) text( 1000, dat$D[1000], "D", pos=4, col="gray" ) text( 1000, dat$E[1000], "E", pos=4, col="gray" ) ``` # Highlight One Stock ```{r} plot.new() plot.window( xlim=c(0,1050), ylim=c(ymin,ymax) ) points( dat$A, type="l", col="gray70" ) points( dat$B, type="l", col="gray70" ) points( dat$C, type="l", col="gray70" ) points( dat$D, type="l", col="gray70" ) points( dat$E, type="l", col="gray70" ) axis( side=1, cex.axis=0.7, col="gray", col.axis="gray70" ) title( main="Return on Investment", col.main="gray", cex=1.5 ) text( 1000, dat$A[1000], "A", pos=4, col="gray" ) text( 1000, dat$B[1000], "B", pos=4, col="gray" ) text( 1000, dat$C[1000], "C", pos=4, col="gray" ) text( 1000, dat$D[1000], "D", pos=4, col="gray" ) text( 1000, dat$E[1000], "E", pos=4, col="gray" ) # highlight one organization this.one <- "E" points( dat[,this.one], type="l", col="darkred" ) text( 1000, dat[1000,this.one], label=this.one, pos=4, col="darkred" ) ``` # Intro to Shiny Widgets Shiny apps have two parts: a user interface (page layouts and input functions), and a set of rendering functions that translate R graphics into HTML and javascript elements to create interactive web pages. * `inputPanel` or `sidebarPanel` creates a panel for the widgets * `input` functions allow users to specify inputs * `renderPlot` converts to HTML / javascript When using Shiny, a global object called "input" will be created, and it stores the input values the user defines in slots created through the `inputId` arguments. For example, below we use "animal" for the `inputID`, so the input values are referenced at `input$animal`. ```{r} selectInput( inputId='animal', label='Select Animal', choices=c("cat","dog","rat"), selected="dog" ) renderPlot({ plot.new() plot.window( xlim=c(0,10), ylim=c(0,10) ) box() text( 5, 5, label=input$animal, cex=4 ) # global object "input" title( main="My Favorite Animal Is A:", line=-2 ) }) ``` Add a panel for the widget. ```{r} inputPanel( selectInput( inputId='animal.02', label='Select Animal', choices=c("cat","dog","rat"), selected="dog" ), selectInput( inputId='color', label='Select Color', choices=c("steelblue","darkred","orange"), selected="orange" ), selectInput( inputId='size', label='Select Size', choices=c(1,2,3,4,5,6,7,8,9), selected=4 ) ) # end inputPanel renderPlot({ plot.new() plot.window( xlim=c(0,10), ylim=c(0,10) ) box() # global object "input" stores all values in slots using their inputId's above # inputId='animal.02' # inputId='color' # inputId='size' text( 5, 5, label=input$animal.02, cex=as.numeric(input$size), col=input$color ) title( main="My Favorite Animal Is A:", line=-2 ) }) ``` # Hide the Code Use the argument `echo=F` in your chunk header to hide the code when you render the widget in a markdown document. ```{r, echo=F} selectInput( inputId='animal2', label='Select Animal', choices=c("cat","dog","rat"), selected="dog" ) renderPlot({ plot.new() plot.window( xlim=c(0,10), ylim=c(0,10) ) box() text( 5, 5, label=input$animal2, cex=4 ) title( main="My Favorite Animal Is A:", line=-2 ) }) ``` # Generalize the Input Instead of writing a list of options manually, we can use R functions to generate an input list for us: * For character vectors: `unique( var )` * For factors: `levels( fac )` * For column of a data frame: `names( dat )` ```{r} sidebarPanel( selectInput( inputId='org', label='Select Organization', choices=names(dat), selected="A" ) ) # end sidebarPanel renderPlot({ plot.new() plot.window( xlim=c(0,10), ylim=c(0,10) ) box() text( 5, 5, label=input$org, cex=4 ) # global object "input" title( main="My Selected Org Is:", line=-2 ) }) ``` # Investment Tracker Now put it all together. ```{r, eval=F} selectInput( inputId='org2', label='Select Organization', choices=names(dat), selected="A" ) renderPlot({ plot.new() plot.window( xlim=c(0,1050), ylim=c(ymin,ymax) ) points( dat$A, type="l", col="gray70" ) points( dat$B, type="l", col="gray70" ) points( dat$C, type="l", col="gray70" ) points( dat$D, type="l", col="gray70" ) points( dat$E, type="l", col="gray70" ) axis( side=1, cex.axis=0.7, col="gray", col.axis="gray70" ) title( main="Return on Investment", col.main="gray", cex=1.5 ) text( 1000, dat$A[1000], "A", pos=4, col="gray" ) text( 1000, dat$B[1000], "B", pos=4, col="gray" ) text( 1000, dat$C[1000], "C", pos=4, col="gray" ) text( 1000, dat$D[1000], "D", pos=4, col="gray" ) text( 1000, dat$E[1000], "E", pos=4, col="gray" ) # highlight one organization points( dat[,input$org2], type="l", col="darkred" ) text( 1000, dat[1000,input$org2], label=input$org2, pos=4, col="darkred" ) text( 50, ymax-5, paste("Return on Investment for Stock",input$org2), col="darkred", pos=4 ) }) ``` ```{r, echo=F} selectInput( inputId='org2', label='Select Stock', choices=names(dat), selected="A" ) renderPlot({ plot.new() plot.window( xlim=c(0,1050), ylim=c(ymin,ymax) ) points( dat$A, type="l", col="gray70" ) points( dat$B, type="l", col="gray70" ) points( dat$C, type="l", col="gray70" ) points( dat$D, type="l", col="gray70" ) points( dat$E, type="l", col="gray70" ) axis( side=1, cex.axis=0.7, col="gray", col.axis="gray70" ) title( main="Historical Financial Performance", col.main="gray", cex=2 ) text( 1000, dat$A[1000], "A", pos=4, col="gray" ) text( 1000, dat$B[1000], "B", pos=4, col="gray" ) text( 1000, dat$C[1000], "C", pos=4, col="gray" ) text( 1000, dat$D[1000], "D", pos=4, col="gray" ) text( 1000, dat$E[1000], "E", pos=4, col="gray" ) # highlight one organization points( dat[,input$org2], type="l", col="darkred" ) text( 1000, dat[1000,input$org2], label=input$org2, pos=4, col="darkred" ) text( 50, ymax-5, paste("Return on Investment for Stock",input$org2), col="darkred", pos=4 ) }) ```