saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Chaining Transitions, on Booboo's idea.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        text-align: center;
    }
</style>
<body>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
        function getcx(this_){
            var center = width/2;
            var current = +d3.select(this_).attr("cx");
            var diff = Math.abs(center - current);

            if (current < center){
                cx = current + (diff*2);
            }
            else{
                cx = current - (diff*2);
            }
            return cx;
        }

        function getcy(this_){
            var center = height/2;
            var current = +d3.select(this_).attr("cy");
            var diff = Math.abs(center - current);

            if (current < center){
                cy = current + (diff*2);
            }
            else{
                cy = current - (diff*2);
            }
            return cy;
        }

        function newcord(radius, angle){
            return {
                x: radius * Math.cos(angle),
                y: radius * Math.sin(angle)
            };
        }

        var width = 500;
        var height = 500;
        var space = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g");

        var radius = 130;
        var colors = d3.scale.linear().interpolate(d3.interpolateHcl).domain([0, 440]).range(['pink', 'lightblue']);
        for (var i =0; i<440; i++){
            var pp = newcord(radius, i);
            space.append("circle")
                .attr("cx", pp.x + width/2)
                .attr("cy", pp.y + height/2)
                .attr("r", 3)
                .attr("fill", "none")
                .attr("stroke", "crimson");
        }

        var items = space.selectAll("circle");
        var q = items[0].map(function(d){
            var item = {
                x1: +d3.select(d).attr("cx"),
                y1: +d3.select(d).attr("cy"),
                x2: getcx(d),
                y2: getcy(d),
            };
            return item;
        });

        space.selectAll()
            .data(q)
            .enter()
            .append("line")
            .attr("x1", function(d){return d.x1})
            .attr("y1", function(d){return d.y1})
            .attr("x2", function(d){return d.x2})
            .attr("y2", function(d){return d.y2})
            .style("fill", "none")
            .style("stroke", "red")
            .style("stroke-width", 0.1);

        space.selectAll("circle")
            .call(animate);

        function animatesingle(item){
            item
            .transition()
            .duration(4000)
            .delay(function(d, i){ return i * 10})
            .attr("cx", function(){ return getcx(this)})
            .attr("cy", function(){ return getcy(this)})
            .each("end", function(){
                animatesingle(item);
            });
        }

        function animate(items){
            items
            .transition()
            .duration(3000)
            .delay(function(d, i){ return i * 4 })
            .attr("cx", function(){ return getcx(this)})
            .attr("cy", function(){ return getcy(this)})
            .each("end", function(){
                animatesingle(d3.select(this));
            });
        }
    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	function getcx(this_){
	var center = width/2;
	var current = +d3.select(this_).attr("cx");
	var diff = Math.abs(center - current);

	if (current < center){
	cx = current + (diff*2);
	}
	else{
	cx = current - (diff*2);
	}
	return cx;
	}

	function getcy(this_){
	var center = height/2;
	var current = +d3.select(this_).attr("cy");
	var diff = Math.abs(center - current);

	if (current < center){
	cy = current + (diff*2);
	}
	else{
	cy = current - (diff*2);
	}
	return cy;
	}

	function newcord(radius, angle){
	return {
	x: radius * Math.cos(angle),
	y: radius * Math.sin(angle)
	};
	}

	var width = 500;
	var height = 500;
	var space = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g");

	var radius = 130;
	var colors = d3.scale.linear().interpolate(d3.interpolateHcl).domain([0, 440]).range(['pink', 'lightblue']);
	for (var i =0; i<440; i++){
	var pp = newcord(radius, i);
	space.append("circle")
	.attr("cx", pp.x + width/2)
	.attr("cy", pp.y + height/2)
	.attr("r", 3)
	.attr("fill", "none")
	.attr("stroke", "crimson");
	}

	var items = space.selectAll("circle");
	var q = items[0].map(function(d){
	var item = {
	x1: +d3.select(d).attr("cx"),
	y1: +d3.select(d).attr("cy"),
	x2: getcx(d),
	y2: getcy(d),
	};
	return item;
	});

	space.selectAll()
	.data(q)
	.enter()
	.append("line")
	.attr("x1", function(d){return d.x1})
	.attr("y1", function(d){return d.y1})
	.attr("x2", function(d){return d.x2})
	.attr("y2", function(d){return d.y2})
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-width", 0.1);

	space.selectAll("circle")
	.call(animate);

	function animatesingle(item){
	item
	.transition()
	.duration(4000)
	.delay(function(d, i){ return i * 10})
	.attr("cx", function(){ return getcx(this)})
	.attr("cy", function(){ return getcy(this)})
	.each("end", function(){
	animatesingle(item);
	});
	}

	function animate(items){
	items
	.transition()
	.duration(3000)
	.delay(function(d, i){ return i * 4 })
	.attr("cx", function(){ return getcx(this)})
	.attr("cy", function(){ return getcy(this)})
	.each("end", function(){
	animatesingle(d3.select(this));
	});
	}
	</script>
	</body>