library(palmerpenguins)
library(ggplot2)
library(shiny)
library(bslib)
#################
### Define UI ###
#################
ui <- page_sidebar(
title = h1("Penguins dashboard"), #Use H1 header
# Define sidebar inputs
sidebar = sidebar(
title = strong("Histogram controls"), #make text bold
#create dropdown selection for numeric columns
varSelectInput(
inputId = "var",
label = "Select variable",
data = dplyr::select_if(penguins, is.numeric)
),
radioButtons(inputId = "spp",
label = em("Select a species"), #make text italic
choices = unique(penguins$species)
),
#create slider input for histogram
sliderInput("bins",
code("Number of bins"), #make text look like monospace code
min = 3,
max = 100,
value = 30,
step = 1),
hr(), #add horizontal line
# Brief description of dataset (as paragraph)
p("Data were collected and made available by Dr. Kristen Gorman and the Palmer Station, Antarctica LTER, a member of the Long Term Ecological Research Network."),
p("The", code("{palmerpenguins}"), "package contains two datasets. Both datasets contain data for 344 penguins. There are 3 different species of penguins in this dataset, collected from 3 islands in the Palmer Archipelago, Antarctica. More info can be found at this link:"),
# Link to {palmerpenguins} package website
a("{palmerpenguins}", href = "https://allisonhorst.github.io/palmerpenguins/"),
# Artwork from Allison Horst
tags$figure(
img(src = "https://allisonhorst.github.io/palmerpenguins/reference/figures/lter_penguins.png",
width = "100%"),
tags$figcaption(em("Artwork by @allison_horst"))
)
),
# Main panel content
h3("Exploration of Palmer penguins data"),
plotOutput("hist")
)
#####################
### Define server ###
#####################
server <- function(input, output, session) {
# Create histogram based on selection from inputs
output$hist <- renderPlot({
ggplot(penguins[penguins$species == input$spp,]) +
geom_histogram(aes(!!input$var), color = "black", fill = "cadetblue",
bins = input$bins) +
theme_bw(base_size = 20)
})
}
###############
### Run app ###
###############
shinyApp(ui, server)2 Introduction to HTML and {htmltools}
While this course does not expect any knowledge of HTML coding, adding a few tools to our skill set will be immensely helpful as we customize and provide added functionality to our Shiny apps. If you are already familiar with Markdown syntax (in R Markdown, Quarto, or other files), we will show how to use some of these same features in HTML to extend your Shiny app and present materials as desired.
While you likely did not explicitly load in the {htmltools} R package, it is a dependency of {shiny} and has already been installed on your computer. We will use functions from this package (which are technically HTML tags) to do things such as change font appearance (e.g., bold, italic), add hyperlinks, insert images, and more. These R functions are simply wrappers for the actual HTML tags; but feel free to use either approach depending on when and where you would like to use them. Below, you’ll find a table that shows the conversion between some of these HTML tags with Markdown syntax and how this affects the appearance of the document.
| Feature | Markdown | HTML | {htmltools} |
Output |
|---|---|---|---|---|
| italic | |
|
|
Shiny |
| bold | |
|
|
Shiny |
| header 1 | |
|
|
Header 1 |
| header 2 | |
|
|
Header 2 |
| header 3 | |
|
|
Header 3 |
| code | |
|
|
app |
| linebreak | |
|
|
Shiny app |
| hyperlink | |
|
|
Shiny |
| image | |
|
|
 |
More info on customizing your UI using HTML can be found here, in this glossary for Shiny HTML tags, as well as this book chapter from Outstanding User Interfaces with Shiny.
Exercise 1
Code for Exercise 1
Using the included code:
- Change format of text above histogram plot from an H3 header to bold text
- Add hyperlink (https://allisonhorst.github.io/palmerpenguins/) to the word “Data” at the beginning of first sentence in sidebar
- Remove other text/hyperlink for “{palmerpenguins}” from bottom of sidebar
Solution for Exercise 1
library(palmerpenguins)
library(ggplot2)
library(shiny)
library(bslib)
#################
### Define UI ###
#################
ui <- page_sidebar(
title = h1("Penguins dashboard"), #Use H1 header
# Define sidebar inputs
sidebar = sidebar(
title = strong("Histogram controls"), #make text bold
#create dropdown selection for numeric columns
varSelectInput(
inputId = "var",
label = "Select variable",
data = dplyr::select_if(penguins, is.numeric)
),
radioButtons(inputId = "spp",
label = em("Select a species"), #make text italic
choices = unique(penguins$species)
),
#create slider input for histogram
sliderInput("bins",
code("Number of bins"), #make text look like monospace code
min = 3,
max = 100,
value = 30,
step = 1),
hr(), #add horizontal line
# Brief description of dataset (as paragraph)
p(a("Data", href = "https://allisonhorst.github.io/palmerpenguins/"), "were collected and made available by Dr. Kristen Gorman and the Palmer Station, Antarctica LTER, a member of the Long Term Ecological Research Network."),
p("The", code("{palmerpenguins}"), "package contains two datasets. Both datasets contain data for 344 penguins. There are 3 different species of penguins in this dataset, collected from 3 islands in the Palmer Archipelago, Antarctica. More info can be found at this link:"),
# Artwork from Allison Horst
tags$figure(
img(src = "https://allisonhorst.github.io/palmerpenguins/reference/figures/lter_penguins.png",
width = "100%"),
tags$figcaption(em("Artwork by @allison_horst"))
)
),
# Main panel content
strong("Exploration of Palmer penguins data"),
plotOutput("hist")
)
#####################
### Define server ###
#####################
server <- function(input, output, session) {
# Create histogram based on selection from inputs
output$hist <- renderPlot({
ggplot(penguins[penguins$species == input$spp,]) +
geom_histogram(aes(!!input$var), color = "black", fill = "cadetblue",
bins = input$bins) +
theme_bw(base_size = 20)
})
}
###############
### Run app ###
###############
shinyApp(ui, server)