Incorporating Static ggvis Figures Into Your Website
While it’s easy enough to push a rmarkdown document to something like RPubs, I wanted to make sure I could share a page with static ggvis figures on this website. As I started working on a post with static ggvis figures, I found a helpful StackExchange question/answer, but no other blog posts about it. So, I thought it would be a nice first post on this blog.
Caveats: I understand that ggvis is still in development mode and should “not be used in production environments”. Also, while ggvis is “designed more for data exploration than data presentation”, I think it would be nice to remove the interactive features of a plot and use it to display the final results on a website. I am also being careful to repeat “static ggvis” figures as this will not work for the interactive figures unless you have Shiny server running in the background.
This site uses GitHub pages and Jekyll. There are several sources on using GitHub, Jekyll, and rmarkdown: here, here, and here, so I won’t cover that.
Incorporating the jQuery Library
To determine why the figures would not load, I started by splitting jQuery out from the other libraries this site uses. The theme uses version 2.1.1, whereas ggvis is using 1.11.0. In the end, I opted to go with version 2.1.1, since the entire site theme was designed using it. So far, it seems version 2.1.1 is working with the ggvis figures. The downside here is that my site won’t work for some older versions of Internet Explorer; oh well.
New Header References
Once all of the libraries are referenced in the header of the html document the ggvis html can be inserted in the body of the document. For pages that use ggvis figures, my headers now include the following references:
My initial testing indicates that jQuery-ui.min.css and shiny-ggvis.js are not required for the ggvis figures to load. However, since I’ve only tested this on a few figures, I’ve left the references in, for now.
Jekyll Template Modifications
If you are using Jekyll, then you may be interested in the few modifications I made to the template files. While the file names might be specific to the theme I use, the method should apply to other themes.
First, I only include the above references if the post will include ggvis figures. To do this, in my yaml front matter I add
The following R code will produce html code which can be copied and pasted into an html document. Again, thanks to the Stack Overflow answer for the nice demonstration, which is reproduced here.
library(ggvis) library(knitr) ggvFig <- ggvis(mtcars, x = ~wt, y=~mpg, fill = ~factor(cyl)) %>% layer_points() writeLines(as.character(ggvis::knit_print.ggvis(ggvFig)), "sample-ggvis-figure.html")
If the code in “sample-ggvis-figure.html” is pasted into the website, it will display this figure:
I also tested out the approach to see if it would work as though I am writing the entire blog post from RStudio using rmarkdown. The example post is available here. To create that page, I:
- Wrote the entire post using rmarkdown in RStudio.
- Knit an html document in RStudio.
- Copied everything inside of the
<div class = "container-fluid main-container">tags into a post in this sites directory structure, and set
truein the post’s yaml front matter.
I’m looking into ways to automate step 3. For now, see this description for a way to automate blogging from rmarkdown.
Alan Butler PROJECTS · R