function recirc(selection) { selection.each(function(data) { d3.select(this).selectAll("div.recirc") .data(data) .enter() .append("div.recirc") .each(render) .on("click", function(d) { window.location.href = d.url; }); }); function render(d,i) { var recirc = d3.select(this); recirc.append("div.title"); recirc.append("div.source"); recirc.append("iframe"); fetch(d.src) .then( function(response) { response.text().then(function(rText) { // get page title var titleStart = rText.indexOf("") + "<title>".length; var titleEnd = rText.indexOf(""); var titleLength = titleEnd - titleStart; var title = rText.substr(titleStart, titleLength); recirc.select(".title").text(title); // get the source between and var start = rText.indexOf("") + "".length; var length = end - start; var source = rText.substr(start,length); var progress = 0; var iframeDocument = recirc.select("iframe").node().contentWindow.document; var renderingInterval = setInterval(function() { // increment within bounds progress=Math.min(progress + 5, source.length) // add some text recirc.select(".source").text(source.substr(0,progress)); // scroll to bottom recirc.select(".source").node().scrollTop = recirc.select(".source").node().scrollHeight; iframeDocument.open(); iframeDocument.write(source.substr(0,progress)); iframeDocument.close(); iframeDocument.getElementsByTagName("body")[0].scrollTop = iframeDocument.getElementsByTagName("body")[0].scrollHeight; if(progress === source.length) clearInterval(renderingInterval); }) }) } ); } }