D3 Examples - Recirc fetching source

Recirc fetching source

Originally conceived for What Is Code as a recirculation module to link to other pages. The idea is just to show source and rendered html in some animated manner. It doesn't work cross-origin so I have some dummy html pages here, so they are fetching dummy source but linking to real source, but if it were same-origin it could just fetch the real url.

Should really use d3.timer instead of setInterval incrementing character by character...

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
​
<link rel="stylesheet" type="text/css" href="main.css"/>
​
<body>
​
</body>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-jetpack@1.0.2/d3-jetpack.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/0.10.0/fetch.min.js" charset="utf-8"></script>
​
<script src="main.js" charset="utf-8"></script>
​
<script>
​
var pages = [
  {
    "url": "https://www.bloomberg.com/bw/articles/2013-10-10/jeff-bezos-and-the-age-of-amazon-excerpt-from-the-everything-store-by-brad-stone",
    "src": "sample1.html"
  },
  {
    "url": "https://www.bloomberg.com/news/articles/2015-04-14/docker-said-to-join-1-billion-valuation-club-with-new-funding",
    "src": "sample2.html"
  },
  {
    "url": "https://www.bloomberg.com/news/articles/2015-04-02/soon-students-may-learn-to-code-instead-of-taking-french-class",
    "src": "sample3.html"
  },
  {
    "url": "https://www.bloomberg.com/news/articles/2015-05-07/coding-classes-attract-college-grads-who-want-better-jobs",
    "src": "sample4.html"
  },
  {
    "url": "https://www.bloomberg.com/bw/articles/2013-11-07/the-hidden-technology-that-makes-twitter-huge",
    "src": "sample5.html"
  }
];
​
d3.select('body').datum(pages).call(recirc);
​
</script>
​
</html>
​
    