All examples By author By category About

timelyportfolio
Full window Github gist

hover.css applied to DiagrammeR grViz

As I prepare the next htmlwidget of the week (see Building Widgets), I wanted to demonstrate how we can apply Ian Lunn's very popular and generous Hover Effects to a graphviz diagram drawn with DiagrammeR. Mouseover the nodes to see them hvr-float. There are enough effects to easily distract you for a couple of hours. Try them out. I'll paste the code below. You can also find it in code.R.

# use Ian Lunn's hover.css http://ianlunn.github.io/Hover/ on a
#  graphviz diagram rendered with the R htmlwidget DiagrammeR

library(DiagrammeR)
library(pipeR)
library(XML)
library(htmltools)

exportSVG(
  grViz('
    digraph G {
        size = "4,4";
        main [shape = box]; /* this is a comment */
        main -> parse [weight = 8];
        parse -> execute;
        main -> init [style = dotted];
        main -> cleanup;
        execute -> { make_string; printf}
        init -> make_string;
        edge [color = red]; // so is this
        main -> printf;
        node [shape = box, style = filled, color = ".7 .3 1.0"];
        execute -> compare;
        }
  ')
) %>>%
  htmlParse %>>%
~svgDiag


svgDiag %>>%
  getNodeSet("//g[contains(@class,'node')]") %>>%
  lapply(
    function(el){
      addAttributes( el, "class" = "node hvr-float", "style" = "pointer-events:all;")
      if(length(xmlChildren(el)$title)>0){
        removeChildren(el, kids = list(xmlChildren(el)$title))
      }
      return(NULL)
    }
  )

svgDiag %>>%
  saveXML %>>%
  HTML() %>>% 
  attachDependencies(
    htmlDependency(
      name="hover.css"
      ,version = "0.1"
      ,src = c(file=paste0(getwd(),"/css"))
      ,stylesheet = "hover.css"
    )
  ) %>>%
  html_print %>>%
~htF