Drawing voronoi diagram from a csv file with d3.js

Question

I want to draw voronoi diagram using http://mbostock.github.com/d3/ex/voronoi.html from a set of points in a csv file.

I have modified the code:

var w = 1200,
h = 800;

d3.text("ReMeRi_4_2_2_0.csv", function(datasetText) {

var vertices = d3.csv.parseRows(datasetText);

var svg = d3.select("#chart")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "BuPu");


svg.selectAll("path")
    .data(d3.geom.voronoi(vertices))
  .enter().append("path")
    .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2)

 text1 = svg.append("svg:text")
    .text("control")
    .attr("x", 150)
    .attr("y", 200)
    .style("stroke", "orange")
    .style("stroke-width", 0)
    .style("font-size", "80%")
    .style("fill", "orange");

});

The points are drawn correctly but the polygons of the tesselation are not.

I have tried to add header row and the csv.parse() function without success. At the beginning I was thinking the solution was to iterate over the array to parse to float, but I couldn't do it. If that is the reason why the points are drawn correctly anyway?.

The csv file looks like this:

0.0,0.0
116.78032769067718,0.0
193.02842412648215,78.92418723196411
323.01058809711515,54.15210221124609
378.8576448450217,202.5192012545716
...

Answer 1

I think it is, as you suggest, a problem with the numbers getting parsed as Strings rather than Numbers. Even if that's not what's breaking it, it'd be good to fix. This is one way of doing it (might be a more idiomatic way to do it, dunno):

var vertices = d3.csv.parseRows(
  datasetText,
  function(pt) { return [parseFloat(pt[0]), parseFloat(pt[1])]; })
);

That might fix your problem.