Added practical exercise

Gammerdinger · Gammerdinger · commit 056ec5aff39f · 2025-11-07T16:27:39.000-05:00
diff --git a/_quarto.yml b/_quarto.yml
@@ -38,7 +38,7 @@ website:
           - lessons/01_syntax_and_structure.qmd
           - lessons/02_inputs.qmd
           - lessons/03_visuals.qmd
-          - lessons/04_input_practical.qmd
+          - lessons/04_input_output_practical
           
       - section: "Day 2:"
         contents:
diff --git a/docs/lessons/01_syntax_and_structure.html b/docs/lessons/01_syntax_and_structure.html
@@ -198,11 +198,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
diff --git a/docs/lessons/02_inputs.html b/docs/lessons/02_inputs.html
@@ -198,11 +198,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
diff --git a/docs/lessons/03_visuals.html b/docs/lessons/03_visuals.html
@@ -198,11 +198,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
@@ -690,7 +687,7 @@ <h3 class="anchored" data-anchor-id="brush">Brush</h3>
 </div>
 <p>Now you have learned how to make your plots interactive!</p>
 <hr>
-<p><a href="../lessons/04_input_practical.html">Next Lesson &gt;&gt;</a></p>
+<p><a href="../lessons/04_input_output_practical.html">Next Lesson &gt;&gt;</a></p>
 <p><a href="../schedule/schedule_AZ.html">Back to Schedule</a></p>
 <hr>
 <p><em>This lesson has been developed by members of the teaching team at the <a href="http://bioinformatics.sph.harvard.edu/">Harvard Chan Bioinformatics Core (HBC)</a>. These are open access materials distributed under the terms of the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution license</a> (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.</em></p>
@@ -1559,7 +1556,7 @@ <h3 class="anchored" data-anchor-id="brush">Brush</h3>
 <span id="cb17-437"><a href="#cb17-437" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb17-438"><a href="#cb17-438" aria-hidden="true" tabindex="-1"></a>***</span>
 <span id="cb17-439"><a href="#cb17-439" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb17-440"><a href="#cb17-440" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Next Lesson &gt;&gt;</span><span class="co">](04_input_practical.qmd)</span></span>
+<span id="cb17-440"><a href="#cb17-440" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Next Lesson &gt;&gt;</span><span class="co">](04_input_output_practical.qmd)</span></span>
 <span id="cb17-441"><a href="#cb17-441" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb17-442"><a href="#cb17-442" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Back to Schedule</span><span class="co">](../schedule/schedule_AZ.qmd)</span></span>
 <span id="cb17-443"><a href="#cb17-443" aria-hidden="true" tabindex="-1"></a></span>
diff --git a/docs/lessons/04_input_output_practical-Answer_key.html b/docs/lessons/04_input_output_practical-Answer_key.html
diff --git a/docs/lessons/04_input_output_practical.html b/docs/lessons/04_input_output_practical.html
diff --git a/docs/lessons/05_uploading_downloading_data.html b/docs/lessons/05_uploading_downloading_data.html
@@ -194,11 +194,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
diff --git a/docs/lessons/06_layouts.html b/docs/lessons/06_layouts.html
@@ -194,11 +194,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
diff --git a/docs/lessons/07_hosting.html b/docs/lessons/07_hosting.html
@@ -194,11 +194,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
diff --git a/docs/lessons/08_layout_practical.html b/docs/lessons/08_layout_practical.html
@@ -194,11 +194,8 @@
   </div>
 </li>
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../lessons/04_input_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
-  </div>
-</li>
+ <span class="menu-text">lessons/04_input_output_practical</span>
+  </li>
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
diff --git a/docs/schedule/schedule_AZ.html b/docs/schedule/schedule_AZ.html
@@ -202,7 +202,7 @@ <h3 class="anchored" data-anchor-id="day-1">Day 1</h3>
 </tr>
 <tr class="even">
 <td style="text-align: center;">10:45 - 11:00</td>
-<td style="text-align: center;"><a href="../lessons/04_input_practical.html">Practical</a></td>
+<td style="text-align: center;"><a href="../lessons/04_input_output_practical">Practical</a></td>
 <td style="text-align: center;">Will</td>
 </tr>
 </tbody>
@@ -746,7 +746,7 @@ <h2 class="anchored" data-anchor-id="interesting-input-widgets">Interesting Inpu
 <span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a><span class="pp">|</span> 9:35 - 10:10 <span class="pp">|</span> <span class="co">[</span><span class="ot">Input options</span><span class="co">](../lessons/02_inputs.qmd)</span> <span class="pp">|</span> Will <span class="pp">|</span></span>
 <span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a><span class="pp">|</span> 10:10 - 10:15 <span class="pp">|</span> Break <span class="pp">|</span> <span class="pp">|</span></span>
 <span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a><span class="pp">|</span> 10:15 - 10:45 <span class="pp">|</span> <span class="co">[</span><span class="ot">Visualization and Interactive Visuals</span><span class="co">](../lessons/03_visuals.qmd)</span> <span class="pp">|</span>  Will <span class="pp">|</span></span>
