d3.unconf 2016

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="textures.min.js"></script>

<body>
  <script>
    console.clear();
    var margin = {top: 0, right: 0, bottom: 0, left: 0};
		var width = 1050 - margin.left - margin.right;
		var height = 1500 - margin.top - margin.bottom;
    
    var n = 6;
    var int = 360/n;
    var fixedRadius = 100;
    var radius = 50;
    var scale = radius/40;
   
    var ease = d3.easeCubic;
   
    var t = textures.lines()
    	.size(5)
    	.stroke("#3369E8")
    	.strokeWidth(1);
    
    var tOut = textures.lines()
    	.size(5)
    	.stroke('red')
    	.strokeWidth(1);
        
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    	.append("g")
				.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    svg.append("rect")
    	.attr("class", "container")
    	.attr("x", 0)
    	.attr("y", 0)
    	.attr("width", width)
    	.attr("height", height);
    
   	svg.call(t);
    svg.call(tOut);
    
    svg.append("text")
    	.attr("x", width/2)
    	.attr("y", 3*height/4+10)
    	.text("Ebbinghaus Illusion")
    	.style("text-anchor", 'middle');
    
    svg.append("circle")
    	.attr("class", "fixed")
    	.attr("cx", width/2)
    	.attr("cy", height/2-80)
    	.attr("r", fixedRadius)
    	.style("fill", t.url());
    
    var circleGroup = svg.append("g")
    	.attr("class", "circles");
    
    var circles = circleGroup.selectAll("g")
    	.data(d3.range(n))
    	.enter().append("g");
    
    circles.append("circle")
			.attr("cx", function(i) { return Math.sin(int*i*Math.PI/180)*(fixedRadius+radius*scale) + width/2; })
    	.attr("cy", function(i) { return Math.cos(int*i*Math.PI/180)*(fixedRadius+radius*scale) + height/2-80; })
    	.attr("r", radius)
    		.style("fill", tOut.url());
    
    
    circles.selectAll("circle")
    		.transition().duration(1500)
          .ease(ease)
          .attr("cx", function(i) { 
            return Math.sin(int*i*Math.PI/180)*(fixedRadius+(radius*scale*2.5)) + width/2; })
          .attr("cy", function(i) { 
            return Math.cos(int*i*Math.PI/180)*(fixedRadius+(radius*scale*2.5)) + height/2-80; 
          })
          .attr("r", radius*2.5)
        .transition().duration(1500)
          .ease(ease)
          .attr("cx", function(i) { 
            return Math.sin(int*i*Math.PI/180)*(fixedRadius+radius*scale) + width/2; })
          .attr("cy", function(i) { 
            return Math.cos(int*i*Math.PI/180)*(fixedRadius+radius*scale) + height/2-80; })
          .attr("r", radius);
    
    d3.select(self.frameElement)
    	.style('height', height+'px')
      .style('width', width+'px');
    
    svg.selectAll("text")
    	.attr("x", width/2)
    	.attr("y", 3*height/4+10);

</script>
</body>

https://d3js.org/d3.v4.min.js