Rectangle With Circle Dots

forked from kataquino's block: Rectangle With Circle Dots

forked from anonymous's block: Rectangle With Circle Dots

<!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 x_center = width/2;
    var y_center = height/2;
    var radius = 5;
    
    var svg = d3.select('svg');
    
    for (var i = 0; i < 7000; i++){
      var x = Math.random()*width;
      var y = Math.random()*height;
      var d = Math.sqrt(Math.pow((x-x_center),2) + Math.pow((y-y_center),2));
      
      if (d < 100)
        color = 'red';
      else if (d >= 100 & d <=110)
        color = 'magenta';
      else if (d > 110 & d <=200)
        color = 'orange';
      else 
				color = 'grey'
        
      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