Randomly distributed regions

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	path {
		fill: steelblue;
		opacity: 0.9;
	}
	circle {
		display: none;
		fill: steelblue;
		opacity: 0.5;
	}
	svg:hover  circle {
		display: inline;
	}
</style>
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>
    var gemspaths;
    
    var width = 960, 
        height = 500;
        
    var xym = d3.geo.mercator();
    var translate = xym.translate();
    
	    translate[0] = -420;
	    translate[1] = 4790;
    	xym.translate(translate).scale(5400);

var path = d3.geo.path().projection(xym);

var line = d3.svg.line()
    	.x(function(d) {return d[0] * x;})
    	.y(function(d) {return -d[1] * x;})
    	.interpolate("linear");

var svg = d3.select("body").append("svg")
    	.attr("width", width)
    	.attr("height", height);

d3.json("https://dl.dropboxusercontent.com/s/32jz23x36x7ocnq/nlwgs.geojson?dl=1", function(error, _data) {
      if (error) throw error;
      
      nodes = [];
      
      _data.features.forEach(function(d) {
        nodes.push({
          radius : 1,
          type : d.type,
          properties : d.properties,
          geometry : d.geometry
        })
      });
      
      var force = d3.layout.force()
      	.gravity(-0.01)
      	.chargeDistance(-30)
      	.nodes(nodes)
      	.size([width, height]);

force.start();

gems = svg.selectAll("g")
      	.data(nodes)
      	.enter().append("g")
      	.call(force.drag);

circs = gems.append("circle")
      	.attr("r", 0);

gemspaths = gems.append("path")
      	.attr("d", function(d) {return path(d.geometry);})
      	.classed("gemeente", true)
      	.attr("id", function(d) {return "g" + d.properties.GEMNR})
      	.attr("transform", function(d) {
       		dx = -path.centroid(d)[0];
        	dy = -path.centroid(d)[1];
        	d.radius = getR(path.bounds(d)) / 2;
        	circs.attr('r', function(d) {return d.radius});
        	return "scale(1.2) translate(" + dx + ", " + dy + ")"
      	});

force.on("tick", function(e) {
        var q = d3.geom.quadtree(nodes), i = 0, n = nodes.length;
        
        while (++i < n)
        q.visit(collide(nodes[i]));
        svg.selectAll("g")
        	.attr("transform", function(d) {
          		d.x = Math.max(d.radius + 8, Math.min(width - d.radius - 8, d.x));
          		d.y = Math.max(d.radius + 8, Math.min(height - d.radius - 8, d.y));
          		return "translate(" + d.x + "," + d.y + ")";
        	});
      	});
    })
    
    function collide(node) {
      var r = node.radius + 16, 
          nx1 = node.x - r, 
          nx2 = node.x + r, 
          ny1 = node.y - r, 
          ny2 = node.y + r;
      return function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== node)) {
          var x = node.x - quad.point.x, 
              y = node.y - quad.point.y, 
              l = Math.sqrt(x * x + y * y), 
              r = node.radius + 16 + quad.point.radius;
          if (l < r) {
            l = (l - r) / l * .5;
            node.x -= x *= l;
            node.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      };
    }

function getR(array) {

return d3.max([array[1][0] - array[0][0], array[1][1] - array[0][1]]);
    }
</script>

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