Sliders in R

How to add slider controls to your plots in R with Plotly.


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Basic Slider Control

library(plotly)

df <- data.frame(x = c("1", "2", "3", "4", "5"), 
                 y = c("1", "1", "1", "1", "1")) 

# create steps for slider
steps <- list(
  list(args = list("marker.color", "red"), 
                    label = "Red", 
                    method = "restyle", 
                    value = "1"
                    ),
  list(args = list("marker.color", "green"), 
                    label = "Green", 
                    method = "restyle", 
                    value = "2"
                    ),
  list(args = list("marker.color", "blue"), 
                    label = "Blue", 
                    method = "restyle", 
                    value = "3"
                    )
  )

fig<- df 
fig <- fig %>% plot_ly(x = ~x, y = ~y,
          mode = "markers", 
          marker = list(size = 20,
                        color = 'green'), 
          type = "scatter") 
fig <- fig %>% layout(title = "Basic Slider",
         sliders = list(
           list(
             active = 1, 
             currentvalue = list(prefix = "Color: "), 
             pad = list(t = 60), 
             steps = steps))) 

fig

Sine Wave Slider

library(plotly)

x <- seq(0,10, length.out = 1000)

# create data
aval <- list()
for(step in 1:11){
  aval[[step]] <-list(visible = FALSE,
                      name = paste0('v = ', step),
                      x=x,
                      y=sin(step*x))
}
aval[3][[1]]$visible = TRUE

# create steps and plot all traces
steps <- list()
fig <- plot_ly()
for (i in 1:11) {
 fig <- add_lines(fig,x=aval[i][[1]]$x,  y=aval[i][[1]]$y, visible = aval[i][[1]]$visible, 
                 name = aval[i][[1]]$name, type = 'scatter', mode = 'lines', hoverinfo = 'name', 
                 line=list(color='00CED1'), showlegend = FALSE)

  step <- list(args = list('visible', rep(FALSE, length(aval))),
               method = 'restyle')
  step$args[[2]][i] = TRUE  
  steps[[i]] = step 
}  

# add slider control to plot
fig <- fig %>%
  layout(sliders = list(list(active = 3,
                             currentvalue = list(prefix = "Frequency: "),
                             steps = steps)))

fig
0246810−1−0.500.51
Frequency: step-3step-0step-1step-2step-3step-4step-5step-6step-7step-8step-9step-10

Mulitple Slider Controls

library(plotly)

df <- read.csv('https://raw.githubusercontent.com/plotly/datasets/master/globe_contours.csv')
df$id <- seq_len(nrow(df))

library(tidyr)
d <- df %>%
  gather(key, value, -id) %>%
  separate(key, c("l", "line"), "\\.") %>%
  spread(l, value)

geo <- list(
  showland = TRUE,
  showlakes = TRUE,
  showcountries = TRUE,
  showocean = TRUE,
  countrywidth = 0.5,
  landcolor = 'rgb(230, 145, 56)',
  lakecolor = 'rgb(0, 255, 255)',
  oceancolor = 'rgb(0, 255, 255)',
  projection = list(
    type = 'orthographic',
    rotation = list(
      lon = -100,
      lat = 40,
      roll = 0
    )
  ),
  lonaxis = list(
    showgrid = TRUE,
    gridcolor = toRGB("gray40"),
    gridwidth = 0.5
  ),
  lataxis = list(
    showgrid = TRUE,
    gridcolor = toRGB("gray40"),
    gridwidth = 0.5
  )
)

## add custom events

# dropdown
projections = data.frame(type = c("equirectangular", "mercator", "orthographic", "natural earth","kavrayskiy7", 
                                  "miller", "robinson", "eckert4", "azimuthal equal area","azimuthal equidistant", 
                                  "conic equal area", "conic conformal", "conic equidistant", "gnomonic", "stereographic", 
                                  "mollweide", "hammer", "transverse mercator", "albers usa", "winkel tripel"))

all_buttons <- list()
for (i in 1:length(projections[,])) { 
  all_buttons[[i]] <- list(method = "relayout",
                           args = list(list(geo.projection.type = projections$type[i])),
                           label = projections$type[i])
}

# sliders
lon_range = data.frame(seq(-180, 180, 10))
lat_range = data.frame(seq(-90, 90, 10))
colnames(lon_range) <- "x"
colnames(lat_range) <- "x"

all_lat <- list()
for (i in 1:length(lat_range[,])) { 
  all_lat[[i]] <- list(method = "relayout",
                       args = list(list(geo.projection.rotation.lat = lat_range$x[i])),
                       label = lat_range$x[i])
}

all_lon <- list()
for (i in 1:length(lon_range[,])) {  
  all_lon[[i]] <- list(method = "relayout", 
                       args = list(list(geo.projection.rotation.lon = lon_range$x[i])),
                       label = lon_range$x[i]) 
} 

# annotations
annot <- list(x = 0, y=0.8, text = "Projection", yanchor = 'bottom', 
              xref = 'paper', xanchor = 'right',
              showarrow = FALSE)


# original d3-globe with contours
fig<- plot_geo(d) 
fig <- fig %>% group_by(line) 
fig <- fig %>% add_lines(x = ~lon, y = ~lat, color = ~line, colors = 'Reds') 
fig <- fig %>% layout(
  showlegend = FALSE, geo = geo
)

# plot with custom events
fig<- fig
fig <- fig %>% layout(annotations = annot,
                      updatemenus = list(list(active = 2, x = 0, y = 0.8, 
                                              buttons=all_buttons)),
                      sliders = list(

                        list(
                          active = (length(lon_range[,])-1)/2, 
                          currentvalue = list(prefix = "Longitude: "), 
                          pad = list(t = 20), 

                          steps = all_lon),

                        list(
                          active = (length(lat_range[,])-1)/2, 
                          currentvalue = list(prefix = "Latitude: "), 
                          pad = list(t = 100), 

                          steps = all_lat)))

fig
Longitude: 0-180-150-120-90-60-300306090120150180Latitude: 0-90-70-50-30-101030507090Projectionorthographic

Reference

See https://plotly.com/r/reference/#layout-updatemenus for more information and options!

What About Dash?

Dash for R is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash for R at https://dashr.plot.ly/installation.

Everywhere in this page that you see fig, you can display the same figure in a Dash for R application by passing it to the figure argument of the Graph component from the built-in dashCoreComponents package like this:

library(plotly)

fig <- plot_ly() 
# fig <- fig %>% add_trace( ... )
# fig <- fig %>% layout( ... ) 

library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)

app <- Dash$new()
app$layout(
    htmlDiv(
        list(
            dccGraph(figure=fig) 
        )
     )
)

app$run_server(debug=TRUE, dev_tools_hot_reload=FALSE)