D3 Examples - Randomly distributed regions

xxxxxxxxxx
 
<!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>
​
    