D3 Examples - d3.unconf 2016

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="textures.min.js"></script>
​
  <style>
    body { 
      margin:0;
      position:fixed;
      font-family: Inconsolata, Consolas, mono;
      font-size: 16px;
    }
    
    .container {
      fill: #f1f1f1;
    }
    
    
  </style>
</head>
​
<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>
​
    