Plot colours in HTML differ from within RStudio after knit - html

Question

I am trying to generate a shareable HTML document generated from an R Script in RStudio.
The script makes use of interactive plots generated from networkD3 and collapsibleTree packages. In the RStudio viewer, the colour scheme for these plots is highly visible; colours such as blue and red for the items.
However, when rendered in HTML, the colour scheme becomes a washed out grey: practically white on white background, which makes it too hard to see or use.
Can I specify plot colours in the RScript using a knitr passthrough, I don't know, something like:
#+ colourscheme(RdBu)
or do I need to generate some kind of CSS file to control plot colours? I am unclear and not very knowledgeable in this HTML area, and a little confused why the colours would change at all!
Thanks in advance for any help.
-- edit (example provided)
In response to the request below, I've generated a tiny example. However (!) when this is rendered, it retains the correct colour scheme. I'm unclear now what it is causing this; colours are linked to "gp" in my main diagram, and I have only 3 groups so should see 3 colours. I'm not able to provide a full example due to size (data limitations), so here's the outline:
nodes <- data.frame(Name = c('Alpha', 'Beta', 'Charlie'),
ID = c(0,1,2),
gp = c(1,1,2),
n = c(10,15,20))
links <- data.frame(x = c(0, 0, 0, 1, 1, 2, 2),
y = c(0, 1, 2, 1, 2, 0, 2),
n = c(8, 9, 8, 9, 8, 9, 8))
require(networkD3)
require(RColorBrewer)
forceNetwork(height = 200, width = 400,
Links = links, Nodes = nodes,
Source = "x", Target = "y", Value = "n", # From Links df
NodeID = "Name", Group = "gp", Nodesize = "n", # From Nodes df
arrows = T,
linkWidth = JS("function(d) { return Math.sqrt(d.value); }"),
#linkWidth = JS(" d.value"),
radiusCalculation = JS(" d.nodesize"),
charge = -10,
fontSize = 16,
colourScale = JS("d3.scaleOrdinal(d3.schemeCategory10);"),
opacity = 0.9,
bounded = T)
I'm guessing (?) that there's a certain set of conditions that triggers the colours to fail.

Answer 1

I'm pretty sure this happens because collapsibleTree is adding CSS that affects the elements created by forceNetwork. Can you try putting this minimal example in a .Rmd file and knit it to see if shows a similar problem...
---
output: html_document
---
```{r echo=FALSE}
nodes <- data.frame(NodeID = c("Alpha", "Beta", "Charlie"),
Group = c(1, 2, 3),
Nodesize = c(10, 15, 20))
links <- data.frame(Source = c(0, 0, 1, 2),
Target = c(1, 2, 2, 0),
Value = c(9, 8, 8, 9))
library(networkD3)
forceNetwork(Links = links, Nodes = nodes,
Source = "Source", Target = "Target", Value = "Value",
NodeID = "NodeID", Group = "Group", Nodesize = "Nodesize",
colourScale = JS("d3.scaleOrdinal(d3.schemeCategory10);"),
width = 100, height = 100)
```
```{r echo=FALSE}
library(collapsibleTree)
collapsibleTree(warpbreaks, c("wool", "tension", "breaks"),
width = 100, height = 100)
```
if so, try installing the dev version of collapsibleTree with devtools::install_github('AdeelK93/collapsibleTree') and then try it again and see if the problem goes away (and your other problem). They added namespaced css in this commit which hasn't made it into a CRAN release yet.