D3 Examples - Circles clipped in a circle

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>show an axis from loaded CSV</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<style>
.axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
}
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
}
​
​
</style>
</head>
<body>
<script type="text/javascript">
​
​
var dataset;  //Declare global var
​
var svg = d3.select("body")
            .append("svg")
            .attr("width", 1000)   
            .attr("height", 1000); 
​
​
var dataset = [];
    for (var i = 0; i < 1000; i++) {
        var newNumber = Math.random() * 900;
        dataset.push(newNumber);
        
}
    
           
​
​
svg.append("clipPath")
    .attr("id", "chart-area")
    .append("circle")
    .attr("cx", 500)
    .attr("cy", 500)
    .attr("r", 200);
    
    
    svg.append("g")
   .attr("id", "circles")
   .attr("clip-path", "url(#chart-area)")
   .selectAll(".circles")
        .data(dataset)
        .enter()
        .append("circle")
        .classed("circles",true)
        .attr("cx",function(d,i) { return d;})
        .attr("cy",function(d,i){return i;})
        .attr("r",15)
        .style("opacity",0.4)
     
        ;         
          
        
 
​
​
</script>
​
​
</body>
</html>
    