D3 JSON data conversion

Question

I have this JSON data structure:

[
    { "dep": "d1", "name": "name1", "size": "size1" },
    { "dep": "d1", "name": "name2", "size": "size2" },
    { "dep": "d2", "name": "name1", "size": "size3" },
    { "dep": "d2", "name": "name1", "size": "size4" }
]

and I want to convert it to a nested structure like this:

{
    "name": "root",
    "children": [
        { "name": "d1",
            "children": [
                { "dep": "d1", "name": "name1", "size": "size1" },
                { "dep": "d1", "name": "name2", "size": "size2" }
            ]
        },
        { "name": "d2",
            "children": [
                { "dep": "d2", "name": "name1", "size": "size3" },
                { "dep": "d2", "name": "name2", "size": "size4" }
            ]
        }
    ]
}

... and further using it to make the Reingold–Tilford Tree . Can anyone point me to the right direction, I'm pretty new to D3!

Answer 1

The strategy is to create a new empty data structure corresponding to what you want, and then fill it by going through the whole original dataset. Here is the code:

var data = [
    { "dep": "d1", "name": "name1", "size": "size1" },
    { "dep": "d1", "name": "name2", "size": "size2" },
    { "dep": "d2", "name": "name1", "size": "size3" },
    { "dep": "d2", "name": "name2", "size": "size4" }
]

var newData = {"name": "root", "children": {}}

data.forEach(function (d) {
    if (typeof newData.children[d.dep] !== 'undefined') {
        newData.children[d.dep].children.push(d)
    } else {
        newData.children[d.dep] = {"name": d.dep, "children": [d]}
    }
})
newData.children = Object.keys(newData.children).map(function (key) {
    return newData.children[key];
});

The assignment at the end is to transform the object into an array.

Which gives the desired result for newData :

{
    "name": "root",
    "children": [
        { "name": "d1",
            "children": [
                { "dep": "d1", "name": "name1", "size": "size1" },
                { "dep": "d1", "name": "name2", "size": "size2" }
            ]
        },
        { "name": "d2",
            "children": [
                { "dep": "d2", "name": "name1", "size": "size3" },
                { "dep": "d2", "name": "name2", "size": "size4" }
            ]
        }
    ]
}

jsFiddle: http://jsfiddle.net/chrisJamesC/eB4jF/

Note: This method does not work for nested structures. It will be way harder to do this for nested structures but you can always use a recursive function.

---

EDIT: As suggested by @imarane in his answer, you can use the d3.nest() which is way better than my hand made solution. You might thus accept his answer. By playing with it, it even was really easy to have multiple levels of nest:

var data = [
    { "dep": "d1", "name": "name1", "size": "size1" },
    { "dep": "d1", "name": "name2", "size": "size2" },
    { "dep": "d2", "name": "name1"},
    { "dep": "d2"}
]

var newData = {
    "key":"root", 
    "children": 
        d3.nest()
            .key(function(d){return d.dep})
            .key(function(d){return d.name})
            .key(function(d){return d.size})
            .entries(data)
}     

Which give:

{"key":"root","children":[
    {"key":"d1","values":[
        {"key":"name2","values":[
            {"dep":"d1","name":"name2","size":"size1"},
            {"dep":"d1","name":"name2","size":"size2"}
        ]}
    ]},
    {"key":"d2","values":[
        {"key":"name1","values":[
            {"dep":"d2","name":"name1"}
        ]},
        {"key":"undefined","values":[
            {"dep":"d2"}
        ]}
    ]}
]}

Which the following data structure (I hope better to understand the whole point):

var data = [
    { "dep": "d1", "name": "name2", "size": "size1" },
    { "dep": "d1", "name": "name2", "size": "size2" },
    { "dep": "d2", "name": "name1"},
    { "dep": "d2"}
]

JsFiddle: http://jsfiddle.net/chrisJamesC/eB4jF/2/

More on Nest: http://bl.ocks.org/phoebebright/raw/3176159/

Answer 2

another option is to use the nest method built into D3....

var nested = d3.nest()
.key(function(d,i){ return d.dep; })
.entries(data);

which outputs:

 [
  {
    "key": "d1",
    "values": [
      {
        "dep": "d1",
        "name": "name1",
        "size": "size1"
      },
      {
        "dep": "d1",
        "name": "name2",
        "size": "size2"
      }
    ]
  },
  {
    "key": "d2",
    "values": [
      {
        "dep": "d2",
        "name": "name1",
        "size": "size3"
      },
      {
        "dep": "d2",
        "name": "name2",
        "size": "size4"
      }
    ]
  }
]

JsFiddle: http://jsfiddle.net/imrane/bSGrG/1/

Answer 3

Hey guys I think I found a fairly simple solution. I accomplished a very nice nesting of a large dataset (400,000 rows) for a hierarchical bar chart in a very streamline way. It utilizes the Underscore library and an additional function _.nest . Simply download and include the two libraries necessary

src="underscore-min.js"
src="underscore.nest.js"

Then use the _.nest function to create your structure. Here's my line:

var newdata = _.nest(data, ["Material", "StudyName"]);

"Material" and "StudyName" are the columns I want to group my structure to.

There are other options to use this function if you need to accomplish more things but I will leave it like this

Answer 4

Use this. U can check the output in the console of the browser if u need.

function reSortRoot(root, value_key) {
                //console.log("Calling");
                for ( var key in root) {
                    if (key == "key") {
                        root.name = root.key;
                        delete root.key;
                    }
                    if (key == "values") {
                        root.children = [];
                        for (item in root.values) {
                            root.children.push(reSortRoot(root.values[item],
                                    value_key));
                        }
                        delete root.values;
                    }
                    if (key == value_key) {
                        root.value = parseFloat("1");
                        delete root[value_key];
                    }
                }
                return root;
            } 

            var testdata=[
                          { "dep": "d1", "name": "name1", "size": "size1" },
                          { "dep": "d1", "name": "name2", "size": "size2" },
                          { "dep": "d2", "name": "name1", "size": "size3" },
                          { "dep": "d2", "name": "name1", "size": "size4" }
                      ];

            var testJson = d3.nest()
            .key(function(d)  { return d.dep; })
            .entries(testdata); 
             console.log(testJson);

            var testRoot={};
            testRoot.key = "Information";
            testRoot.values = testJson;
            testRoot = reSortRoot(testRoot, "name");

             console.log(testRoot);

Answer 5

Since d3-collection has been deprecated in favor of d3.array , we can use d3.groups to achieve what used to work with d3.nest :

var output = {
  "name": "root",
  "children": d3.groups(input, d => d.dep).map(([k, vs]) => ({ "name": k, "children": vs }))
};

For example:

 var input = [ { "dep": "d1", "name": "name1", "size": "size1" }, { "dep": "d1", "name": "name2", "size": "size2" }, { "dep": "d2", "name": "name1", "size": "size3" }, { "dep": "d2", "name": "name1", "size": "size4" } ]; var output = { "name": "root", "children": d3.groups(input, d => d.dep).map(([k, vs]) => ({ "name": k, "children": vs })) }; console.log(output); 

 <script src="https://d3js.org/d3-array.v2.min.js"></script>