D3 Examples - Mitchell’s Best-Candidate V

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>
<script src="cubehelix.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var sample = bestCandidateSampler(width, height, 10, 10000),
    samples = [],
    s;
​
while (s = sample()) samples.push(s);
​
var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]); // TODO overdraw
​
var color = d3.scale.cubehelix()
    .domain([0, 200])
    .range([d3.hsl(96, .6, 1), d3.hsl(276, .6, 0)])
    .clamp(true);
​
d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .selectAll("path")
    .data(voronoi(samples))
  .enter().append("path")
    .style("fill", function(d) { return color(d3.geom.polygon(d).area()); })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
​
function bestCandidateSampler(width, height, numCandidates, numSamplesMax) {
  var numSamples = 0;
​
  var quadtree = d3.geom.quadtree()
      .extent([[0, 0], [width, height]])
      ([[Math.random() * width, Math.random() * height]]);
​
  return function() {
    if (++numSamples > numSamplesMax) return;
    var bestCandidate, bestDistance = 0;
    for (var i = 0; i < numCandidates; ++i) {
      var c = [Math.random() * width, Math.random() * height],
          d = distance(quadtree.find(c[0], c[1]), c);
      if (d > bestDistance) {
        bestDistance = d;
        bestCandidate = c;
      }
    }
    quadtree.add(bestCandidate);
    return bestCandidate;
  };
​
  function distance(a, b) {
    var dx = a[0] - b[0],
        dy = a[1] - b[1];
    return dx * dx + dy * dy;
  }
}
​
</script>
​
    