d3 csv readin to objects in array

Question

I am currently trying to use the d3 framework for a university visualisation approach. For testing purpose I want to read a csv-file and parse the rows to objects inside an array.

My csv looks like:

 ID, Referred To, TimeStamp, Votes, Comment

So I want to read it with the following lines:

d3.csv("test_comments.csv", function(data) {
  commentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});

But if I want to readout the values afterwards I am just getting "undefined" I also tried the way mbostock described in this thread: csv to array in d3.js

but working with a global variable is not working either.

var commentlist;
d3.csv("test_comments.csv", function(data) {
  commentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});
console.log(commentlist);

Am I understanding something wrong? Maybe you have a solution for me.

Do you have spaces in your CSV like in the headers? Then remove those. Also I'm guessing converting "comment" to a number doesn't make sense. — Lars Kotthoff, Jul 21 '14 at 12:54
yes but just in the comment section, the Idea is a new visualisation of social network comments. So I wanted to store the comments inside of a csv, isnt that possible ? — hGen, Jul 21 '14 at 12:57
Sure, but your code is converting everything in the CSV into numbers, which doesn't make sense if you have strings in there. — Lars Kotthoff, Jul 21 '14 at 13:05
OkayI understand, which char do I have to use to convert to Strings? — hGen, Jul 21 '14 at 13:13
Okay but I still get undefined as return when trying to print commentlist — hGen, Jul 21 '14 at 13:18
Could be that your CSV isn't loaded correctly. Have you tried the `d3.csv(url, function(error, data) { ... })` version and checking `error`? — Lars Kotthoff, Jul 21 '14 at 13:20

saikiran.vsk · Answer 1 · 2014-07-21T12:54:51.737

1

var commentlist=[];
d3.csv("test_comments.csv", function(data) {
  commentlist=data;
});
console.log(commentlist);

What I know is, In the call back data object will contain array of JSON objects of csv file's all rows of data, that each row data is pushed as a JSON format into the data array. As below

[{"ID": valueFromtheRow, "Referred To": value, "TimeStamp": value, "Votes":value, "Comment":value}]

The call back function is called by passing the array of JSONs. So data object will look like

data=[{"ID": valueFromtheRow, "Referred To": value, "TimeStamp": value, "Votes":value, "Comment":value}];

Hope you understood...If not ask me.

edited Jul 21 '14 at 12:54

answered Jul 21 '14 at 12:29

saikiran.vsk

1,788
1
10
11

Thanks that is another try, but I want to access for instance console.log(commentlist[1]) I get undefined as return. – hGen Jul 21 '14 at 12:34
@hGen CSV function in d3 is asynchronous, commentlist[1] is undefined, probably the csv file is not loaded yet and data in csv file is yet to be assigned to commentlist variable. – chaitanya89 Jan 30 '15 at 09:13

score 1 · Answer 2 · answered Aug 20 '15 at 07:20

1

I think the reason you got { console.log(commentlist) } undefined is that inside d3.csv the callback function is parsed and called last by browser, and { console.log(commentlist) } is called earlier even though it appears at the bottom of your code. So the moment when { console.log(commentlist) } is called, { commentlist } is actually undefined (only declared). That being said, just try putting { console.log(commentlist) } inside the callback and it should do the job.

answered Aug 20 '15 at 07:20

Fei Wang

11
1

I had this problem, too. But outside d3.csv I need the "commentlist"-variable for other usage. Is there a possibility to run the d3.csv before another function? – TravelTrader Sep 29 '19 at 12:42

d3 csv readin to objects in array

2 Answers2