Circles!

<!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("body").append("svg")
  //    .attr("width", width)
  //    .attr("height", height)
  //  .append("g");
    
    height = 500
    width = 800
    
    var svg = d3.select('svg');
    for (var i = 0; i < 500; i++) {
      var data = {
          x : Math.random() * width * Math.random(),
    	    y : Math.random() * height * Math.random(),
    	    radius : Math.random() * 10 + 1,
      	  color : Math.random() < 0.42 ? 'orange' : 'black'}
      
      svg.append('circle')
    		 .datum(data)};
    
    d3.selectAll('circle')
      .attr('cx', function(d) {
      	return d.x;
    })
      .attr('cy', function(d) {
        return d.y;
    })
      .attr('r', function(d){
        return d.radius;
    })
      .style('fill', function(d) {
        return d.color
    })

</script>
</body>

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