Why do I get an incorrect Voronoi diagram?

Question

I'm trying to generate a Voronoi diagram for a set of latitude/longitude points.

var points = [["-87.63374","41.878723"],["-87.680622","41.829353"],["-87.631739","41.8768"],["-87.626149","41.884431"]] ;
var boundingRegion = d3.geom.polygon([
    [-88, 41.7],
    [-88, 42.3],
    [-87.5, 42.3],
    [-87.5, 41.7]
    ]);

var voronoi = d3.geom.voronoi(points).map(function(cell) {
    return boundingRegion.clip(cell);
});

document.write("<pre>"+JSON.stringify(voronoi, null, ' ')+"</pre>");​

I have a JSFiddle for that basic example here:

http://jsfiddle.net/ZzjpC/2/

I'm putting in 4 points and clipping them by using a simple rectangle.

The points are such that I should see at least one clipped vertex for each of the resulting Voronoi regions... the first one alone does not meet that.

When you plot them on a Google Map, the polygons intersect and are in total disarray.

If you look at http://jsfiddle.net/ZzjpC/3/, where the last point has been removed, everything looks fine.

So here's my question: is there something wrong with my set of points that is causing the Voronoi diagram generation to fail? Or is this a D3 bug and I should be telling those folks?

Answer 1

Turns out the problem was with the fact that my Voronoi sites (points) were arrays of strings instead of floats was the cause of the issue. My guess is that there was an addition taking place somewhere that was executed as a string concatenation instead and that broke things.

Converting the points to floats instead of strings fixed the problem.