Accepted answer

There are two things in your jsfiddle. First, you're not actually using the scales you've created to position the hexagons. Second, you're computing the domains based on the original values and the drawing the values computed by the hexbin.

So first compute the domains based on the binned values:

var projectedPoints = hexbin(points);

var x = d3.scale.linear()
    .domain(d3.extent(projectedPoints, function(d) { return d.x; }))
    .range([0, width]);

var y = d3.scale.linear()
    .domain(d3.extent(projectedPoints, function(d) { return d.y; }))
    .range([height, 0]);

And then translate the hexagons using the scales:

.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })

Complete demo here.

Related Query

More Query from same tag