Plot colours in HTML differ from within RStudio after knit

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.

Could you put together a simple reproducible example to illustrate this? — user2554330

CJ Yetman CJ Yetman · Accepted Answer · 2018-05-17T20:59:27

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.

Plot colours in HTML differ from within RStudio after knit

1 Answers