index.html
<!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]]);
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>
cubehelix.min.js
!function(){function t(t){return function(e,i){e=d3.hsl(e),i=d3.hsl(i);var r=(e.h+120)*a,h=(i.h+120)*a-r,s=e.s,l=i.s-s,o=e.l,u=i.l-o;return isNaN(l)&&(l=0,s=isNaN(s)?i.s:s),isNaN(h)&&(h=0,r=isNaN(r)?i.h:r),function(a){var e=r+h*a,i=Math.pow(o+u*a,t),c=(s+l*a)*i*(1-i);return"#"+n(i+c*(-.14861*Math.cos(e)+1.78277*Math.sin(e)))+n(i+c*(-.29227*Math.cos(e)-.90649*Math.sin(e)))+n(i+c*1.97294*Math.cos(e))}}}function n(t){var n=(t=0>=t?0:t>=1?255:0|255*t).toString(16);return 16>t?"0"+n:n}var a=Math.PI/180;d3.scale.cubehelix=function(){return d3.scale.linear().range([d3.hsl(300,.5,0),d3.hsl(-240,.5,1)]).interpolate(d3.interpolateCubehelix)},d3.interpolateCubehelix=t(1),d3.interpolateCubehelix.gamma=t}();