trelliscopejs
trelliscopejs copied to clipboard
hafen
Feature request: trelliscope support for sepia and night mode in bookdown
I use transparent colors to blend ggplot2 and plotly figures into sepia and night modes in bookdown documents. See for example https://d-score.org/dbook1/sec-aged.html, and switch to sepia and night mode.
In trelliscopejs this approach doesn't work (e.g. https://d-score.org/dbook2/section-sec-impactequate.html). The background of trelliscope figure is solid white, which blocks any transparent color settings in the figures.
My question: Would there be a simple trick to change the solid white into transparent?
Here's a short demo code that I use to sets transparent colors in trelliscopejs:
library(trelliscopejs)
library(ggplot2)
library(gapminder)
theme_set(theme_light())
theme_update(panel.background = element_rect(fill = "transparent", colour = NA),
plot.background = element_rect(fill = "transparent", colour = NA),
legend.key = element_blank(),
rect = element_rect(fill = "transparent"))
qplot(year, lifeExp, data = subset(gapminder, continent == "Europe")) +
facet_trelliscope(~ country + continent,
path = "docs/transparent")
I would like all white areas to become transparent, whereas any coloured areas (left navigation bar, bottom sort bar, trelliscope logo) should retain their colouring. Is that possible by setting some styles?
Hi @stefvanbuuren - After creating the example display and updating all elements to have no background, I don't see the desired effect. Can you provide a screenshot of what it a "correct" plot should look like?
In general I have been wanting to add the ability for users to provide custom style specifications. Doing this properly will take some time though. In the mean time, I think this issue is addressable by making all whitespace have no background, as I don't see how this as a default setting would have an adverse effect on anything else.
My thinking is that the data area, the plot margin and selected trelliscope panels could be made transparent. If the reader changes bookdown background changes to sepia/dark, then sepia/dark would shine through in the plots.
In the figure below, I have tried to draw what the figure could look like if my background color is yellow3 (sepia is not an R color). I failed because I do not know how to change some of the backgrounds to transparent, the cross-hatched areas. So ideally these should also be transparent, and show the bookdown sepia/dark coloring set by the reader.
Ah I see now! So you are talking about a background color behind the entire embedded display. Are you embedding your displays as iframes in your book? If so, I'm not sure if this is possible.
I use knitr::include_url() for example:
knitr::include_url(url = "https://d-score.org/dbook-apps/p-d-equate-1339/#display=Percent_pass_by_D_score__four_models&nrow=2&ncol=2&arr=row&pg=65&labels=equate,model&sort=equate_index;asc,model;asc&filter=&sidebar=&fv=", height = "450px")
I see. Can you point me to an example of the output so I can inspect? You had shared this link before but I'm getting a 404: https://stefvanbuuren.name/dbook2/section-sec-impactequate.html
Ah yes, sorry. It's now moved it to https://d-score.org/dbook2/section-sec-impactequate.html . Just updated it in my original post.
It see. It looks like it is in an iframe. But even with an iframe it looks achievable. I made some css tweaks to the page to experiment and got this far (with an ugly yellow background to test)
In this particular display it appears that there is no transparency set in the images themselves.
That's progress. I will need to look into the transparency of the plots.
I checked and regenerated, but the plots were already transparent. Could there be an additional layer within the iframe? I found the following, but cannot change it from the Safari browser console.
<head>
<meta charset="utf-8"/>
<style>
body {
background-color: white;
}
</style>
I went in and manually disabled all background colors in the Trelliscope display but the images do not appear to be transparent.
To double check, I right-clicked on the first graph in the Trelliscope display and chose "Download Image" and opened it in an image editor to confirm that it doesn't have a transparent background.