Image by Editor | Midjourney
R Shiny helps create interactive web apps using R. It is simple and easy to use, allowing you to build dashboards and data tools without web coding. Shiny apps run in a browser, so anyone can use them, and it works well with R for real-time data updates.
As many data scientists and statisticians use Shiny for creating reports and analysis, this article will show you how to build web apps with R Shiny.
Core Components of Shiny
A Shiny application consists of two main components:
- UI (User Interface): Defines how the app looks and what users interact with. It includes input controls (like buttons and sliders) and output areas (like plots and tables). The fluidPage() function is commonly used to arrange UI elements.
- Server: Contains the logic that processes inputs and generates outputs. It uses R functions to analyze data and update the UI dynamically. The server() function handles data processing, visualization, and other computations.
These components are connected using the shinyApp(ui, server) function, which launches the application.
Setting Up Shiny
To get started, install the shiny package in R:
install.packages("shiny")
Building a Basic Shiny App
A simple Shiny app consists of a UI and a server function. Below is an example of a minimal Shiny application:
library(shiny)
# Define UI
ui <- fluidPage(
titlePanel("Basic Shiny App"),
sidebarLayout(
sidebarPanel(
sliderInput("num", "Choose a Number:", min = 1, max = 100, value = 50)
),
mainPanel(
textOutput("selected_number")
)
)
)
# Define Server
server <- function(input, output) {
output$selected_number <- renderText({
paste("You selected:", input$num)
})
}
# Run the application
shinyApp(ui = ui, server = server)
In this example, a simple Shiny app allows users to select a number using a slider.
- fluidPage(): Creates a responsive layout.
- titlePanel(): Sets the title of the app.
- sidebarLayout(): Divides the UI into a sidebar and main panel.
- renderText(): Reactively updates the displayed output based on user input.
Key Elements of an Interactive Shiny App
Dynamic UI Updates
The UI can change based on user input. Functions like uiOutput() and renderUI() help create flexible layouts.
library(shiny)
# Define UI
ui <- fluidPage(
selectInput("dataset", "Choose a dataset:", choices = c("mtcars", "iris")),
uiOutput("dynamic_ui") # Placeholder for dynamic UI elements
)
# Define Server
server <- function(input, output, session) {
output$dynamic_ui <- renderUI({
if (input$dataset == "mtcars") {
sliderInput("mpg", "MPG Filter:", min = 10, max = 35, value = 20)
}
})
}
# Run the application
shinyApp(ui = ui, server = server)
Data Visualization
Shiny works well with ggplot2 and plotly for interactive graphs. Users can explore and analyze data visually.
library(shiny)
library(ggplot2)
# Define UI
ui <- fluidPage(
plotOutput("plot") # Placeholder for the plot
)
# Define Server
server <- function(input, output, session) {
output$plot <- renderPlot({
ggplot(mtcars, aes(x = mpg, y = hp)) +
geom_point()
})
}
# Run the App
shinyApp(ui = ui, server = server)
To make plots interactive, use plotly:
library(shiny)
library(ggplot2)
library(plotly)
# Define UI
ui <- fluidPage(
plotlyOutput("plotly_plot") # Placeholder for the Plotly plot
)
# Define Server
server <- function(input, output, session) {
output$plotly_plot <- renderPlotly({
ggplotly(
ggplot(mtcars, aes(x = mpg, y = hp)) +
geom_point()
)
})
}
# Run the App
shinyApp(ui = ui, server = server)
Tables and Data Outputs
Shiny supports interactive tables using the DT package. Users can filter, sort, and search data.
library(shiny)
library(DT) # Load DT for interactive tables
# Define UI
ui <- fluidPage(
DTOutput("table") # Placeholder for the DataTable
)
# Define Server
server <- function(input, output, session) {
output$table <- renderDT({
datatable(mtcars, options = list(pageLength = 5))
})
}
# Run the App
shinyApp(ui = ui, server = server)
Advanced Features in Shiny
Working with Reactive Polling and Timers
Shiny can update data automatically with invalidateLater(). This is useful for real-time applications.
library(shiny)
ui <- fluidPage(
textOutput("time")
)
server <- function(input, output, session) {
output$time <- renderText({
invalidateLater(1000, session) # Auto-refresh every second
paste("Current time:", Sys.time())
})
}
shinyApp(ui, server)
Conditional Panel Updates
UI elements can appear or disappear based on user input. conditionalPanel() helps create dynamic forms.
library(shiny)
ui <- fluidPage(
radioButtons("choice", "Select Option:", choices = c("Show", "Hide")),
conditionalPanel(
condition = "input.choice == 'Show'",
textOutput("message")
)
)
server <- function(input, output, session) {
output$message <- renderText("Hello, this panel is visible!")
}
shinyApp(ui, server)
Enhancing UI with Custom Styling
Using CSS for Styling Shiny Apps
You can style Shiny apps with CSS to improve appearance. Change colors, fonts, and layout for a better design.
Create a CSS file (style.css):
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h2 {
color: #007bff;
}
Include it in your Shiny app:
library(shiny)
ui <- fluidPage(
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "style.css")),
h2("Styled mtcars Table"),
tableOutput("mtcars_table")
)
server <- function(input, output, session) {
output$mtcars_table <- renderTable({
head(mtcars) # Display first few rows
})
}
shinyApp(ui, server)
Adding JavaScript for Advanced Interactivity
JavaScript can add animations, tooltips, and other UI effects. This makes Shiny apps more engaging and interactive.
library(shiny)
library(ggplot2)
ui <- fluidPage(
tags$head(
tags$script(HTML("
$(document).ready(function(){
$('#plot-container').on('click', function(){
$(this).toggleClass('highlighted');
});
});
")),
tags$style(HTML("
.highlighted { border: 3px solid #f5b7b1 !important; }
.fade-in { animation: fadeIn 1s; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
"))
),
titlePanel("Enhanced mtcars Scatterplot"),
sidebarLayout(
sidebarPanel(
selectInput("xvar", "X-axis Variable:", choices = names(mtcars)),
selectInput("yvar", "Y-axis Variable:", choices = names(mtcars), selected = "mpg")
),
mainPanel(
div(id = "plot-container", plotOutput("plot", hover = "plot_hover")),
verbatimTextOutput("hover_info")
)
)
)
server <- function(input, output, session) {
output$plot <- renderPlot({
ggplot(mtcars, aes_string(x = input$xvar, y = input$yvar)) +
geom_point(size = 3, color = "blue") +
theme_minimal()
})
output$hover_info <- renderText({
hover <- input$plot_hover
if (!is.null(hover)) {
row 0) {
return(paste("Car:", rownames(row)))
}
}
return("Hover over a point to see details")
})
}
shinyApp(ui, server)
Final Thoughts
R Shiny makes it easy to build interactive web apps with R, combining UI and server into one to create dynamic tools and dashboards. Features like reactivity and data visualization can help improve the user experience. Shiny also supports customization with CSS and JavaScript. It is a great choice for data scientists and analysts who, with Shiny, can turn data into useful, interactive applications.
Going through the code in Creating Interactive Web Applications with R Shiny
The code above for Hover example at
if (!is.null(hover)) {
row 0) {
does not work, something is missing ?
row 0
is not right
Thanks
Kim
You’re correct — the condition `row 0)` is syntactically incorrect and likely the result of a copy-paste or formatting issue in the example code.
### Here’s what’s likely intended in the **hover example**:
In Shiny, you often handle hover events like this (for example, using `plotOutput(“plot”, hover = hoverOpts(…))`) and then check what part of the plot the mouse is hovering over.
In the server logic, you might see code similar to this:
“`r
output$hover_info <- renderPrint({ hover <- input$plot_hover if (!is.null(hover)) { # Find the nearest point to the hover event point <- nearPoints(my_data, hover, threshold = 10, maxpoints = 1) if (nrow(point) > 0) {
point
}
}
})
“`
### Breakdown:
* `hover <- input$plot_hover`: retrieves the hover event. * `nearPoints(...)`: gets the closest data point to the hover coordinates. * `if (nrow(point) > 0)`: this is the **correct** check to see if a point was found.
### Fix:
If you saw something like:
“`r
if (!is.null(hover)) {
row 0) {
“`
It **should** probably be:
“`r
if (!is.null(hover)) {
point <- nearPoints(my_data, hover, threshold = 10, maxpoints = 1) if (nrow(point) > 0) {
…
}
}
“`
Here is the complete code for the output$hover_info <- renderText({ section.
output$hover_info <- renderText({
hover <- input$plot_hover
if (!is.null(hover)) {
point 0) {
return(paste(“Car:”, rownames(point)))
}
}
return(“Hover over a point to see the car”)
})