D3 tree/hierachical related data between nodes

Question

I am working on a d3 project at the moment, and I am trying to map out a hierachical tree to show people and who they are responsible for. Basically I can user A and user B and they can each be responsible for the same person.

Currently to highlight this in my JSON data that builds the visualisation I am repeating data, is there away to not repeat data and use the same data point when 2 or more people are responsible for the same person?

Here is my JSfiddle example

My Hierachical Visualisation

You will see here that, Raymond Reddington & Donald Ressler have cross over between some of their responsibilites, I am repeating the data which seems inefficient, is there a better way, here is my JSON.

[
{
    "name" : "Company Name",
    "parent" : null,
    "children": [
        {
            "name" : "Raymond Reddington",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Debe Zuma",
                    "parent" : "Raymond Reddington",
                },
                {
                    "name" : "Tom Keen",
                    "parent" : "Raymond Reddington",
                },
                {
                    "name" : "Aram Mojtabai",
                    "parent" : "Raymond Reddington",
                }
            ]
        },
        {
            "name" : "Elizabeth Keen",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Samar Navabi",
                    "parent" : "Elizabeth Keen",
                },
                {
                    "name" : "Meera Malik",
                    "parent" : "Elizabeth Keen",
                },
                {
                    "name" : "Mr. Kaplan",
                    "parent" : "Elizabeth Keen",
                },
                {
                    "name" : "Reven Wright",
                    "parent" : "Elizabeth Keen",
                }
            ]
        },
        {
            "name" : "Donald Ressler",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Matius Solomon",
                    "parent" : "Donald Ressler",
                    "size" : 3938
                },
                {
                    "name" : "Peter Kotsiopulos",
                    "parent" : "Donal Ressler",
                    "size" : 3938
                },
                {
                    "name" : "Tom Keen",
                    "parent" : "Raymond Reddington",
                    "size" : 3938
                },
                {
                    "name" : "Aram Mojtabai",
                    "parent" : "Raymond Reddington",
                    "size" : 3938
                }
            ]
        },
        {
            "name" : "Harold Cooper",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Samar Navabi",
                    "parent" : "Elizabeth Keen",
                    "size" : 3938
                },
                {
                    "name" : "Meera Malik",
                    "parent" : "Elizabeth Keen",
                    "size" : 3938
                }
            ]
        }
    ]
}

]

Answer 1

This website details a method of converting flat data to the hierarchical data required by d3 http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

They explain it well too. As the author notes it is originally based on https://stackoverflow.com/a/17849353/1544886

I have copied and pasted their website's example below:

var data = [
    { "name" : "Level 2: A", "parent":"Top Level" },
    { "name" : "Top Level", "parent":"null" },
    { "name" : "Son of A", "parent":"Level 2: A" },
    { "name" : "Daughter of A", "parent":"Level 2: A" },
    { "name" : "Level 2: B", "parent":"Top Level" }
    ];

will map to:

var treeData = [
  {
    "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"
      }
    ]
  }
];

via:

var dataMap = data.reduce(function(map, node) {
 map[node.name] = node;
 return map;
}, {});

var treeData = [];
data.forEach(function(node) {
 // add to parent
 var parent = dataMap[node.parent];
 if (parent) {
  // create child array if it doesn't exist
  (parent.children || (parent.children = []))
   // add node to child array
   .push(node);
 } else {
  // parent is null or missing
  treeData.push(node);
 }
});

You could extend that further replacing with Ids and using a second normalised array for the lookup:

[{
  "id": 0,
  "name": "Cherry Tree Lodge"
},{
  "id": 1,
  "name": "Tom Keen"
},{
  "id": 2,
  "name": "Debe Zuma"
}]

Also please note that your json data is not strictly valid, you have extra commas.