Shiny Input Slider: Movement of graph points need to be continuous and not frame by frame

[dinks]

Hi All,

I have some R code using shinyUI and shinyServer which works. I have created a bubble chart where the size of the bubble is dependent on the amount and is positioned based on the profitability (as a % of the amount) on the x-axis and the volatility (as a % of the amount) on the y-axis. I have added a sliderInput that uses the year column so that the bubbles can change as the slider changes year.

The problem i have is that when i move the slider by year the bubbles move statically frame by frame and not in a continuous way (In other words i would like to see the bubble traveling from point to point rather then disappearing and reappearing at the new position).

Is there a way to update the Slider functionality to do this?

Code:

UI
divvar = c("All"="All","Equity"="Equity", "Bonds"="Bonds")

shinyUI(fluidPage(

titlePanel("MapBubble"), # Application title
sidebarLayout(

sidebarPanel(     
  
  selectInput("Division","Select Division",divvar,selected = "All"),
  sliderInput("Year","Select Year",2018,2020,1,sep = ""),
  tableOutput("view")
),

mainPanel(plotOutput("plot")
)

)
)
)

Server:
shinyServer(function(input, output) {

outVar <- reactive({
df %>% filter (Division == input$Division, Year == input$Year)

})

outVar2 <- reactive({
df %>% filter (Year == input$Year)

})

output$plot <- renderPlot({

G = ggplot( if(input$Division == "All") {outVar2()}
            
            else
              
            {outVar()},
  aes(x = Profit, y = Vol, size = Amount, color = Class)) +
  geom_point(alpha = 0.2) + scale_size(range = c(5,40)) +
  geom_text(aes(label = Class), size = 5)+
geom_vline(xintercept = 0, linetype="dotted", color = "black", size=0.75)+
  scale_y_continuous(labels = scales::percent,expand = c(0, 0), limits = c(y_low,y_high)) +
  scale_x_continuous(labels = scales::percent,expand = c(0, 0), limits = c(x_low,x_high)) +
  labs(
    title = "Profitability vs Volatility", 
    x = "Profitability %", 
    y = "Volatility %") +
  theme_bw() +
  theme(legend.position = "none")

G

})

output$view <- renderTable({

if(input$Division == "All")
  
{ outVar2() %>% select(Class,Vol, Profit,Amount)  }

else
  
{ outVar() %>% select(Class,Vol, Profit,Amount)   }

})

}

)

[nirgrahamuk]

I'm not aware of any such functionality offered by plotly, however it seems the sort of thing that could be done using custom d3js code. The R package r2d3 enables this, however D3 is pretty much its own graphing language to learn, with its own idioms etc, so its a rather non-trivial approach sadly...

[dinks]

That is a shame i am no expert on r2d3. However i believe i have found a work around. I have removed the inputSlider in the UI and added a frame = Year into the server piece. This acts in the same way as the slide but gives me the functionality i need.

output$plot <- renderPlotly({
print(
ggplotly(ggplot( if(input$Division == "All") {df}

                   else
                     
                   {outVar()},
                   aes(x = Profit, y = Vol, size = Amount, color = Class, **frame = Year**)) +
             geom_point(alpha = 0.2) + scale_size(range = c(5,40)) +
             geom_text(aes(label = Class), size = 5)+
             geom_vline(xintercept = 0, linetype="dotted", color = "black", size=0.75)+
             scale_y_continuous(labels = scales::percent,expand = c(0, 0), limits = c(y_low,y_high)) +
             scale_x_continuous(labels = scales::percent,expand = c(0, 0), limits = c(x_low,x_high)) +
             labs(
               title = "Profitability vs Volatility", 
               x = "Profitability %", 
               y = "Volatility %") +
             theme_bw() +
             theme(legend.position = "none") +
             theme(panel.grid.major = element_blank(), panel.grid.minor = element_blank(),
                   panel.background = element_blank(), axis.line = element_line(colour = "black")) +
             theme(panel.spacing = unit(2, "lines")))
  )

})