-<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a><span class="pp">|</span> 10:45 - 11:00 <span class="pp">|</span> <span class="co">[</span><span class="ot">Practical</span><span class="co">](../lessons/04_input_practical.qmd)</span> <span class="pp">|</span> Will <span class="pp">|</span></span>
+<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a><span class="pp">|</span> 10:45 - 11:00 <span class="pp">|</span> <span class="co">[</span><span class="ot">Practical</span><span class="co">](../lessons/04_input_output_practical)</span> <span class="pp">|</span> Will <span class="pp">|</span></span>
 <span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a><span class="fu">### Day 2</span></span>
diff --git a/docs/schedule/self-learning.html b/docs/schedule/self-learning.html
@@ -184,7 +184,7 @@ <h1>Lessons</h1>
 <li><a href="../lessons/01_syntax_and_structure.html">R Shiny App Structure and Syntax</a></li>
 <li><a href="../lessons/02_inputs.html">Input options</a></li>
 <li><a href="../lessons/03_visuals.html">Visualization and Interactive Visuals</a></li>
-<li><a href="../lessons/04_input_practical.html">Input Practical</a></li>
+<li><a href="../lessons/04_input_output_practical.html">Input Practical</a></li>
 <li><a href="../lessons/05_uploading_downloading_data.html">Uploading and Downloading Data</a></li>
 <li><a href="../lessons/06_layouts.html">Layouts</a></li>
 <li><a href="../lessons/07_hosting.html">Hosting Platforms</a></li>
@@ -695,7 +695,7 @@ <h2 class="anchored" data-anchor-id="interesting-input-widgets">Interesting Inpu
 <span id="cb1-28"><a href="#cb1-28" aria-hidden="true" tabindex="-1"></a><span class="ss">1. </span><span class="co">[</span><span class="ot">R Shiny App Structure and Syntax</span><span class="co">](../lessons/01_syntax_and_structure.qmd)</span></span>
 <span id="cb1-29"><a href="#cb1-29" aria-hidden="true" tabindex="-1"></a><span class="ss">2. </span><span class="co">[</span><span class="ot">Input options</span><span class="co">](../lessons/02_inputs.qmd)</span></span>
 <span id="cb1-30"><a href="#cb1-30" aria-hidden="true" tabindex="-1"></a><span class="ss">3. </span><span class="co">[</span><span class="ot">Visualization and Interactive Visuals</span><span class="co">](../lessons/03_visuals.qmd)</span></span>
-<span id="cb1-31"><a href="#cb1-31" aria-hidden="true" tabindex="-1"></a><span class="ss">4. </span><span class="co">[</span><span class="ot">Input Practical</span><span class="co">](../lessons/04_input_practical.qmd)</span></span>
+<span id="cb1-31"><a href="#cb1-31" aria-hidden="true" tabindex="-1"></a><span class="ss">4. </span><span class="co">[</span><span class="ot">Input Practical</span><span class="co">](../lessons/04_input_output_practical.qmd)</span></span>
 <span id="cb1-32"><a href="#cb1-32" aria-hidden="true" tabindex="-1"></a><span class="ss">5. </span><span class="co">[</span><span class="ot">Uploading and Downloading Data</span><span class="co">](../lessons/05_uploading_downloading_data.qmd)</span></span>
 <span id="cb1-33"><a href="#cb1-33" aria-hidden="true" tabindex="-1"></a><span class="ss">6. </span><span class="co">[</span><span class="ot">Layouts</span><span class="co">](../lessons/06_layouts.qmd)</span></span>
 <span id="cb1-34"><a href="#cb1-34" aria-hidden="true" tabindex="-1"></a><span class="ss">7. </span><span class="co">[</span><span class="ot">Hosting Platforms</span><span class="co">](../lessons/07_hosting.qmd)</span></span>
diff --git a/docs/search.json b/docs/search.json
@@ -1035,5 +1035,19 @@
     "title": "",
     "section": "Interesting Input Widgets",
     "text": "Interesting Input Widgets\n\nPicker\nshinyChakraSlider\n\n\nThese materials have been developed by members of the teaching team at the Harvard Chan Bioinformatics Core (HBC). These are open access materials distributed under the terms of the Creative Commons Attribution license (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited."
