Can you guys complete this?
INFO201 Problem Set: interactive web app February 26, 2023 Instructions In this problem set you are asked to do create a shiny app–a similar app as what you are going to make for your final project. You should a) make the github repo; b) create the app; and c) publish the app on shinyapps.io. In this task, you can use any dataset of your choice (feel free to use what you plan to use for the final project). If you do not have good ideas, you can use UAH lower troposphere data (UAH-lower- troposphere-long.csv.bz2 on canvas), see https://bitbucket.org/otoomet/data/src/master/nature/ for the variable definitions. You may use both single- or multiple file setup. 1 Your tasks Your task is to build your own shiny application. The application should provide the user with the ability to interactively explore the dataset you chose. What the application looks like is up to you, but see the sample app https://otoomet.shinyapps.io/uah-lower-troposphere/. The visualization can be made with base R graphics, ggplot2, plotly, leaflet for maps or some- thing else. While we don’t expect you to create anything ground-breaking, we do expect you to create a clear visualization with proper labels and titles. And of course, the graphic needs to react to changing values in the widgets. Requirements: 1. You have at least three sets of pages (e.g. using tabsetPanel). One page (the opening page) displays the general information about the dataset, another page displays a plot, and the third page displays a table. 2. The plot and table page use either the sidebar layout, or another more complex layout (e.g. columns) that allows you to put the widgets and the rendered output next to each other. Just putting everything underneath each other is not OK. 3. The tab and plot page have a side panel in which you’ve created at least two widgets that change the visual output in your application, such as type of the plot, or data displayed on the x or y axis of a scatterplot. Note: I mean a side panel but it does not have to be sidebarLayout. 4. The main panel of these pages displays data (as a plot or a table). 1 shinyapps.io https://bitbucket.org/otoomet/data/src/master/nature/ https://otoomet.shinyapps.io/uah-lower-troposphere/ https://plot.ly/r/ https://rstudio.github.io/leaflet/ 5. When you start the app, it should show explanatory text about your dataset and the app on the main panel. It may be very brief. No separate sidebars and no interactivity is needed here. 6. The explanatory text uses at least two html text formatting markers, such as strong(), em() or similar (raw html is OK too). See https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-ui-text. 7. For both plot and table, there is at least one widget that allows the user to modify the values on screen. This may include filtering or some sort of computations. Just changing color is not enough. 8. The plot also includes a widget that allows one to change the visuals only, leaving data untouched. See https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-server-reactive 9. The plot is appropriately labeled. This can be achieved either through ggplot() (or plot() if you wish) or through the layout elements. 10. Both plot and table page must also include some textual output that reacts to a widget, such as the number of non-missing observations, or the overall average value. For instance “Selected subset contains 1234 observations” is such a sentence, given 1234 is derived from the actual (subset of) data. 11. You must push your application up to the shinyapps.io server (or another server if you like), making it publicly available. 12. The uploaded should work on shinyapps, not crash! Note: this means you need to upload data, and ensure you use correct relative path! 13. Your github repo should include a readme file that contains a brief "user documentation" of your project: a brief description of the data, and explanation what are the widgets and panels doing. This file should contain a link to your project on the https://www.shinyapps.io server. 14. As submission, submit the link to your github repo to canvas. We hope that when you finish this project, you will good to go and start your final shiny applications! 2 Grading In total 100 points • (10pt) The app contains three different tabs or similar layout elements. • (15pt) the opening page – (5pt) Includes appropriate explanatory text – (5pt) Contains figures, calculated from data 2 https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-ui-text https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-server-reactive shinyapps.io https://www.shinyapps.io – (5pt) Contains HTML text formatting • (35pt) plot panel – (6pt) Contains sidebar and the main panel – (7pt) Sidebar contains a widget that modifies values – (8pt) Sidebar contains a widget the modifies visuals only – (7pt) Plot is appropriately labeled – (7pt) Plot includes a text summary that is computed of data (and changes reacts to the widget) • (20pt) table panel – (6pt) Contains sidebar and the main panel – (7pt) Sidebar contains a widget that changes data – (7pt) Table includes a text summary that is computed of data (and changes reacts to the widget) • (20pt) Publishing – Link available, app works as intended on shinyapps.io. Finally tell us how many hours did you spend on this PS. 3 shinyapps.io Your tasks Grading Shiny: Render and UI Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Shiny: Render and UI Ott Toomet February 27, 2023 Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Announcements • PS6: do a shiny app • Next Wed: final project • NO FINAL EXAM! Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The big picture • Basic skills • W1: intro, file system • W2: command line, git, markdown • W2-4: R language, functions, vectors • W5: lists, data frames • Data manipulations • W6: dplyr • Presentation and visualization • W7: literal programming • W7,8: plotting data • Interactive apps • W9: shiny, rendering, UI, reactive functions • W10: final project Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Goals • You understand the basic shiny principles • you can create a basic shiny app with help of rstudio • can run it from withing rstudio • you can build on that through googling etc Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Shiny 2 Structure of Shiny App 3 Building blocks 4 UI 5 Server 6 More details 7 Publishing shiny apps 8 Next Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . R-based interactive web framework • Simple interactive web apps • Backend-frontent framework • Write backend in R • use all R data manipulation/graphics tools • Frontend defined in R • (automatically converted to HTML/javascript) • Frontend-backend communication set up automatically Examples: • https://shiny.rstudio. com/gallery/ https://shiny.rstudio.com/gallery/ https://shiny.rstudio.com/gallery/ Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating shiny apps https://faculty.washington.edu/otoomet/info201-book/shiny.html# creating-shiny-apps-rstudio In RStudio: • File > New File > Shiny Web App • Single file: simpler • Multiple files: more modular • Should be in a separate folder • RStudio does it automatically https://faculty.washington.edu/otoomet/info201-book/shiny.html#creating-shiny-apps-rstudio https://faculty.washington.edu/otoomet/info201-book/shiny.html#creating-shiny-apps-rstudio Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Shiny 2 Structure of Shiny App 3 Building blocks 4 UI 5 Server 6 More details 7 Publishing shiny apps 8 Next Shiny 1 Shiny Structure of Shiny App Building blocks UI Server More details Publishing shiny apps Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Structure of Shiny App https://faculty.washington.edu/otoomet/info201-book/shiny.html# shiny-writing-ui-server server <- function(input,="" output)="" {="" ...="" }="" ui=""><- fluidpage( ... ) shinyapp(ui = ui, server = server) https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-writing-ui-server https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-writing-ui-server shiny 1 shiny structure of shiny app building blocks ui server more details publishing shiny apps next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . start the app • rstudio: • run-app • command line: • rscript -e "shiny::runapp(’myapp’)" • point browser to the url. shiny 1 shiny structure of shiny app building blocks ui server more details publishing shiny apps next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . single vs multiple files • single file: • great and compact for small projects • multiple files: • clear organization • easier collaboration • more modular (usable across projects) • must be named "server.r" and "ui.r" shiny 1 shiny structure of shiny app building blocks ui server more details publishing shiny apps next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . fluidpage(="" ...="" )="" shinyapp(ui="ui," server="server)" https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-writing-ui-server="" https://faculty.washington.edu/otoomet/info201-book/shiny.html#shiny-writing-ui-server="" shiny="" 1="" shiny="" structure="" of="" shiny="" app="" building="" blocks="" ui="" server="" more="" details="" publishing="" shiny="" apps="" next="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" start="" the="" app="" •="" rstudio:="" •="" run-app="" •="" command="" line:="" •="" rscript="" -e="" "shiny::runapp(’myapp’)"="" •="" point="" browser="" to="" the="" url.="" shiny="" 1="" shiny="" structure="" of="" shiny="" app="" building="" blocks="" ui="" server="" more="" details="" publishing="" shiny="" apps="" next="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" single="" vs="" multiple="" files="" •="" single="" file:="" •="" great="" and="" compact="" for="" small="" projects="" •="" multiple="" files:="" •="" clear="" organization="" •="" easier="" collaboration="" •="" more="" modular="" (usable="" across="" projects)="" •="" must="" be="" named="" "server.r"="" and="" "ui.r"="" shiny="" 1="" shiny="" structure="" of="" shiny="" app="" building="" blocks="" ui="" server="" more="" details="" publishing="" shiny="" apps="" next="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="" .="">