D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mbostock
Full window
Github gist
Mitchell’s Best-Candidate V
<!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>