‎

1. Overview
2. Method
3. Demonstrations
4. Source Code

1. Overview

This emacs org-mode document demonstrates an approach to embedding htmlwidgets in the exported html resulting from org-html-export-html. The approach:

uses (coopts?) org's :prologue/:epilogue header args.
allows for an htmlwidget to be developed interactively "normally" within a code blocks, isolating the machinery for their inclusion in an exported html document to the time of html-export.
suffers from the possibility that the javascript in two widget may conflict. For example uncommenting the results of the plotly::ggplotly demonstration below and re-exporting to html will cause the DT::datatable to break (unless the DT:datatable is included after the ggploty). They may both define a handler for the document's onLoad event, only one of which will run, thereby disaling the other. TODO: understand fully and address.

2. Method

Listing 1: Define a single function providing orgmode integration

library(htmltools)
library(magrittr)

orgWidget<-function(method,file,htmlwidget,selfcontained=FALSE,libdir=gsub('.html','_lib',file),...) {
  ## PURPOSE: An emacs org-mode specific wrapper to
  ## htmlwidget::saveWidget to be used in a source code block's header
  ## :prologue argument providing various <method>s for
  ## org-html-publish-html to incorporate the widget.  The block of
  ## course must be evaluated in an R environtment (:session) in which
  ## this function has een defined.
  ## 
  ## VALUE: depennds on the <method> as follows:
  ##
  ## | method  | value                                                                                               |
  ## |---------+-----------------------------------------------------------------------------------------------------|
  ## | file    | the path to the file                                                                                |
  ## | include | an orgmode include statement which will include as html upon org export; the file, and              |
  ## | iframe  | an html iframe                                                                                      |
  ## | <expr>  | result of piping <file>'s pathname to "tag$<expr>", where expr calls an htmltools's "tag$" function |
  returnAs=deparse(substitute(method),500)
  saveWidget(htmlwidget,file,selfcontained,libdir,...)
  switch(returnAs
        ,file = file
        ,include = sprintf('#+include: "%s" export html',file)
        ,iframe = tags$iframe(src=file)
        ,{expr<-sprintf('"%s" %%>%% tags$%s',file,returnAs);
          eval(parse(text=expr))
        }
        )
}

3. Demonstrations

Following are examples that use various kinds of htmlwidget.

Listing 2: Include librarys required for demonstrations

library(DT)
library(RColorBrewer)
library(fission)
library(ggplot2)
library(gplots)
library(metricsgraphics)
library(networkD3)
library(plotly)

3.1. Network layout using forceNetwork

data(MisLinks, MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes, 
  Source =  "source", Target = "target", Value = "value", 
  NodeID = "name", Group = "group", opacity = 0.4)

3.2. Word Clouds using rWordCloud

library(rWordCloud)
text <- c('d3','wordcloud','impressive','experiment','htmlwidgets','myfirstwidget')
size <- c(25,20,13,9,6,5)
df <- data.frame(text,size)
d3Cloud(text = text, size = size)

3.3. ScatterPlots using metricsgraphics

3.3.1. An MA plot with 7039 genes

## load a example expression data as a SummarizedExperiment, and
## format two experiments as data.frame
data("fission")
cnt<-assay(fission)
names(dimnames(cnt))<-c('gene','sample')
dat<-as.data.frame(cnt[,1:2]) ##"GSM1368273" "GSM1368274"
dat$gene<-rownames(dat) ## needed as column to pass to javascript widget

# compute M, A, and encode DE as down, up, no change.
dat$M<-log2(sqrt(dat[,1] * dat[,2]))
dat$A<-log2(sqrt(dat[,1] / dat[,2]))
dat$DE <- c('DN','NC','UP')[(sign(dat$A) * as.integer(abs(dat$A)>1)) +  2]

# create the widget
dat %>%
mjs_plot(x=M
        ,y=A
        ,width=600, height=500
         ) %>%
mjs_point(color_accessor=DE
         ,color_type='category'
         ,color_range=c('green','blue','red')
          ,least_squares=TRUE
          ) %>%
mjs_labs(x="MM", y="AA") %>%
mjs_add_mouseover("function(d, i) {
                $('{{ID}} svg .mg-active-datapoint')
                     .text([d.point.gene, d.point.DE, 'M:', d.point.M.toFixed(2), 'A:', d.point.A.toFixed(2)].join(' '));
               }")

metricsgraphics

3.3.2. The cars example from http://rpubs.com/hrbrmstr/53741

mtcars %>%
  mjs_plot(x=wt, y=mpg, width=600, height=500) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")

metricsgraphics

3.4. DataTables using DT

Listing 3: orgWidget with :results value raw

iris

iris.html

Listing 4: orgWidget with :results value file - makes the filename be a link

iris

iris.html

In either case, you can cause `org-html-export-to-html` to inline the exported html file with `#+include iris.html export html`, resulting in:

datatables

Listing 5: `orgWidget(include,...)` is a shorthand for just this (requires `:results value raw`.)

iris

datatables

Listing 6: `orgWidget(iframe,...)` inlines <file> wrapped in an iframe (with default sizing)

iris

Listing 7: `orgWidget(iframe(src=.,...),...)` inlines <file> wrapped in an iframe with <attributes> (such as width & height)

iris

3.5. ggplot using plotly

ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
            geom_bar(position = "dodge")

# #+include: "ggplotly_widget.html" export html

These results are intentionally commented out since thier export conflict with those of previous DT::datatable.

Table of Contents