Interaction between html widgets in R shiny

user_8475285 0
Viewed 589

I am developing an R shiny application that uses several html widgets, notably networkD3, d3heatmap and chorddiag.

These widgets work fine separately. However, using them in the same page leave a blank space where they are supposed to be.

Here is a reproducible code that shows the bug. Comment plots line in the UI and you will see plots appearing and disappearing..

I thank you very much for your help!

# libraries
library(shiny)
library(d3heatmap)
library(chorddiag)
library(networkD3)

# Server
server <- function(input, output) {

  # create heatmap
  output$heatmap <- renderD3heatmap({
    d3heatmap(mtcars, scale = "column", colors = "Spectral")
  })

  # create chord diagram
  output$chord <- renderChorddiag({
    m <- matrix(c(11975,  5871, 8916, 2868,1951, 10048, 2060, 6171, 8010, 16145, 8090, 8045,1013,   990,  940, 6907),
    byrow = TRUE, nrow = 4, ncol = 4)
    haircolors <- c("black", "blonde", "brown", "red")
    dimnames(m) <- list(have = haircolors, prefer = haircolors)
    groupColors <- c("#000000", "#FFDD89", "#957244", "#F26223")
    chorddiag(m, groupColors = groupColors, groupnamePadding = 20)
  })

  # create sankey
  output$sankey <- renderSankeyNetwork({
    nodes=data.frame(ID=c("A","B","C","D","E"))
    links=data.frame(source=c(1,2,3), target=c(3,4,4), value=c(12,15,29))
    sankeyNetwork(Links = links, Nodes = nodes, Source = "source", Target = "target", Value = "value", NodeID = "ID")
  })

}



# Ui
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel("shiny shines"),
    mainPanel(
        # Comment these lines and you will see charts appear / disappear.
        d3heatmapOutput("heatmap"),
        chorddiagOutput("chord"),
        sankeyNetworkOutput("sankey")
    )
  )
)

shinyApp(ui = ui, server = server)
d3heatmap networkd3 htmlwidgets shiny r
2 Answers

@CJYetman gave 3 options for dealing with this. Here's one more, which might be less work, though it's still unappealing: Rename the library used in chorddiag and d3heatmap from d3 to something else, so that both version 3 of D3 (used by those two) and version 4 (used by networkD3) can coexist on the same page.

A first pass at doing this for chorddiag is here: https://github.com/dmurdoch/chorddiag. It renames the library to d3_3. This same change also appears to work for d3heatmap; see https://github.com/dmurdoch/d3heatmap.

user_25543300
Related