Eclipse

##Artifical Sun

<!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>

var width = 760;
   var height = 500;
   var x_center = width/2;
   var y_center = height/2;
   
   var svg = d3.select('svg');
   
   for (var i = 0; i < 7000; i++){

var x = Math.random()*width;
     var y = Math.random()*height;
     // get distance of data point from center
     var d = Math.sqrt(Math.pow((x-x_center),2) + Math.pow((y-y_center),2));
     var color = "black"

if (d <= 180)
			color = "orange";
         
     else if (d > 180 & d <=200)
			color = "red";
     
     else
       color = 'black';
     
    var data = {x: x,
           y: y,
           radius: 5,
           fill: color,
           opacity: 0.5};
     
     
     svg.append('circle') 
       .datum(data)
   }
   
   svg.selectAll('circle')
             .attr('r', function (d){
               return d.radius;
               })
         .attr('cx', function (d){
               return d.x;
               })
         .attr('cy', function (d){
               return d.y;
                           })
             .attr('fill', function (d){
               return d.fill;
                         })
             .style('opacity', function (d){
               return d.opacity;
                           });

console.log(d3.selectAll('circle'));
      </script>

</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js