I'm building an interactive graph that as the axis' values has two header values. It would be really better if I could chose the axis values from a drop down menu or something like that. What I don't know is if it's possible to access the header values of my csv like if they were part of an array, so I can make a dropdown menu to select from. Given a .csv that has many header values, and all of them are strings, is it possible to achieve this by using d3.csv.formatRows(rows)? I tried to use this inside the callback function with this:

var header = d3.csv("MyCsvFile.csv").formatRows(0);
console.log(header);

but didn't work. I'm not even sure I'm using the correct function, or if there is a function to do so! Any help is appreciated! Thanks!

I'm building an interactive graph that as the axis' values has two header values. It would be really better if I could chose the axis values from a drop down menu or something like that. What I don't know is if it's possible to access the header values of my csv like if they were part of an array, so I can make a dropdown menu to select from. Given a .csv that has many header values, and all of them are strings, is it possible to achieve this by using d3.csv.formatRows(rows)? I tried to use this inside the callback function with this:

var header = d3.csv("MyCsvFile.csv").formatRows(0);
console.log(header);

but didn't work. I'm not even sure I'm using the correct function, or if there is a function to do so! Any help is appreciated! Thanks!

• javascript
• csv
• d3.js

1 Answer 1

The documentation mentions the format that d3.csv.parse produces -- basically you will have key-value pairs with the header names as the keys. So all you need to do to get the header names is something like this.

d3.csv("foo.csv", function(error, data) {
  var headerNames = d3.keys(data[0]);
});