d3 seems to assume I know the column names of a csv?

Question

I have csv files that are generated, and I am trying to load them into d3 to graph them. The column names are based on the data, so I essentially can't know them in advance. With testing, I am able to load this data and graph it all well and nice if I know the names of the columns...but I don't in my use case.

How can I handle this in d3? I can't seem to find anything to help/reference this online or in the documentation. I can see when I log to the console data[0] from d3.csv that there are two columns and the values read for them, but I don't know how to refer arbitrarily to column 1 or 2 of the data without knowing the name of the column ahead of time. I'd like to avoid that in general, knowing my timestamps are in column 1 and my data is in column 2, if that makes sense.

Edit, my answer uses d3.entries to help learn the name of the unknown column, and then continues to access all objects with that index:

d3.csv("export.csv", function(error, data) {
    var mappedArray = d3.entries(data[0]);
    var valueKey = mappedArray[1].key;
    data.forEach(function(d) {
        ...
        d.value = d[valueKey];
    }
}

Majordomo

Answer 1

You can use the d3.entries() function to transform an associative array into another array that contains an associative array with key and value keys for each key-value pair.

Chrissychrist

Great, thank you. I see now I am able to find the name of the column. I'm still new to d3, though, and I need to see how to refer to values in this column now in the rest of the code, similar to how the examples refer to "d.date" and "d.close", I now need to use the variable column name I found to refer to those entries. Is this possible here? I can store the name of the column but can't seem to access the data by that column name in any sensible way. Thanks for the help so far – Majordomo

It sounds like you should transform your csv array into a more suitable data structure, e.g. by mapping a function over it that, for each element (that is a row in your csv) gets the entires and extract the ones that you want. – Chrissychrist

I don't exactly follow with what I have to use in d3. Do you see what my problem is? Everything is the same as d3.csv normal calls, except I don't know the names of the columns beforehand, and so I just want to load the data in to my csv and plot a simple line graph just like before, but having learned the name of the second column to do it. I can possibly move with the d3.entries() array it gave me back, I think? But I'm not sure and don't want to waste too much time if that's now what you meant for me to try. – Majordomo

Edit, nevermind. I'm just an idiot, and didn't know I could access a JS object field with [] syntax, so I just save the name of the column and access the objects with that. I will update the post with more of my answer and accept yours as 99% of the work. Thanks – Majordomo

Answer 2

You can get keys (column names) using D3 v3 values() method like this:

const [dataValues] = d3.values(data)
const keys = Object.keys(dataValues)
console.log(keys);

Turncoat

Answer 3

I'm glad you figured it out, @cdietschrun.

Version 4 of D3 allows you to do this a little more simply. It introduces a columns property, which creates an array of column headers (i.e. the dataset's 'keys').

So, instead of using your code:

var mappedArray = d3.entries(data[0]),
    valueKey = mappedArray[1].key;

... you can use:

var valueKey = data.columns;

Valerio

Answer 4

I used d3.entries() as below:

for(i=0;i<data.length;i++)
{
    var temp = d3.entries(data[i]);
    for(j=0;j<temp.length;j++)
    if(temp[j].key == selectedx)
    myarray.push(temp[j].value);
}

Hope this helps :)

Greenbelt

selectedx is not defined. – Turncoat

It is the key that you are using. For example, my data contains many columns and I am drawing a graph based on selected X and Y values. – Greenbelt