Cannot get two specific widgets to appear in the same html doc (knitted from an .Rmd file), but either works fine in isolation

Question

I am trying to knit two widgets or plots (a chord diagram and a sankey diagram) together in the same html document, and I am quite confused as to why they do not appear in the resulting html. Either one works alone, but not together. Therefore, there is nothing 'wrong' per se with each plot/widget, but perhaps some sort of a conflicting 'sizing' issue? Further, this example .Rmd is a subset and each figure works fine with a bunch of other r chunks and figures, so it appears that these two plots specifically conflict with one another.

I have tried resizing the html widgets either internally in the plot functions or after the fact (changing width of widget). It appears I am ineffective in implementing such procedures (using bookdown guidance) or that is not the solution.

I have tried saving these figures as individual widgets and importing them into the html, but that did not work either. Most importantly I think, if you comment out either widget, each shows up just fine in the produced html.

I am rather new to rmarkdown, and I have been able to muscle through many other issues, but this one has frustratingly stumped me. Any help / guidance would be greatly appreciated!

---
title: "How can I get these widgets to be displayed together (not just work in isolation)?"
author: "scf"
date: "December 20, 2019"
output:
  html_document:
    self_contained: true
---

#### Figure 1: chord diagram (data = netm)
```{r chord diagram, echo = FALSE, message = FALSE}

# Libraries
  devtools::install_github("mattflor/chorddiag")
  library(chorddiag); library(ggplot2)

# Create netm
  netm <- structure(c(3, 0, 0, 4, 3, 0, 0, 0, 1, 0, 0, 0, 3, 0, 0, 7, 0, 
0, 9, 2, 0, 0, 0, 1, 0), .Dim = c(5L, 5L), .Dimnames = list(c("1", 
"2", "3", "4", "5"), c("1", "2", "3", "4", "5")))

# Plot object
  # Set color
  categ.col <- c("#A5E9DE", "#E286DF", "#DCE87A", "#93F340", "#6948CC")

# Build the chord diagram:
  chorddiag(netm,
                 groupColors = categ.col[1:incl],
                 groupnamePadding = 20,
                 width = 800,
                 height = 800)

detach("package:chorddiag", unload = TRUE)

```

#### Figure 2:  sankey diagram (data = edges.df & nodes.df)
```{r Sankey plot, echo = FALSE, message = FALSE}

# Create edge network
  edges.df <- structure(list(Source = c("1_categ1", "4_categ1", "5_categ1", 
"6_categ1", "8_categ1", "9_categ1", "11_categ1", "12_categ1", 
"13_categ1", "14_categ1", "16_categ1", "17_categ1", "20_categ1", 
"21_categ1", "22_categ1", "23_categ1", "25_categ1", "26_categ1", 
"27_categ1", "28_categ1", "30_categ1", "31_categ1", "32_categ1", 
"34_categ1", "35_categ1", "36_categ1", "38_categ1", "1_categ1", 
"4_categ1", "5_categ1", "6_categ1", "8_categ1", "9_categ1", "11_categ1"
), Target = c("1_categ2", "1_categ2", "1_categ2", "1_categ2", 
"1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", 
"1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", 
"1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", 
"1_categ2", "1_categ2", "1_categ2", "1_categ2", "1_categ2", "2_categ2", 
"2_categ2", "2_categ2", "2_categ2", "2_categ2", "2_categ2", "2_categ2"
), Freq = c(5L, 5L, 1L, 3L, 2L, 1L, 2L, 1L, 2L, 7L, 5L, 1L, 6L, 
1L, 3L, 1L, 6L, 2L, 1L, 1L, 1L, 4L, 2L, 8L, 1L, 2L, 1L, 3L, 10L, 
1L, 3L, 2L, 2L, 2L), IDsource = c(0, 1, 2, 3, 4, 5, 6, 7, 8, 
9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 
25, 26, 0, 1, 2, 3, 4, 5, 6), IDtarget = c(27, 27, 27, 27, 27, 
27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 
27, 27, 27, 27, 27, 27, 28, 28, 28, 28, 28, 28, 28)), row.names = c(1L, 
4L, 5L, 6L, 8L, 9L, 11L, 12L, 13L, 14L, 16L, 17L, 20L, 21L, 22L, 
23L, 25L, 26L, 27L, 28L, 30L, 31L, 32L, 34L, 35L, 36L, 38L, 40L, 
43L, 44L, 45L, 47L, 48L, 50L), class = "data.frame")

# Create nodes.df from edges.df
  nodes.df <- data.frame(label=unique(c(as.character(edges.df$Source),as.character(edges.df$Target))))

  edges.df$IDsource <- match(edges.df$Source, nodes.df$label)-1 
  edges.df$IDtarget <- match(edges.df$Target, nodes.df$label)-1

# Library
  library(networkD3)

# Make the Network
  networkD3::sankeyNetwork(Links = edges.df, Nodes = nodes.df,
                       Source = "IDsource", Target = "IDtarget",
                       Value = "Freq", NodeID = "label",
                     fontSize = 15,
                     nodeWidth = 80,
                     fontFamily = "times",
                       sinksRight=T)

  detach("package:networkD3", unload = TRUE)

```

Answer 1

This is possible, but it's a lot of trouble.

The problem is that chorddiag uses version 3.x of D3, while networkD3 uses 4.x. The htmlwidgets framework only loads the more recent version, and so there's an error when the chorddiag package tries to use D3 functions.

A workaround for this is to load both, by renaming one of them. For example, if you change the code for the older package to say the name of the library is d3_3 instead of just d3, it appears to work. There are a lot of places where d3 is used, and you need to fix all of them. A wrinkle is that chorddiag uses another library that depends on D3, so it needs to be fixed to depend on d3_3 as well.

You can see a first attempt at this approach here: https://github.com/dmurdoch/chorddiag . It works on your example, but the changes are probably incomplete, so you'll need to find and fix ones that were missed.