Skip to content

Commit ef9680c

Browse files
GammerdingerGammerdinger
authored
Creates layouts answer key
1 parent a87ebe6 commit ef9680c

1 file changed

Lines changed: 225 additions & 0 deletions

File tree

‎RShiny/lessons/layouts-Answer_key.md‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
---
2+
title: "Uploading and dowloading data in RShiny - Answer Key"
3+
author:
4+
- Will Gammerdinger
5+
date: "2025-11-10"
6+
license: "CC-BY-4.0"
7+
editor_options:
8+
markdown:
9+
wrap: 72
10+
---
11+
12+
# Exercise 1
13+
14+
Lets add a layout to the R Shiny app from the exercise in the previous lesson. That app should look like:
15+
16+
```
17+
# Load libraries
18+
library(shiny)
19+
library(DT)
20+
library(tidyverse)
21+
22+
# User Interface
23+
ui <- fluidPage(
24+
# Upload the file
25+
fileInput("input_file", "Upload file"),
26+
# Select from the dropdown menu the column you want on the x-axis
27+
selectInput("x_axis_input", "Select x-axis", choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")),
28+
# Select from the dropdown menu the column you want on the y-axis
29+
selectInput("y_axis_input", "Select y-axis", choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")),
30+
# The output plot
31+
plotOutput("plot"),
32+
# The download plot button
33+
downloadButton("download_button", "Download the data .png")
34+
)
35+
36+
# Server
37+
server <- function(input, output) {
38+
# Reactive expression to hold the uploaded data
39+
iris_data <- reactive({
40+
req(input$input_file)
41+
read.csv(input$input_file$datapath)
42+
})
43+
# Reactive expression to create a scatterplot from the uploaded data and user selected axes
44+
iris_plot <- reactive ({
45+
ggplot(iris_data()) +
46+
geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))
47+
})
48+
# Render the plot from the iris_plot() reactive expression
49+
output$plot <- renderPlot({
50+
iris_plot()
51+
})
52+
# Download the data
53+
output$download_button <- downloadHandler(
54+
# The placeholder name for the file will be called iris_plot.png
55+
filename = function() {
56+
"iris_plot.png"
57+
},
58+
# The content of the file will be the contents of the iris_plot() reactive expression
59+
content = function(file) {
60+
png(file)
61+
print(iris_plot())
62+
dev.off()
63+
}
64+
)
65+
}
66+
67+
# Run the app
68+
shinyApp(ui = ui, server = server)
69+
```
70+
71+
We are going to try to create an app that looks like:
72+
73+
<p align="center"><iframe src="https://hcbc.connect.hms.harvard.edu/layout_exercise_demo/?showcase=0" width="800" height="600px" data-external="1"></iframe></p>
74+
75+
1. Place the `fileInput()` and `selectInput()`s within a sidebar with the plot in the `mainPanel()`. Underneath the `sidepanelLayout()`, place a themetic break and underneath that place a right-aligned `downloadButton()`.
76+
77+
```
78+
# Load libraries
79+
library(shiny)
80+
library(tidyverse)
81+
82+
ui <- fluidPage(
83+
sidebarLayout(
84+
sidebarPanel(
85+
# Upload the file
86+
fileInput("input_file", "Upload file"),
87+
# Select from the dropdown menu the column you want on the x-axis
88+
selectInput("x_axis_input", "Select x-axis", choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")),
89+
# Select from the dropdown menu the column you want on the y-axis
90+
selectInput("y_axis_input", "Select y-axis", choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"))
91+
),
92+
mainPanel(
93+
# The output plot
94+
plotOutput("plot")
95+
)
96+
),
97+
hr(),
98+
fluidRow(
99+
column(12,
100+
align = "right",
101+
# The download plot button
102+
downloadButton("download_button", "Download the data .png")
103+
)
104+
)
105+
)
106+
107+
# Server
108+
server <- function(input, output) {
109+
# Reactive expression to hold the uploaded data
110+
iris_data <- reactive({
111+
req(input$input_file)
112+
read.csv(input$input_file$datapath)
113+
})
114+
# Reactive expression to create a scatterplot from the uploaded data and user selected axes
115+
iris_plot <- reactive ({
116+
ggplot(iris_data()) +
117+
geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))
118+
})
119+
# Render the plot from the iris_plot() reactive expression
120+
output$plot <- renderPlot({
121+
iris_plot()
122+
})
123+
# Download the data
124+
output$download_button <- downloadHandler(
125+
# The placeholder name for the file will be called iris_plot.png
126+
filename = function() {
127+
"iris_plot.png"
128+
},
129+
# The content of the file will be the contents of the iris_plot() reactive expression
130+
content = function(file) {
131+
png(file)
132+
print(iris_plot())
133+
dev.off()
134+
}
135+
)
136+
}
137+
138+
# Run the app
139+
shinyApp(ui = ui, server = server)
140+
```
141+
142+
2. Add the `"superhero"` theme from `shinythemes` to the app.
143+
144+
*Hint: Be sure to add `library(shinythemes)` and make sure it is loaded.*
145+
146+
```
147+
# Load libraries
148+
library(shiny)
149+
library(ggplot2)
150+
library(shinythemes)
151+
152+
ui <- fluidPage(theme = shinytheme("superhero"),
153+
...
154+
)
155+
```
156+
157+
The final app should look like:
158+
159+
```{r}
160+
#| label: complete_answer
161+
#| eval: false
162+
# Load libraries
163+
library(shiny)
164+
library(ggplot2)
165+
library(shinythemes)
166+
167+
ui <- fluidPage(theme = shinytheme("superhero"),
168+
sidebarLayout(
169+
sidebarPanel(
170+
# Upload the file
171+
fileInput("input_file", "Upload file"),
172+
# Select from the dropdown menu the column you want on the x-axis
173+
selectInput("x_axis_input", "Select x-axis", choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")),
174+
# Select from the dropdown menu the column you want on the y-axis
175+
selectInput("y_axis_input", "Select y-axis", choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"))
176+
),
177+
mainPanel(
178+
# The output plot
179+
plotOutput("plot")
180+
)
181+
),
182+
hr(),
183+
fluidRow(
184+
column(12,
185+
align = "right",
186+
# The download plot button
187+
downloadButton("download_button", "Download the data .png")
188+
)
189+
)
190+
)
191+
192+
# Server
193+
server <- function(input, output) {
194+
# Reactive expression to hold the uploaded data
195+
iris_data <- reactive({
196+
req(input$input_file)
197+
read.csv(input$input_file$datapath)
198+
})
199+
# Reactive expression to create a scatterplot from the uploaded data and user selected axes
200+
iris_plot <- reactive ({
201+
ggplot(iris_data()) +
202+
geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))
203+
})
204+
# Render the plot from the iris_plot() reactive expression
205+
output$plot <- renderPlot({
206+
iris_plot()
207+
})
208+
# Download the data
209+
output$download_button <- downloadHandler(
210+
# The placeholder name for the file will be called iris_plot.png
211+
filename = function() {
212+
"iris_plot.png"
213+
},
214+
# The content of the file will be the contents of the iris_plot() reactive expression
215+
content = function(file) {
216+
png(file)
217+
print(iris_plot())
218+
dev.off()
219+
}
220+
)
221+
}
222+
223+
# Run the app
224+
shinyApp(ui = ui, server = server)
225+
```

0 commit comments

Comments
 (0)