CODEWITHSUNDEEP
csvd3.jstree
user1896196
user1896196

Reputation: 31

Collapsible Tree Hierarchy d3

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.

Upvotes: 1

Views: 3176

Answers (2)

twgonzalez
twgonzalez

Reputation: 1

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.

Upvotes: 0

d3noob
d3noob

Reputation: 2151

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;

d3.js tree diagram

It may be useful to have a look over this blog post that explains both type of input and a few other implementations

Upvotes: 1

Related Questions