Changing height of d3heatmapOutput() in R Shiny

Question

I'm building a heatmap using R's d3heatmap library: https://cran.r-project.org/web/packages/d3heatmap/d3heatmap.pdf

I'd like to be able to allow a user to freely adjust (through the UI) the height = argument in the d3heatmapOutput() function.

Compare the following two code snippets (just copy/paste them directly into R Studio), where the only difference between them is the value of the height = argument in the d3heatmapOutput() :

library(d3heatmap)
library(shiny)
ui <- fluidPage(
  h1("A heatmap demo"),
  selectInput("palette", "Palette", c("YlOrRd", "RdYlBu", "Greens", "Blues")),
  checkboxInput("cluster", "Apply clustering"),
  d3heatmapOutput("heatmap", height = "400px")
  )
server <- function(input, output, session) {
  output$heatmap <- renderD3heatmap({
    d3heatmap(
      scale(mtcars),
      colors = input$palette,
      dendrogram = if (input$cluster) "both" else "none"
) })
    }
    shinyApp(ui, server)

VS.

library(d3heatmap)
library(shiny)
ui <- fluidPage(
  h1("A heatmap demo"),
  selectInput("palette", "Palette", c("YlOrRd", "RdYlBu", "Greens", "Blues")),
  checkboxInput("cluster", "Apply clustering"),
  d3heatmapOutput("heatmap", height = "1000px")
  )
server <- function(input, output, session) {
  output$heatmap <- renderD3heatmap({
    d3heatmap(
      scale(mtcars),
      colors = input$palette,
      dendrogram = if (input$cluster) "both" else "none"
) })
    }
    shinyApp(ui, server)

I'd like to allow the user to choose this value of height = themselves. However, because "400px" is a non-numeric argument, UI tools such as numericInput() don't work. Likewise, selectInput() doesn't work either, eg:

selectInput("foo", "Bar:", c("400px", "700px", "1000px"))

where d3heatmapOutput("heatmap", height = "foo") . Unfortunately, neither of these options work, which makes me wonder if I may have overlooked a simpler, more elegant option.

Answer 1

In this example you can control the hight of the plot using a slider. The idea is to render the map on the server side and to use paste0 function to set desired size in pixels.

library(d3heatmap)
library(shiny)
ui <- fluidPage(
  h1("A heatmap demo"),


  sliderInput("pixels", "size", value = 400, min = 100, max = 1000),

  selectInput("palette", "Palette", c("YlOrRd", "RdYlBu", "Greens", "Blues")),
  checkboxInput("cluster", "Apply clustering"),
  uiOutput("dynamic")
)
server <- function(input, output, session) {
  output$heatmap <- renderD3heatmap({
    d3heatmap(
      scale(mtcars),
      colors = input$palette,
      dendrogram = if (input$cluster) "both" else "none"
    ) })

  output$dynamic <- renderUI({

    d3heatmapOutput("heatmap", height = paste0(input$pixels, "px"))
  })

}
shinyApp(ui, server)