+  },
+  {
+    "objectID": "lessons/04_input_output_practical-Answer_key.html",
+    "href": "lessons/04_input_output_practical-Answer_key.html",
+    "title": "Input functions in RShiny - Answer Key",
+    "section": "",
+    "text": "Exercise 1\nLet’s focus on creating this app in several parts:\n\nCreate two selectInput() menus to choose the x- and y-axis to plot along with the resulting output plot.\n\n\nlibrary(shiny)\nlibrary(DT)\nlibrary(tidyverse)\n\n# User Interface\nui &lt;- fluidPage(\n  # Dropdown menu to select which column will be used for the x-axis\n  selectInput(inputId = \"x_axis_input\",\n              label = \"Select x-axis\",\n              choices = colnames(mtcars),\n              selected = \"mpg\"), \n   # Dropdown menu to select which column will be used for the y-axis\n  selectInput(inputId = \"y_axis_input\",\n              label = \"Select y-axis\",\n              choices = colnames(mtcars),\n              selected = \"disp\"),\n  # The output plot\n  plotOutput(outputId = \"plot\")\n)\n\n# Server\nserver &lt;- function(input, output) {\n  # Render the scatter plot\n  output$plot &lt;- renderPlot({\n    # Scatter plot creation\n    ggplot(mtcars) +\n      geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))\n  })\n}\n\n# Run the app\nshinyApp(ui = ui, server = server)\n\n\nAdd to our app the ability to brush over the plot and select points to place in a table beneath the plot.\n\n\nlibrary(shiny)\nlibrary(DT)\nlibrary(tidyverse)\n\n# User Interface\nui &lt;- fluidPage(\n  # Dropdown menu to select which column will be used for the x-axis\n  selectInput(inputId = \"x_axis_input\",\n              label = \"Select x-axis\",\n              choices = colnames(mtcars),\n              selected = \"mpg\"), \n   # Dropdown menu to select which column will be used for the y-axis\n  selectInput(inputId = \"y_axis_input\",\n              label = \"Select y-axis\",\n              choices = colnames(mtcars),\n              selected = \"disp\"),\n  # The output plot\n  plotOutput(outputId = \"plot\",\n             brush = \"plot_brush\"),\n  # The output table\n  DTOutput(\"table\")\n)\n\n# Server\nserver &lt;- function(input, output) {\n  # Render the scatter plot\n  output$plot &lt;- renderPlot({\n    # Scatter plot creation\n    ggplot(mtcars) +\n      geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))\n  })\n  # Render a table from points within the rectangle created by clicking and dragging over the plot\n  output$table &lt;- renderDT({\n    brushedPoints(mtcars, input$plot_brush)\n  })\n}\n\n# Run the app\nshinyApp(ui = ui, server = server)\n\n\n\n\n\n\n\nReuseCC-BY-4.0"
+  },
+  {
+    "objectID": "lessons/04_input_output_practical.html",
+    "href": "lessons/04_input_output_practical.html",
+    "title": "Input and Output Practical",
+    "section": "",
+    "text": "Input and Output Practical\nIn this practical we are going to create the app below:\nCreate app\nThis app let’s us select the columns that we would like to plot and then allows us to use a brush on our plot select an area of points that we are interested in evaluating.\n\n\n\n\n\n\nExercise 1\n\n\n\nLet’s focus on creating this app in several parts:\n\nCreate two selectInput() menus to choose the x- and y-axis to plot along with the resulting output plot.\nAdd to our app the ability to brush over the plot and select points to place in a table beneath the plot.\n\n\n\n\nNext Lesson &gt;&gt;\nBack to Schedule\n\nThis lesson has been developed by members of the teaching team at the Harvard Chan Bioinformatics Core (HBC). These are open access materials distributed under the terms of the Creative Commons Attribution license (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.\n\n\n\n\n\n\nReuseCC-BY-4.0"
   }
 ]
diff --git a/lessons/03_visuals.qmd b/lessons/03_visuals.qmd
@@ -405,7 +405,7 @@ Now you have learned how to make your plots interactive!
 
 ***
 
-[Next Lesson >>](04_input_practical.qmd)
+[Next Lesson >>](04_input_output_practical.qmd)
 
 [Back to Schedule](../schedule/schedule_AZ.qmd)
 
