How to add Axis labels using networkD3 in R

Question

I'm making a Sankey diagram using the networkD3 package, I have included my code below. I want to add a title, footnotes, and label both the left side and right side of the diagram. But I'm not sure how to do this as networkD3 has no built in labeling commands

library(dplyr)
library(networkD3)
library(htmlwidgets)
Comp_Noncomp<-c("A","B","C","A","B","C","A","B","C")
Category<-c("D","E","F","D","E","F","D","E","F")
Frequency<-c(1,2,3,4,5,6,7,8,9)
my.data.3<-data.frame(Comp_Noncomp,Category,Frequency)
nodes <- data.frame(name=c(as.character(my.data.3$Comp_Noncomp), as.character(my.data.3$Category)) %>% unique())
my.data.3$IDsource=match(my.data.3$Comp_Noncomp, nodes$name)-1 
my.data.3$IDtarget=match(my.data.3$Category, nodes$name)-1
library(networkD3)
sankeyNetwork(Links = my.data.3, Nodes = nodes,
                     Source = "IDsource", Target = "IDtarget",
                     Value = "Frequency", NodeID = "name", 
                     sinksRight=FALSE)

Answer 1

You can use the libraries htmlwidgets and htmltools to add content to this diagram.

For example, if you wanted to add a title:

s <- sankeyNetwork(Links = my.data.3,  Nodes = nodes, 
                   Source = "IDsource",  Target = "IDtarget", 
                   Value = "Frequency",  NodeID = "name",  
                   sinksRight=FALSE)

s2 <- htmlwidgets::prependContent(s, htmltools::tags$h1("This is my Title"))

Let's say you wanted to add styles and a subtitle.

s3 <- htmlwidgets::prependContent(s, htmltools::tags$h1("This is my Title",
                                                       style="text-align:center;"),
                                 htmltools::tags$h2("This is my Subtitle",
                                                    style="color:#003b70; text-align:center;"))

There are a lot of things you can do with this, but you'll have to explore a bit to figure out exactly what you want and where you want it.

---

---

Update based on your comment

Probably the easiest way to add left and right comments would be with the library manipulateWidget.

You'll want to revert to your original Sankey diagram, because it will remove any prepended or appended content.

I vertically centered the text on the left side. On the right side, I let the system choose the placement. This way you can see different ways to align the content.

s <- sankeyNetwork(Links = my.data.3,  Nodes = nodes, 
                   Source = "IDsource",  Target = "IDtarget", 
                   Value = "Frequency",  NodeID = "name",  
                   sinksRight=FALSE)

leftTx = tags$div( 
  style="max-width: 30vw; padding-bottom: 15px; height: 100%; display: flex; align-items: center; justify-content: center;", 
                  tags$p("This text is on the left side"))
rightTx = tags$p("This text is on the right",
                 style="max-width:30vw")

cS <- combineWidgets(s,
                     title = tags$h1("This is my Title",
                                     style="text-align:center;"),
                     leftCol = leftTx,
                     rightCol = rightTx,
                     nrow = 1)