Using htmlwidgets graphics with servr::jekyll()

[dfalbel]

I'm trying to use metricsgraphics with my jekyll blog but I can't find where I'm missing something.

It seems that the div is created but the graphic never shows up.

Take a look at this: http://dfalbel.github.io/knitr-jekyll/2014/09/jekyll-with-knitr.html

However when I just knit the file in RStudio, evrything works great. See this file: https://github.com/dfalbel/knitr-jekyll/blob/gh-pages/_source/2014-09-28-jekyll-with-knitr.html

I also tried this with others htmlwidgets like recharts and chartist.

Thanks for the help!

[yihui]

HTML widgets only work in these cases:

1. R console
2. RStudio viewer
3. R Markdown v2

What servr::jekyll() does is simply knitting .Rmd to .md. Then Jekyll renders .md to .html, and Jekyll knows nothing about HTML widgets. Your best bet is not to use Jekyll, but to use R Markdown v2, which is what we use to build several widget package websites, e.g.

• https://github.com/rstudio/DT/tree/gh-pages
• https://github.com/rstudio/dygraphs/tree/gh-pages
• https://github.com/rstudio/leaflet/tree/gh-pages

In these cases we use Makefile and server::make().

[dfalbel]

Alright! I tought htmlwidgets could print raw html, just like the googleVis package. Thanks Yihui! I'll try to move my blog to this format!

[jhollist]

Apologies for digging up an old issue...

@dfalbel I wanted to do the same thing with the leaflet package. Whole site is served as a gh-pages jekyll site. Hack that I got to work was to include the required js and css in a folder at the root of the site then make sure the links get added to the header. Just added those links to my default.html layout.

Examples:

• Folder at the root
• _layouts/default.html

I am certain @yihui 's solution is the better one, but we didn't have time to re-work the site so this hack did the trick.

[yihui]

@jhollist Thanks for an alternative solution. Yeah, that will also work. The only problem is that if the widgets packages are updated, you will have to manually update the JS/CSS files accordingly (unless you don't care about the new versions).

[semiexpert]

@yihui I really like all the graphs and tables to be interactive in a blog. dygraphs and DT are my favorite packages for writing reports. Do you have any tutorial how to make the sites?https://github.com/rstudio/leaflet/tree/gh-pages

Thanks! Richard

[yihui]

@semiexpert The websites of DT, leaflet, and dygraphs are all made from R Markdown v2. DT and leaflet websites are compiled through a Makefile. To learn more about R Markdown v2, see http://rmarkdown.rstudio.com; to learn Makefile, see http://kbroman.org/minimal_make/ servr::jekyll() is not what you want to use in these cases; servr::make() is.

[brendan-r]

Firstly, thanks so much for this repo!

I'm using it with pandoc as my Jekyll markdown renderer. It seems a shame to lose the nice features of servr::jekyll() in order to use htmlwidgets.

Would htmlwidgets work if the --include-in-header /tmp/... argument (as generated by rmarkdown) was passed to pandoc when called by Jeykll, or is there something else to it?

Based on my shaky understanding, it seems like it might be possible to wrap servr::jekyll() in a function which pre-emptively:

• parses the .Rmd file for html dependencies
• copies necessary js/css files from the R packages to a Jekyll dependencies dir
• produces a file pointing to them, for the --include-in-header argument passed to pandoc

The last two look like they could be achieved by passing an rmarkdown dependencies object to rmarkdown:::html_dependencies_as_string. However, after spending a while reading through the internals in rmarkdown, I can't see how to derive a dependencies object for arbitrary .Rmd files (it looks like knitr::knit_meta is involved, but I can't piece together how).

My questions are:

• Would the above (theoretically) work?
• Do you have any hints on how to derive an rmarkdown dependencies list, for an arbitrary .Rmd file?

[yihui]

@brendan-R I think you are on the right track, but unfortunately I don't know the exact details of rendering dependencies, either. My gut feeling is that Jekyll may not be the right tool to render R Markdwon v2 documents. Actually it might be easier to design a new blog system, build HTML locally, and push to Github directly instead of relying on Jekyll to render Markdown to HTML.

[Nicktz]

@Yihui In reference to the websites (Leaflet and DT) you mentioned: is there an accessible tutorial for creating a website structure similar to what you did there from Rmarkdown? Are the index.html scripts created in Rmd or by hand? I.e. would I need to create it by hand as well? And lastly, is there a way to include JS scripts to my created html files using render() directly from R?

[yihui]

@Nicktz Please see the links in my very first reply, e.g. you can see there is an index.Rmd, so index.html was generated from it instead of being manually edited. There is a section "Creating a website" at http://rmarkdown.rstudio.com/html_document_format.html

[Nicktz]

Thanks @yihui will do!

[brendan-r]

I cobbled together a solution for my knitr-jekyll blog a while ago. It can all be handled with a small addition to build.R, and a short addition to one of the html template files. Write-up here: http://brendanrocks.com/htmlwidgets-knitr-jekyll/, and changes in a fork here.

[dfalbel]

Thanks @brendan-R

[yihui]

@brendan-R I just want to say this is very impressive! The more I think about these issues, the more I want to reinvent Jekyll in pure R, and I believe we can do much much better than Jekyll with the power of R Markdown and Pandoc. That said, I'm afraid I cannot commit any time to this before the summer this year.