25
votes

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.

4

4 Answers

33
votes

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()

16
votes

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.

14
votes

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);
    }
});
1
votes

To answer your part 3,

  1. 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.