tmcw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    d3 interpretation of geometry daily

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
    font:normal 12px/20px 'Georgia';
    background:url(data:image/png;base64,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) #222;
    text-align:center;
}
a { display:block; }
circle {
    fill:transparent;
    stroke:#000;
}
</style>
<body>
<a href='http://geometrydaily.tumblr.com/post/38547310980/357-staring-at-the-sun-only-ten-posts-left'>inspired by geometrydaily 'staring at the sun'</a>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var g = d3.select('body').append('svg')
    .attr({ width: 800, height: 800 })
    .append('g')
    .attr('transform', 'translate(400, 400)');

var c = g.selectAll('circle')
    .data(d3.range(0, 20))
    .enter()
    .append('circle')
    .attr('r', function(d) {
        return d * 20;
    });

var flip = true;

window.setInterval(function() {
    c
        .transition()
        .delay(function(d, i) { return i * 100; })
        .attr('stroke-width', function(d) {
            return flip ? d : 20 - d;
        });
    flip = !flip;
}, 5000);
</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font:normal 12px/20px 'Georgia';
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAGi0lEQVRYR23YiW7jOgyFYaf79v4v2s50b25+oZ/BCa6BNrYsUVwODykfPj8/jx8fH9vNzc12ut/u7++3ru6vr6+34/G4vb29bYfDYbu9vd3vf35+toeHh+3l5WXN77q8vNyurq7W/fv7+/b09LS9vr4uOb378+fPdnd3t+Yk09zeNa8rmemT/MYPz8/Pxxa5enFxcbEe+02xr6+vJawNEvD9/b0MyKgM6Op985rP4JToap6xZDa3dc3NQPsns/vW5agl76T52qFFaZzlCfz79+8+lkJdKd+fKw+1QWvbuHUJpXSy2tA6Hk4eBVOmtRSyliGHQpzQhLQRS3tucmME8lKbtqbQZXV/PN+7PNPa5rQRmSnY1XjKF41ptAis0J5krL/T5guDLKJEk/MQrPS+P0oJb0LapHn9tobBGRZuU7L3bSxKyWlef81J4YnJ5rX+cNr0mAd6YI2JcNi4BGne4+Pjmn8unBKtt2H3rc8JyUix7lOadxtPngj2XtKtJMnVbcb9LSxUFIfPPMiI5tgY9mR2+M2TzS87W0/RxhgnOTLMfXokr8hk5MJgGsNNylJshn1mawsLARxSFn0AuESb+Ex2e6UUDCYHPlHUniQn5Y4JztIWCgGwz9DbCO30K9wzyUSid5QpjF3k8VBKYoh+eVjUlgdtnHVNQA15FhlLHpSQB9BPglPGBjBETp7sPaLmPZ5vf4WhMXJXNp8WLQVZm1eajEzhC3m3WWM9C03zPcNuwhvLYOHrOd7MaHKKWIrjYrmwezCa4e5JMd1jdcqhhizs3SxzM5wqx4RCCpQ48M045I13eQ/5H04vjuGvDRfv/JKsTJOBhYUSqgcF0ERKoBrcljxXskRHlYG5FBStfuHycHL1SpI2S8nc7bnfJiNiVvWsmjQmbMnAca1TEQonKmsMXWkgRCiZs2ik5EoSqc9SOJDqKkECZunKC3l6p4STt3pWLZqvXGZ4EdDdnNd3SlaT8WJrFlGrGP9Xd8OdqsAj5i8iHSEUVmVRAyECuqMUx6XNnaSf7Bmd1c3kMX0YXMFG4wnTbQhpysjUItCcxnqf5aDRGHpRJSYDzBo82zSJtveDkmD2fGqqbEYFwN6GhUp25m2XJmPiOU/qcFBP+ymLnEOHFaHTvyOM4SfJ0XgApxg6SqBxHYxE4R2dDzoJe0WhX1VHaURpmleFo9+VJDrfrOIFymnbZ6lqjjo7Mcp7MJXc2an0flYn1QelTTrqfvWH8aAzBxfrxVACr8xkSkEt02ypMkjzoRrxWL+yV8PaszEZ377Jz7jFgw3gr4R0zZ6vZ0qnVF5zntCREL6465TZs5NprfOGRFDqVCW1vbkpRo+VJDzRJr1MiGaU4DYNvBSVOCkoAikXzvSBzYFVNTrjzhtjkNBhzxK7FEQZ3K0ZSDhLZFqbN+74GLAnPpFzIZQgumUZrYHgGDQGd7MpXkkyuU1VUcQXUH+7W1ypPlPOUVOCIW9YVOed4FJs4WscO+cpb+6ziHqCfLI4kCtnlNVQTJ7MaokzvT7r9Gxq9ZnzwKRgzHk7Btt0Vov4Clhl8azRs5PRmTjZ8WAeba0Q9h62C+dsrfBmXvdFY0WgEJ83Ceik3/CovdLFCNXsboQz5WZEZDkOTF7vu4SV9xUEXl2HJ+0WXmpzQngMeOfBJkW06efljTeaf37WYYAD18Q/CM3yuHczvKbMCCsaQRnKoMShPKHKJW+cn9biV18iZuVQzRqbn0v2Tx+zisxmAEfBldJlY/w4u2pcCfRoKRho6SiiT5wd0CwMOw86b7AElRCqQvAUL2irZP/0RN7Cm62HrYm17nU+6RDek9n9KgCSZH57URkoIxQ6ZUrxug3NQ8C9nx117+dhPTkahfmtRoe+zki+LDhD5OosBWLVYII776kePjb6mDQP+g7lziq6JWcRFUzd1oFL1J1mslIWA78MniXNN5Pmz+8x3TtHFCJHAwcx2a5KiQCsasvSYR4TdgVnKw5DZXNuhwvtfO/hwwefScazW9E49F4zGmyao+7DpQZB9RLFPYvhTXY61GD1rG9DZU8D0HgbShL4ceKb3gIXBQBB8zgZmtqVmH36mJzX4OxqeoYRIVut+O8R01ibOLQ7QqASIVTmGBfehZSSstj3xJ2otUlNdLCRDL448GLvEbpMzbvG1NyJxRImo2a1ACeepcM/HzD7NqML4RWfcVnuKKn2SiRHwwmPINHzbDYQr9Pa7IqcJnOCRJtc/B/+/6EuOzLq5gAAAABJRU5ErkJggg==) #222;
	text-align:center;
	}
	a { display:block; }
	circle {
	fill:transparent;
	stroke:#000;
	}
	</style>
	<body>
	<a href='http://geometrydaily.tumblr.com/post/38547310980/357-staring-at-the-sun-only-ten-posts-left'>inspired by geometrydaily 'staring at the sun'</a>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var g = d3.select('body').append('svg')
	.attr({ width: 800, height: 800 })
	.append('g')
	.attr('transform', 'translate(400, 400)');

	var c = g.selectAll('circle')
	.data(d3.range(0, 20))
	.enter()
	.append('circle')
	.attr('r', function(d) {
	return d * 20;
	});

	var flip = true;

	window.setInterval(function() {
	c
	.transition()
	.delay(function(d, i) { return i * 100; })
	.attr('stroke-width', function(d) {
	return flip ? d : 20 - d;
	});
	flip = !flip;
	}, 5000);
	</script>
	</body>