diff --git a/lessons/04_input_output_practical-Answer_key.qmd b/lessons/04_input_output_practical-Answer_key.qmd
@@ -0,0 +1,108 @@
+---
+title: "Input functions in RShiny - Answer Key"
+author:
+  - Will Gammerdinger
+date: "2025-11-05"
+license: "CC-BY-4.0"
+editor_options: 
+  markdown: 
+    wrap: 72
+---
+
+```{r}
+#| label: load_libraries_data
+#| echo: false
+# Load libraries and data
+library(shiny)
+library(DT)
+library(tidyverse)
+```
+
+# Exercise 1
+
+Let's focus on creating this app in several parts:
+
+1.  Create two `selectInput()` menus to choose the x- and y-axis to plot along with the resulting output plot.
+
+```{r}
+#| label: practical_first_half_answer
+#| eval: false
+library(shiny)
+library(DT)
+library(tidyverse)
+
+# User Interface
+ui <- fluidPage(
+  # Dropdown menu to select which column will be used for the x-axis
+  selectInput(inputId = "x_axis_input",
+              label = "Select x-axis",
+              choices = colnames(mtcars),
+              selected = "mpg"), 
+   # Dropdown menu to select which column will be used for the y-axis
+  selectInput(inputId = "y_axis_input",
+              label = "Select y-axis",
+              choices = colnames(mtcars),
+              selected = "disp"),
+  # The output plot
+  plotOutput(outputId = "plot")
+)
+
+# Server
+server <- function(input, output) {
+  # Render the scatter plot
+  output$plot <- renderPlot({
+    # Scatter plot creation
+    ggplot(mtcars) +
+      geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))
+  })
+}
+
+# Run the app
+shinyApp(ui = ui, server = server)
+```
+
+2. Add to our app the ability to brush over the plot and select points to place in a table beneath the plot.
+
+```{r}
+#| label: practical_full_answer
+#| eval: false
+library(shiny)
+library(DT)
+library(tidyverse)
+
+# User Interface
+ui <- fluidPage(
+  # Dropdown menu to select which column will be used for the x-axis
+  selectInput(inputId = "x_axis_input",
+              label = "Select x-axis",
+              choices = colnames(mtcars),
+              selected = "mpg"), 
+   # Dropdown menu to select which column will be used for the y-axis
+  selectInput(inputId = "y_axis_input",
+              label = "Select y-axis",
+              choices = colnames(mtcars),
+              selected = "disp"),
+  # The output plot
+  plotOutput(outputId = "plot",
+             brush = "plot_brush"),
+  # The output table
+  DTOutput("table")
+)
+
+# Server
+server <- function(input, output) {
+  # Render the scatter plot
+  output$plot <- renderPlot({
+    # Scatter plot creation
+    ggplot(mtcars) +
+      geom_point(aes_string(x = input$x_axis_input, y = input$y_axis_input))
+  })
+  # Render a table from points within the rectangle created by clicking and dragging over the plot
+  output$table <- renderDT({
+    brushedPoints(mtcars, input$plot_brush)
+  })
+}
+
+# Run the app
+shinyApp(ui = ui, server = server)
+```
diff --git a/lessons/04_input_output_practical.qmd b/lessons/04_input_output_practical.qmd
@@ -0,0 +1,63 @@
+---
+title: "Input and Output Practical"
+description: |
+  Now that we have explored our inputs and outputs in RShiny, we are going to put it all together to create the app using the `mtcars` dataset`.
+author:
+  - Will Gammerdinger
+  - Meeta Mistry
+date: "2025-10-29"
+categories:
+  - R
+  - Shiny
+  - Input Widgets
+  - User Interaction
+  - Data Visualization
+  - Interactive Plots
+  - Tables
+keywords:
+  - input widgets
+  - Shiny inputs
+  - selectInput
+  - UI
+  - plotOutput
+  - renderPlot
+  - DTOutput
+  - renderDT
+  - data tables
+  - interactive plots
+  - brushedPoints
+  - plot interactivity
+  - brush
+license: "CC-BY-4.0"
+editor_options: 
+  markdown: 
+    wrap: 72
+---
+
+# Input and Output Practical
+
+In this practical we are going to create the app below:
+
+**Create app**
+
+This app let's us select the columns that we would like to plot and then allows us to use a brush on our plot select an area of points that we are interested in evaluating.
+
+:::{.callout-tip}
+# [**Exercise 1**](04_input_output_practical-Answer_key.qmd#exercise-3)
+
+Let's focus on creating this app in several parts:
+
+1.  Create two `selectInput()` menus to choose the x- and y-axis to plot along with the resulting output plot.
+
+2. Add to our app the ability to brush over the plot and select points to place in a table beneath the plot.
+:::
+
+***
+
+[Next Lesson >>](05_uploading_downloading_data.qmd)
+
+[Back to Schedule](../schedule/schedule_AZ.qmd)
+
+*** 
+
+*This lesson has been developed by members of the teaching team at the [Harvard Chan Bioinformatics Core (HBC)](http://bioinformatics.sph.harvard.edu/). These are open access materials distributed under the terms of the [Creative Commons Attribution license](https://creativecommons.org/licenses/by/4.0/) (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.*
diff --git a/lessons/04_input_practical.qmd b/lessons/04_input_practical.qmd
diff --git a/schedule/schedule_AZ.qmd b/schedule/schedule_AZ.qmd
diff --git a/schedule/self-learning.qmd b/schedule/self-learning.qmd
