D3 Examples - Based adaptation of Jfire.io animation, for teaching purposes: more difficult

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body {background: #4900B2}
  </style>
</head>
​
<body>
  <script>
​
  // created by https://jfire.io/animations/2015-03-09/, adapted for demo, adapted for learning
var width = 900,
    height = 500,
    n = 60;
    
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
​
var g = svg.selectAll(".groups")
    .data(d3.range(n))
    .enter().append("g").attr("class", "group");
​
    
var ramp = d3.scale.linear().domain([0,g[0].length]).range(['#FFF700','#9B56FF']);
    
    
var paths = 
    g.append("path")
        .attr("fill","none")
        .attr("stroke", function(d,i){ramp(i)})
        .attr("stroke-width", "15px")
        .attr("d","M-250,0L250,0")
​
​
var ellipses = 
    g.selectAll("ellipse")
      .data([-250, 250])
      .enter().append("ellipse")
        .attr("cx", function(d) {return d;})
        .attr("cy", "0px")
        .attr("rx", 10)
        .attr("ry", 1)
        .attr("fill", "#bbb")
​
​
d3.timer(function(t) {
  g.attr("transform", function(d) {
     return "translate(" + [width / 2, (d + 1) * height / (n + 3)] + ")scale(" + (Math.sin(d / 2 - t / 1000) + 1) / 2 + ",1)";
  });
});
    
paths
  .attr('stroke', ramp)
  .filter(function(d,i){ return i%2 === 0})
  .attr('opacity', .6 )
​
ellipses
  .attr('fill', "#B2AD00")
  .filter(function(d,i){ return i%2 === 0})
  .attr('opacity', .9)
  .filter(function(d,i){ return i < 20})
  .attr('fill', 'white')
​
​
  </script>
</body>
​
    