Interaction between html widgets in R shiny

Question

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)

Answer 1

networkD3 was updated to D3v4 in version 0.3 in. Feb. 2017, which is not compatible with v3 versions of D3, which is what chorddiag and d3heatmap appear to use. htmlwidgets, which is the underlying package that drives the above packages, only uses the most recent version of a dependency, so htmlwidgets that use conflicting versions of the same library can not both work. Check here for a starting point of discussion about this problem.

You have a few possible options, though none of them are great...

1. revert networkD3 to a version < 0.3 so that it also uses D3v3

2. lobby for the chorddiag developers and the d3heatmap developers to upgrade to D3v4

3. lobby for the htmlwidgets developers to come up with a robust way of dealing with conflicting JavaScript dependencies

Answer 2

@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.