experimental add image to node with DiagrammeR grViz

experimental: add image to node with grViz

with no d3

# devtools::install_github("timelyportfolio/DiagrammeR@feature/grViz-tasks")

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

gv <-  grViz('
  digraph {
    saltedcaramel [shape="doublecircle" id = "saltedcaramel2"]
    chocolatechip [shape="doublecircle" id = "chocolatechip"]
  }
')

gv$x$tasks <- htmlwidgets::JS('function(){

var imageLinks = {
  saltedcaramel2 : "http://ec12.cdn.cincopa.com/SaltedCaramel2.jpg?o=1&res=76&cdn=ec&p=y&pid=231720&ph3=b2d1timslim1sat2p2lxtiganpc1chim&d=AMWAjFwULOAANQJsAMnyJRB&as=mp3",
  chocolatechip : "http://ec12.cdn.cincopa.com/ChocolateChip.jpg?o=1&res=15&cdn=ec&p=y&pid=231720&ph3=b4crlpi4unglrfh2tdvemjskr24gidgq&d=AMWAjFwULOAANQJsAMnyJRB&as=mp3"
}

var nodes = this.getElementsByClassName("node")

var svgns = "http://www.w3.org/2000/svg"
var defs = document.createElementNS(svgns,"defs")
this.getElementsByTagName("svg")[0].appendChild(defs)

for(i = 0; i < nodes.length; i ++){
  var pattern = document.createElementNS(svgns,"pattern")
  var image = document.createElementNS(svgns,"image")

  pattern.setAttribute("id","pattern" + i)
  pattern.setAttribute("patternContentUnits","objectBoundingBox")
  pattern.setAttribute("width",1)
  pattern.setAttribute("height",1)
  image.setAttributeNS(
    "http://www.w3.org/1999/xlink", // xlink NS URI
    "href",
    imageLinks[nodes[i].id]
  )
  image.setAttribute("x",0)
  image.setAttribute("y",0)
  image.setAttribute("width",1)
  image.setAttribute("height",1)

  pattern.appendChild(image)
  defs.appendChild(pattern)

  nodes[i].getElementsByTagName("ellipse")[0].style.fill="url(#pattern" + i + ")"
}

}
'    
)

gv

… or with d3 if you have it

# devtools::install_github("timelyportfolio/DiagrammeR@feature/grViz-tasks")

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

gv <-  grViz('digraph {A [shape="doublecircle"]}')
gv$x$tasks <- htmlwidgets::JS('function(){
d3.select(this).select("svg")
  .append("defs")
  .append("pattern")
    .attr("id","patternOne")
    .attr("patternContentUnits","objectBoundingBox")
    .attr("width",1)
    .attr("height",1)
  .append("image")
    .attr("xlink:href", "http://ec12.cdn.cincopa.com/SaltedCaramel2.jpg?o=1&res=76&cdn=ec&p=y&pid=231720&ph3=b2d1timslim1sat2p2lxtiganpc1chim&d=AMWAjFwULOAANQJsAMnyJRB")
    .attr("x",0)
    .attr("y",0)
    .attr("width",1)
    .attr("height",1)

d3.select(this).select("ellipse")
  .style("fill","url(#patternOne)")
}
'    
  )

tagList(gv) %>>%
  attachDependencies(
    htmlDependency(
      name = "d3"
      ,version = "3.4"
      ,src = c(href = "http://d3js.org")
      ,script = "d3.v3.min.js"
    )
  ) %>>%
  html_print