j_0101 j_0101 - 11 days ago 5
Javascript Question

Copy data from csv into array in D3

I know this question has been asked before but their solutions dont see to work for me for some reason.

I am trying to populate two arrays with data from a CSV file where:

name,value
alpha,34
beta,12
delta,49
gamma,89


What I am trying now is

var field1=[];
var field2=[];

d3.csv("data.csv",function(csv){
csv.map(function(d){
field1.push(d.name);
field2.push(+d.value);
})
});

console.log("field1",field1);
console.log("field2",field2);


When I view console on my browser I see:

field1 Array [ ]
field2 Array [ ]

where:

field1:
Array[0]
0:"alpha"
1:"beta"
2:"delta"
3:"gamma"

field2:
Array[0]
0:34
1:12
2:49
3:89


However when I try to access field1[0], I get the value as undefined

field1 undefined


What I guess is happening is field1 array has an array of arrays of "name" column, but I'm not able to access the first element though field[0][0] either. What I get is:

TypeError: field1[0] is undefined


I'm very new to JavaScript and I don't seem to understand why the array is not populated correctly as a 1 dimensional array or if I'm doing something wrong. I am aware that I can iterate through each row while accessing csv per row but I want to store the csv values in array to be used globally in the script.

Links I have gone through are:



But I seem to be missing or overlooking something.. Please help!

Answer

The reason is that

d3.csv("data.csv",function(csv){

is an ajax call so you cannot write something like below (your console log is called before the ajax is completed so you get unexpected results):

var field1=[];
var field2=[];

d3.csv("data.csv",function(csv){
            //executed after successful loading of data
            csv.map(function(d){

                field1.push(d.name);
                field2.push(+d.value);
            })
        });
//called before the loading of AJAX call got completed
console.log("field1",field1);
console.log("field2",field2);

The correct way is:

var field1=[];
var field2=[];

d3.csv("data.csv",function(csv){
            csv.map(function(d){
                field1.push(d.name);
                field2.push(+d.value);
            })
            //called after the AJAX is success
            console.log("field1",field1);
            console.log("field2",field2);
            console.log("field1",field1[0]);
        });

working code here

Hope this helps!