d3 for loop retrieving data from a list of object

Question

I have a csv file which load into screen . The csv File has following attributes

DATE              MESSAGEID  Status  Source  ParentID  childID
12/21/2013 23:12  123        SEND    A              2
12/21/2013 23:12  456        RECEIVE B              3
12/21/2013 23:12  789        SEND    B              2         4

Now in console I wrote this

var csvdataset;
d3.csv("newFile.csv",function(d,i){csvdataset=i;console.log(csvdataset)});

So it gives me

[Object, Object, Object]

Now if I want to retrieve the message id or any value how do I get those from ? I know if I give

d3.csv("newFile.csv",function(d,i){csvdataset=i;console.log(csvdataset[3])});

I will get the third row but I need some Kind of loop that will execute to retrieve a particular value from an object .

I have tried below things

d3.csv("newFile.csv", function (d, i) {
    csvdataset = i;
}, csvdataset.forEach(csvdataset) {
    alert(csvdataset.SOURCE[csvdataset]);
}
});

d3.csv("newFile.csv", function (d, i) {
    csvdataset = i;
    console.log(i.SOURCESERVICE[i])
});

but nothing is working .

I have another issue . i am generating a json in tree structure as below

[{"Name":"s1","Node ID":"649","DataObject":{"nodeID":"649","nodeName":"s1","timeTaken":"00:06:30","startTime":"2013-12-10 18:06:02"},"Children":[[{"Name":"c1","Node ID":"286","DataObject":{"nodeID":"286","nodeName":"c1","timeTaken":"00:06:27","startTime":"2013-12-10 18:06:04+05:30"},"Children":[[{"Name":"c2","Node ID":"287","DataObject":{"nodeID":"287","nodeName":"c2","timeTaken":"00:00:02","startTime":"2013-12-10 18:06:06+05:30"}},{"Name":"c3","Node ID":"1080","DataObject":{"nodeID":"1080","nodeName":"c3","timeTaken":"00:06:17","startTime":"2013-12-10 18:06:12+05:30"},"Children":[[{"Name":"c4","Node ID":"b2861a2f-75a9-4f95-abcd-1dae54e713bc","DataObject":{"nodeID":"b2861a2f-75a9-4f95-abcd-1dae54e713bc","nodeName":"c4","timeTaken":"00:05:08","startTime":"2013-12-10 18:07:19+05:30"}}]]}]]}]]}]

now i am trying to create a tree in d3 . But i am unable to retrieve the children

    var tree = d3.layout.tree()
   .size([height, width])
     .children(function(d)
        {
            return (!d.Children || d.Children.length === 0) ? null : d.Children;
        });
   d3.xhr("DataMapper?function-name=Tree","application/json", function(error, flare) {
   root = JSON.parse(flare.response);
   root.x0 = height / 2;
   root.y0 = 0;
   console.log(root);
   function collapse(d) {
        if (d.Children) {
          d.Children= d.Children;
          d.Children.forEach(collapse);
          d.Children= null;
           console.log("children "+d.Children);

        }
      }
 });

if i am givingvar nodes = tree.nodes(root); i get a array of nodes in the nodes variable but if i give var links=tree.links(nodes); i am unable to get the links . Could any one explain this .I have provided the json above

Looping will cause you some pain to be honest. What are you trying to do with the data? Make it into a table? — Christopher Hackett
– Christopher Hackett, Commented Dec 23, 2013 at 9:49

Christopher Hackett · Accepted Answer · 2013-12-23 19:33:20Z

2

D3 is designed to be functional where you concentrate on the data not the loops.

var data = [];
d3.csv("newFile.csv", function(csvData){
    data = csvData;
    // Call a function now you have the data ready 
    doSomething(data);
})

function doSomething(d){
d3.select('#target')
    .selectAll('div')
    .data(d)
    .enter()
        .append('div')
        .text(function(d, i){return d.MESSAGEID + ' ' + d.Status;})
 }

For further reading check out this

var data = [];
d3.csv("newFile.csv", function(csvData){
    // Just  array of data which has been parsed from the file
    data = csvData;
    console.log({'02: data just Parsed':data});

    // Say you want to group by Status(could be d.MESSAGEID, d.Source etc)
    data = d3.nest()
        .key(function(d){return d.Status;})
        .map(csvData);
    // Now returns an object with 'RECEIVE':Array[1] & 'SEND':Array[2]
    console.log({'03: Nested by Status':data});

    // Call a function now you have the data ready 
    // doSomething(data);
})


// This returns Array[0] as d3.csv does not block 
console.log({'01: Outside callback': data});

edited Dec 23, 2013 at 19:33

answered Dec 23, 2013 at 10:30

Christopher Hackett

6,2122 gold badges33 silver badges41 bronze badges

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

3 Comments

user2509885 Over a year ago

if suppose i need to build a tree with the above data i am tried to create a

var tree = d3.layout.tree()     .sort(null)     .children(function(d)     {         return (!d.childID || d.childID.length === 0) ? null : d.childID;     });

and then tried to take the nodes = tree.nodes(csvdataset) and then the links var links = tree.links(nodes) but i am not getting the nodes and links .I am thinking as it is storing every row in the form of objects so that is causing the issue.[link](blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js ) i was following this link as a reference.

user2509885 Over a year ago

another question i had is is it possible to take the time difference between two timestamp for a each parent node.

Christopher Hackett Over a year ago

A quick JSFiddle on how to parse the dates from string using d3. Also worth checking out the documentation on time intervals in d3

Christopher Chiche · Accepted Answer · 2013-12-23 08:14:22Z

0

You can try to loop in the d3.csv function defined in the second argument.

So you can for example do the following:

d3.csv("newFile.csv",function(d) {
    d.forEach(function(entry){ alert(entry.name)});
})

edited Dec 23, 2013 at 8:14

answered Dec 23, 2013 at 8:04

Christopher Chiche

15.4k10 gold badges65 silver badges100 bronze badges

2 Comments

user2509885 Over a year ago

thanks for the reply.. but i tried it it says "Uncaught TypeError: Cannot call method 'forEach' of null " if i am using i.foreach its showing the values. Am i doing it correctly?

Christopher Chiche Over a year ago

Yeah sorry, I did a mistake, if you use 2 arguments, the 1st one is the error message, if it exists.

Collectives™ on Stack Overflow

d3 for loop retrieving data from a list of object

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related