Description

This visualization builds a dependency graph based on dependencies between nodes (here, using an application ecosystem as example dataset).

This POC is based on a demo by Harry Love.

Note that the visualization "Application dependencies POC (Chord Diagram)" uses the same data structure, and thus provides a different view on the same data.

Data structure

Each item has:

• an id value (here using incremental numbers, but can be anything, as long as it is unique),
• a label (which is ideally not too long),
• a color code (which can be empty),
• and finally a dependency list: each other item that depends on this specific item and the strength of the link.

{
  "items" : [
    {
        "id"     : "0",
      	"label"  : "Authentication",
        "color"  : "#440154ff",
        "client" : {
          "1" : 1, "2" : 1, "3" : 1, "4" : 1
        }
    },
    {
        "id"     : "1",
        "label"  : "Lab",
        "color"  : "#31668dff",
        "client" : { "4" : 2 }
    },
    {
        "id"    : "2",
        "label" : "Sales Inventory",
        "color" : "#37b578ff",
        "client" : { "4" : 2 }
    },
    {
        "id"    : "3",
        "label" : "HR",
        "color" : "#fde725ff",
        "client" : { "1" : 1 ,  "2" : 1 , "4" : 4 }
    },
    {
        "id"    : "4",
        "label" : "Accounting",
        "color" : "#ed4044ff",
        "client" : {}
    }
  ]
}

Technical details

The data is loaded from a JSON file using D3's JSON function.

d3.json("data.json").then(function(data) {
  console.log(data);
});