[grid] overlapping circles + clipping

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: Helvetica;
    font-size: 20px;
  }

circle {
    fill: none;
    stroke: white;
    stroke-width: 1;
  }
</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>
	var width = 400,
	    height = 400,
      offset = 50;
	
	// params to play with
	var n = 50,
      m = 5,
	    data =  d3.range(n);
	
	var svg = d3.select("body")
	    .append("svg")
        .attr("width", width)
        .attr("height", height)
  		.append("g")
				.attr("transform", "translate(" + offset + ", " + offset + ")");
  
	var params = {
	  "size": [width, height],
	  "offset": [0, 0],
	  "mode": "grid"
	};

var gridding = d3.gridding()
    .params(params);

var circles = g.selectAll("#circle")
    .data(d3.range(m).sort(d3.descending))
  		.enter().append("circle")
      .attr("class", "circle")
			.attr("cx", w)
			.attr("cy", h)
  		.style("fill", function(d) {
       	if(Math.random() > .4)
          return "black";
        else
         	return "white";
      })
      .attr("id", "circle")
      .attr("r", function(d) { return w/4 + 1 * (d / (2*m)) * w; })
 
  </script>

</body>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://romsson.github.io/d3-gridding/build/d3-gridding.js to a secure url

https://d3js.org/d3.v4.js

https://romsson.github.io/d3-gridding/build/d3-gridding.js