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.
* Demonstrations
Following are examples that use various kinds of htmlwidget.
#+caption: Include librarys required for demonstrations
library(DT)
library(RColorBrewer)
library(fission)
library(ggplot2)
library(gplots)
library(metricsgraphics)
library(networkD3)
library(plotly)data(MisLinks, MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes,
Source = "source", Target = "target", Value = "value",
NodeID = "name", Group = "group", opacity = 0.4)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)## 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(' '));
}")2.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")irisirisIn either case, you can cause `org-html-export-to-html` to inline the exported html file with `#+include iris.html export html`, resulting in:
irisirisirisggplot(data = diamonds, aes(x = cut, fill = clarity)) +
geom_bar(position = "dodge")These results are intentionally commented out since thier export conflict with those of previous DT::datatable.