read csv/tsv with no header line in D3

Question

I have CSV data which looks something like:

Data

1,1,10
1,2,50
1,3,5
etc...

And I am trying to read in the data. However, my initial data does not contain a header row (as seen above) so it is taking the first data row to be the header (1,1,10). Is there anyway around this. I want to set the header names after I read the data

Javascript

d3.csv("data/testnh.csv", function(data) {
    console.log(data);
}

Thanks!

Solution 1

Use d3.text to load the data, and then d3.csvParseRows to parse it. For example:

d3.text("data/testnh.csv", function(text) {
  console.log(d3.csvParseRows(text));
});

You'll probably also want to convert your columns to numbers, because they'll be strings by default. Assume they are all numbers, you could say:

d3.text("data/testnh.csv", function(text) {
  var data = d3.csvParseRows(text).map(function(row) {
    return row.map(function(value) {
      return +value;
    });
  });
  console.log(data);
});

Solution 2

Since Bostock's answer in 2012, d3.csv.parseRows allows for an optional accessor function, which enables his answer to be expressed more concisely:

d3.text("data/testnh.csv", function(text) {
    var data = d3.csv.parseRows(text, function(d) {
        return d.map(Number);
    });
    // Now do something with data
});

Solution 3

first read in data using d3.text, then add custom header string, then parse the result with d3.csv.parse

d3.text("data/testnh.csv", function(r){
   var result = "x, y, z\n" + r;  //now you have the header
   var data = d3.csv.parse(result);
   //do your plotting with data
}

Solution 4

Try d3.csvParse(text)

d3.csv.parseRows seems doesn't work in modern d3 version.

View more solutions

Comments

[Omar Wagih]

Hmm this works, however, I need the callback which is called after all rows are parsed. I am trying to achieve a heatmap see: jsfiddle.net/QWLkR/2 with an input file that has no header

[mbostock]

Unlike d3.csv, d3.csv.parse and d3.csv.parseRows are synchronous, so there's no callback required. The return value (data above) is ready for use immediately after you call d3.csv.parseRows. The only asynchronous part is loading the file via d3.text.

[pebox11]

What if not all the parsed columns are of the same kind and you don't want to convert all to numbers but say only second and forth column should be numbers?

[JGS]

the above function will be in the script tag of the html file. But how to call this function in the body of the html file.?

[thadk]

For D3v4+, use d3.csvParse(result) instead of d3.csv.parse() from d3-dsv package

[6infinity8]

For newer versions of d3, replace csvParseRows by csv.parseRows.