Embed Image Data in SVG Elements

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Embedding Image Data into Elements</title>
  <meta charset="utf-8" />
</head>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<body onload="embedsvg()">
</body>
<footer>    
<script>
function embedsvg() {

var canvas = d3.select("body").append("canvas").attr("id","newCanvas").attr("width", "300px").attr("height", "276px").node();
      var context = canvas.getContext('2d');
      var imageObj = new Image();

imageObj.src = 'dataviz_venn.png';

imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
//      var imageData = canvas.toDataURL("image/png");
      var imageData = document.getElementById("newCanvas").toDataURL("image/png")
      
    //Add as HTML img element
      d3.select("body").append("img").datum(imageData).attr("src", function(d) {return d})

d3.select("body").append("svg").attr("height", "300px").attr("width", "276px")

//Add as SVG image element
      d3.select("svg").append("image").datum(imageData).attr("height", 300).attr("width", 276).attr("xlink:href", function(d) {return d})

//Here's the data embedded in the img element __data__ property
      console.log(d3.select("img").node().__data__)
      
        //likewise, the data embedded in the svg:image element
      console.log(d3.select("image").node().__data__)
      };
      
}
</script>
</footer>
 
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js