Loading Multiple CSV files in Javascript

Question

I am slightly confused I need to load multiple CSV files using javascript and i need to change some properties of each of the dataset loaded. So basically I am using this framework called d3 and I want to load 3 csv files and then for each of the csv file i need to change the colour of the lines plotted for a parallel coordinates plot. Currently I'm using three data loads but this messes up my plot and i have values all over.

 // load csv file and create the chart
d3.csv('X.csv', function(data) {
pc = d3.parallelCoordinates()("parallelcoordinates")
    .data(data)
    .color(color)
    .alpha(0.4)
    .render()
    .brushable()  // enable brushing
    .interactive()  // command line mode

var explore_count = 0;
var exploring = {};
var explore_start = false;
pc.svg
    .selectAll(".dimension")
    .style("cursor", "pointer")
    .on("click", function(d) {
        exploring[d] = d in exploring ? false : true;
        event.preventDefault();
        if (exploring[d]) d3.timer(explore(d,explore_count,pc));
});

I am doing the above three times. Now what happens is that all the data is plotted on the same graph but then the values overlap (Basically its three graphs on top of each other). I want to integrate it all and I think the best way to do it is to load the JS file smartly and manipulate it somehow. I don't know how though. Would someone tell me how i would be able to achieve this?

Answer 1

This thread will be useful: https://groups.google.com/forum/#!msg/d3-js/3Y9VHkOOdCM/YnmOPopWUxQJ

The best solution (IMO) from the link is this:

  var rows1, rows2, remaining = 2;

  d3.csv("file1.csv", function(csv) {
    rows1 = csv;
    if (!--remaining) doSomething();
  });

  d3.csv("file2.csv", function(csv) {
    rows2 = csv;
    if (!--remaining) doSomething();
  });

  function doSomething() {
   // … do something with rows1 and rows2 here …
  }

Answer 2

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

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