D3 Examples - Solar Eclipse

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 { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>
​
<body>
  <svg>
  </svg>  
  
  <script>
    var width = 960;
    var height = 500;
    
    var svg = d3.select('svg');
        var x_center = width / 2;
        var y_center = height / 2;
    
    for (var i = 0; i < 5000; i++) {
      
      var x = Math.random() * width;
      var y = Math.random() * height;
      var radius = Math.random() * 8 + 1;
      var dist = Math.sqrt(Math.pow((x-x_center),2) + Math.pow((y-y_center),2));
​
      if (dist <= 150) {
        var color = '#004547';
        x -= 20;
        y += 20;
        radius *= 1.3;
        opacity = .5;
      }
            else if (dist > 150 & dist <= 180) {
                var color = '#ffe989';
        radius *= 1.5;
        opacity = .5;
      }
            else if (dist > 180 & dist <= 200) {
                var color = '#ffc551';
        radius *= 1.5;
        opacity = .5;
      }
      else {
        var color = '#001d1e';
        radius *= 1;
        opacity = .5;
      }
      
      var data = {
        x : x,
        y : y,
        radius : radius,
        opacity: opacity,
        color : color
      };
      
      svg.append('circle')
         .datum(data);
    };
    
    svg.selectAll('circle')
       .attr('cx', function(d) {
              return d.x;
         })
       .attr('cy', function(d) {
              return d.y;
         })
       .attr('r', function(d) {
              return d.radius;
       })
       .attr('opacity', function(d) {
              return d.opacity;
       })
       .attr('fill', function(d) {
              return d.color;
       });
    
  </script>
</body>
​
    