HW 07 - Creating interactive web applications with Shiny

Important

This homework is due November 12 at 11:59pm ET.

Learning objectives

• Design and implement interactive web applications using Shiny
• Create functional and aesthetically pleasing user interfaces
• Implement reactive programming concepts
• Generate dynamic outputs based on user inputs

Getting started

• Go to the info5001-fa25 organization on GitHub. Click on the repo with the prefix hw-07. It contains the starter documents you need to complete the homework.

• Clone the repo and start a new workspace in Positron. See the Homework 0 instructions for details on cloning a repo and starting a new R project.

General guidance

TipGuidelines + tips

As we’ve discussed in lecture, your plots should include an informative title, axes should be labeled, and careful consideration should be given to aesthetic choices.

Remember that continuing to develop a sound workflow for reproducible data analysis is important as you complete the lab and other assignments in this course. There will be periodic reminders in this assignment to remind you to render, commit, and push your changes to GitHub. You should have at least 3 commits with meaningful commit messages by the end of the assignment.

TipWorkflow + formatting

Make sure to

• Update author name on your document.
• Label all code chunks informatively and concisely.
• Follow the Tidyverse code style guidelines.
• Make at least 3 commits.
• Resize figures where needed, avoid tiny or huge plots.
• Turn in an organized, well formatted document.

Packages

We’ll use the {tidyverse} for much of the data wrangling and visualization and {tidymodels} for modeling. In addition, we’ll use the {palmerpenguins} and {wbstats} for data.

library(tidyverse)
library(shiny)
library(bslib)

Exercise 1

Improve the National Risk Index app. Extend the Shiny app we developed in class by designing and implementing three distinct changes. These could be substantial revisions to existing inputs/outputs, creating new inputs/outputs, revamping the layout for the user interface, etc.

• Implement these changes in nri/app.R.
• Deploy your app using Posit Connect Cloud and include a visible link to the publicly accessible app in hw-07.qmd. You will need to create an account on Posit Connect Cloud but the free tier should be sufficient for this assignment.
• Document the changes you’ve made to the app in hw-07.qmd and how you think they improve the usefulness of the app to the audience.

TipDeployment using Posit Cloud Connect

You’ve learned about Shiny in class, but we haven’t covered deployment, so completing this exercise will require a bit of self-learning. See this article on deployment for instructions on using Posit Publisher to deploy from within Positron, and ask questions if you need further guidance!

Exercise 2

Design and implement an original Shiny app. Feel free to use a dataset from past assignments or choose a new dataset. Use the provided ex2/app.R file as a starting point. Any required resources (e.g. data files, images, CSS) must be stored with ex2 or a subfolder.

Along with the deployed Shiny app, document the major design choices you made when developing the Shiny app in hw-07.qmd, and note any particular challenges or complexities you had to overcome when implementing the Shiny code.

TipSome helpful guidance/requirements

• You must use at least two user inputs and three reactive outputs (e.g. plots, tables, text).
• Create a basic app, expect a basic grade. We’re looking for extending beyond the basics and some originality/creativity. Things you might think to incorporate into the app:
  • User experience: e.g. layout (pages, tabs, arrangement of cards, etc.), design, etc.
  • Customization: e.g. color palettes, themes, fonts, customized theme() to blend {ggplot2} plots with the dashboard theme, etc.
  • Interactivity: e.g. hover effects, click events, etc.
  • Insights: e.g. text boxes, value boxes, etc.
• The app should be published using Posit Connect Cloud and the URL for the working app clearly printed in your rendered PDF so we can easily access it during the evaluation.
• Avoid using large data files. The free tier for Posit Connect Cloud limits the memory allocation for deployed apps to 4 gigabytes, so you can’t load large data files or include very computationally intensive code in the app. Otherwise it may work when you test it locally, but fail when deployed. I recommend testing the deployment well before the submission deadline.

WarningDon’t do these things

• If your project team is creating a Shiny application, you may not use anything you developed for that app on this homework assignment. Choose a different dataset.

Wrap up

Submission

ImportantThis is different!

You will still submit a PDF to Gradescope that contains your source code for each exercise, but you also need to deploy the Shiny apps.

• Write your code for each Shiny in the respective app.R scripts.
• Deploy each Shiny app using Posit Connect Cloud.
• Render hw-07.qmd as a PDF and submit it using Gradescope. The rendered PDF should automatically contain the printed source code from each app.R file, along with your written narrative. Make sure you include a visible URL for each deployed Shiny app. TAs cannot click embedded links within the Gradescope interface. You must print the entire URL so it is visible to the reader, otherwise we will not be able to evaluate your app.

• Go to http://www.gradescope.com and click Log in in the top right corner.
• Click School Credentials \(\rightarrow\) Cornell University NetID and log in using your NetID credentials.
• Click on your INFO 5001 course.
• Click on the assignment, and you’ll be prompted to submit it.
• Mark all the pages associated with exercise. All the pages of homework should be associated with at least one question (i.e., should be “checked”).

Grading

• Exercise 1: 15 points
• Exercise 2: 31 points
• Workflow + formatting: 4 points
• Total: 50 points

NoteWorkflow & formatting criteria

The “Workflow & formatting” component assesses the reproducible workflow. This includes:

• Following {tidyverse} code style
• All code being visible in rendered PDF without automatic wrapping (no more than 80 characters)