19

I am trying to import some data from a .csv using d3.js. I am having trouble doing this, and was wondering if anyone could lend a hand. My .csv file is formatted like so:

max_i,min_i,max_f,min_f
-122.1430195,-122.1430195,-122.415278,37.778643
-122.1430195,-122.1430195,-122.40815,37.785034
-122.4194155,-122.4194155,-122.4330827,37.7851673
-122.4194155,-122.4194155,-122.4330827,37.7851673
-118.4911912,-118.4911912,-118.3672828,33.9164666
-121.8374777,-121.8374777,-121.8498415,39.7241178
-115.172816,-115.172816,-115.078011,36.1586877
-82.5618186,-82.5618186,-79.2274115,37.9308282
-79.9958864,-79.9958864,-80.260396,40.1787544
-74.1243063,-74.1243063,-74.040948,40.729688
-106.609991,-106.609991,-106.015897,35.640949

I am trying to load the data using the following code:

var dataset = []
d3.csv("data.csv", function(data) {
   dataset = data.map(function(d) { return [ +d["max_i"], +d["min_i"] ]; });
});
console.log(dataset)

However, I just get an empty [] in the console. Can anyone point out my mistake?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
araspion
  • 693
  • 1
  • 9
  • 24

1 Answers1

22

Change it to:

var dataset = []
d3.csv("data.csv", function(data) {
   dataset = data.map(function(d) { return [ +d["max_i"], +d["min_i"] ]; });
   console.log(dataset)
});

You need to inspect dataset inside the callback, once your data is returned.

Andy Thornton
  • 628
  • 5
  • 11
  • Thanks -- problem is I'm now getting a new error. This is what the console is printing out. `Uncaught TypeError: Cannot call method 'map' of undefined example.html:63 (anonymous function) example.html:63 (anonymous function) d3.v2.min.js:1 r d3.v2.min.js:2 r.onreadystatechange` – araspion Apr 02 '13 at 02:22
  • I edited my response, I should have paid attention. Since you're using v2, there is no error argument. – Andy Thornton Apr 02 '13 at 02:29
  • Thanks -- I guess I'm a bit confused about the scoping here. Why is it that I need to inspect the dataset inside the callback, even though I am assigning the data to a global variable I define outside of the d3.csv() function? – araspion Apr 02 '13 at 02:40
  • 2
    Because the callback function is executed asynchronously, once the data is returned. This means that if you put console.log(dataset) outside of the callback, you are going to get the empty array that you defined because no data has been returned yet. If this answers, your question, you should mark it as such. To help other with the same issue. :) – Andy Thornton Apr 02 '13 at 02:45
  • Thanks! Huge help. I guess I was under the impression that everything happening in the callback function would happen _in parallel_ to the rest of the script, so it might return an incomplete object...but does it actually get to the end of the script and _then_ do the csv stuff? In any case, this solves the problem. – araspion Apr 02 '13 at 02:49
  • 1
    There is really no telling exactly when it will do the CSV stuff other than to say it will do it once the CSV data is returned. Try to look at it this way, the callback is a function that is passed in as an argument to another function, d3.csv(). You aren't executing this function immediately because you aren't invoking it, i.e function (data) {}(). It is invoked once the data is returned. When you pass a function in as an argument, you are basically telling the csv function, "hey, execute this function when you get the data and I will continue my script". Hopefully that helps. – Andy Thornton Apr 02 '13 at 02:57