CODEWITHSUNDEEP
javascriptcsvd3.jsparallel-coordinates
CodeGeek123
CodeGeek123

Reputation: 4501

Loading Multiple CSV files in Javascript

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?

Upvotes: 3

Views: 4788

Answers (2)

Stuart Hallows
Stuart Hallows

Reputation: 8953

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

Upvotes: 2

musically_ut
musically_ut

Reputation: 34288

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 …
  }

Upvotes: 8

Related Questions