index.html
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title>Embedding Image Data into Elements</title>
<meta charset="utf-8" />
</head>
<script src="//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 = document.getElementById("newCanvas").toDataURL("image/png")
d3.select("body").append("img").datum(imageData).attr("src", function(d) {return d})
d3.select("body").append("svg").attr("height", "300px").attr("width", "276px")
d3.select("svg").append("image").datum(imageData).attr("height", 300).attr("width", 276).attr("xlink:href", function(d) {return d})
console.log(d3.select("img").node().__data__)
console.log(d3.select("image").node().__data__)
};
}
</script>
</footer>
</html>