n1n9-jp/README.md

## README.md

      
    Raw
  

              README.md
            
          
    5 circles are better than 1.

loop animation basics.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
	border: 1px solid #AAA;
	width: 450px;
	height: 450px;
	margin: 25px auto 0 auto;
}
</style>
<body>
<div id="main"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

	var margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = 450 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

	var svg = d3.select("#main").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var interval = 2000;

	var circles = svg.selectAll(".en").data( [0,1,2,3,4] );

		circles.enter()
			.append("circle")
			.attr("class", "en");


	var mainLoop = function() {

		circles.transition()
			.ease("linear")
			.duration(1000).delay( function(d,i){return i*50}).ease("circle")
			.attr("r", function(d) { return Math.floor( Math.random()*200+20) })
			.attr("cx", function(d) { return Math.floor( Math.random()*width) })
			.attr("cy", function(d) { return Math.floor( Math.random()*height) })
			.attr("opacity", 1.0)
			.attr("stroke", "#000")
			.attr("stroke-width", "10px")
			.style("fill", "none");

	    return function() {
	        d3.timer( mainLoop(), interval );
	        return true;
	    }
	};

	d3.timer( mainLoop(), interval );

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	#main {
	border: 1px solid #AAA;
	width: 450px;
	height: 450px;
	margin: 25px auto 0 auto;
	}
	</style>
	<body>
	<div id="main"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 0, right: 0, bottom: 0, left: 0},
	width = 450 - margin.left - margin.right,
	height = 450 - margin.top - margin.bottom;

	var svg = d3.select("#main").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var interval = 2000;

	var circles = svg.selectAll(".en").data( [0,1,2,3,4] );

	circles.enter()
	.append("circle")
	.attr("class", "en");


	var mainLoop = function() {

	circles.transition()
	.ease("linear")
	.duration(1000).delay( function(d,i){return i*50}).ease("circle")
	.attr("r", function(d) { return Math.floor( Math.random()*200+20) })
	.attr("cx", function(d) { return Math.floor( Math.random()*width) })
	.attr("cy", function(d) { return Math.floor( Math.random()*height) })
	.attr("opacity", 1.0)
	.attr("stroke", "#000")
	.attr("stroke-width", "10px")
	.style("fill", "none");

	return function() {
	d3.timer( mainLoop(), interval );
	return true;
	}
	};

	d3.timer( mainLoop(), interval );

	</script>
	</body>
	</html>