Importing data from .csv using d3.js

Question

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?

Painkiller

Answer 1

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.

Knitting

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 – Painkiller

I edited my response, I should have paid attention. Since you're using v2, there is no error argument. – Knitting

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? – Painkiller

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. :) – Knitting

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. – Painkiller

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. – Knitting