Importing data from multiple csv files in D3

Question

I am brand new to D3 and just started working on an a project. My question is this. I want to import data from 2 csv files in D3 to use them for graph comparisons. The problems I am facing are:

1.How do I import data from multiple csv files.
2.Can I use one array for each csv or does D3 use only one global data array?
3.Is there a way to choose a certain column from the csv files to import?

Here is an example, I want to import the "oldVer" from each of the files in separate arrays and then use the 2 arrays to work with. Is that posible in D3 and how?

csv 1
time,oldVer,newVer,oldT,newT
1,180930,190394,24,59
2,198039,159094,26,45
3,152581,194032,22,61

csv 2
time,oldVer,newVer,oldT,newT
1,184950,180435,27,26
2,120590,129409,13,13
3,165222,182133,60,54

Again sorry for the dumb question but I have found little feedback on this matter. Any help will be appreciated.

Answer 1

In d3 version 5, you can use Promise.all to load multiple csv files. Example:

Promise.all([
    d3.csv("file1.csv"),
    d3.csv("file2.csv"),
]).then(function(files) {
    // files[0] will contain file1.csv
    // files[1] will contain file2.csv
}).catch(function(err) {
    // handle error here
})

More info about loading csv in d3 v5

More info about Promise.all()

Answer 2

To answer your part 3,

3. Is there a way to choose a certain column from the csv files to import?

No, you cannot load in part of a CSV. You can, however, load in the entire CSV file and selectively use one column from it. You can refer to data.newVer to utilize the newVer column data.

Answer 3

You simply call d3.csv several times:

d3.csv("csv1.csv", function(error1, data1) {
  d3.csv("csv2.csv", function(error2, data2) {
    // do something with the data
  });
});

As for your third question, no, D3 will parse everything. There's nothing forcing you to use all the data though, so if you're interested in only one column, just use the data from that.

Answer 4

Stuart Hallows' answer is correct- d3.queue is used in d3 to load multiple files. I don't recommend nesting the loading of multiple files as in Lars Kotthoff's response- this is not best practice.

EDIT: I want to clarify the reason that nesting is not best practice. It reduces the readability/understanding ability of your code, and there are also better, more semantic ways to handle multiple asynchronous blocks of code (that is, callbacks and promises).

Better to use a callback and pass results to it after all file loading tasks are complete. Callbacks eliminate the need for nesting multiple resource requests inside each other in a pyramid of nesting.

Not a dumb question, by the way!

Answer 5

You could use a d3 queue to load the files simultaneously. An example;

d3.queue()
.defer(d3.csv, "file1.csv")
.defer(d3.csv, "file2.csv")
.await(function(error, file1, file2) {
    if (error) {
        console.error('Oh dear, something went wrong: ' + error);
    }
    else {
        doStuff(file1, file2);
    }
});