27

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!

Community
  • 1
  • 1
Omar Wagih
  • 8,504
  • 7
  • 59
  • 75

4 Answers4

54

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);
});
headsvk
  • 2,726
  • 1
  • 19
  • 23
mbostock
  • 51,423
  • 13
  • 175
  • 129
  • 1
    Hmm this works, however, I need the callback which is called after all rows are parsed. I am trying to achieve a heatmap see: http://jsfiddle.net/QWLkR/2/ with an input file that has no header – Omar Wagih Dec 13 '12 at 23:35
  • 7
    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. – mbostock Dec 14 '12 at 17:30
  • 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? – pebox11 Aug 13 '15 at 15:23
  • 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.? – JGS Sep 20 '16 at 09:08
  • 1
    For newer versions of d3, replace `csvParseRows` by `csv.parseRows`. – 6infinity8 Dec 13 '19 at 17:23
12

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
});
egnha
  • 1,157
  • 14
  • 22
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
}
Zhe Hu
  • 3,777
  • 4
  • 32
  • 45
1

Try d3.csvParse(text)

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

Bimal Grg
  • 7,624
  • 2
  • 24
  • 21