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?

Andy Thornton · Accepted Answer · 2013-04-02 02:30:25Z

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.

edited Apr 2, 2013 at 2:30

answered Apr 2, 2013 at 1:09

Andy Thornton

6385 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

araspion Over a year ago

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

Andy Thornton Over a year ago

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

araspion Over a year ago

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?

Andy Thornton Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

Importing data from .csv using d3.js

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related