Collapsible Tree Hierarchy d3 - csv

Question

It was stated that d3 does not take any specific data fromat whether it be json or csv. But I have noticed some odd behavoirs.
In this example http://bl.ocks.org/mbostock/4339083, the input file is json so
d3.json("/d/4063550/flare.json", function(error, flare) {
root = flare;
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse); //?
update(root);
});
In this example, it is a csv file that is loaded
d3.csv("FederalBudget_2013_a.csv", function(csv) {
var data=[];
//Remove all zero values nodes
csv.forEach(function (d) {
var t=0;
for (var i=0; i < sumFields.length; i++) {
t+= Number(d[sumFields[i]]);
}
if (t > 0) {
data.push(d);
}
})
var nest = d3.nest()
.key(function(d) { return d.Level1; })
.key(function(d) { return d.Level2; })
.key(function(d) { return d.Level3; })
.entries(data);
root={};
root.values=nest;
root.x0 = h / 2;
root.y0 = 0;
var nodes = tree.nodes(root).reverse(); //?
tree.children(function (d){ return d.children;}); //?
update(root);
});
Please clarify as to why there are different approaches where I placed a quesiton mark. I tried to see in the second example the children but that returned nothing.
Thank you.

Answer 1

It's true that d3 can use a wide range of data formats, but the examples you provide are attempting to do something different because of the way that each of the data types provided are configured.
The json file in the first example is configured in a hierarchy that represents the type of data that a tree diagram can use straight away, but the csv data is 'flat' in the sense that it hasn't been formed into an arrangement of parent / child relationships in a tree form.
For instance, the following is a 'flat' data structure where a range of named nodes each has a parent.
name,parent
"Level 2: A","Top Level"
"Top Level", "null"
"Son of A","Level 2: A"
"Daughter of A","Level 2: A"
"Level 2: B","Top Level"
The following is the same data encoded with the relationships expressed in a hierarchy (as the json equivalent).
[
{
"name": "Top Level",
"parent": "null",
"children": [
{
"name": "Level 2: A",
"parent": "Top Level",
"children": [
{
"name": "Son of A",
"parent": "Level 2: A"
},
{
"name": "Daughter of A",
"parent": "Level 2: A"
}
]
},
{
"name": "Level 2: B",
"parent": "Top Level"
}
]
}
]
The graphical equivalent is as follows;
It may be useful to have a look over this blog post that explains both type of input and a few other implementations

Answer 2

To clarify in the BrightPoint example, using the d3.nest() function takes the flat CSV data and creates a hierarchy based on the .key values (in this case column names in the flat CSV data.) This is where the children are created.
Ideally your back end service can create JSON formatted data, but often times you have to manipulate the data client side to get it into a digestible format.