Description

This diagram is a Chord Diagram which visualizes the relationship between nodes in terms of the weight of their connections.

This POC is based on the Chord Colors demo.

Note that the visualization "Directed dependency graph" 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),
• an information text, which is shown in the tooltip,
• 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",
        "info"   : "Authenticates and autorises users.",
        "client" : {
          "1" : 1, "2" : 1, "3" : 1, "4" : 1
        }
    },
    {
        "id"     : "1",
        "label"  : "Lab",
        "color"  : "#31668dff",
        "info"   : "Data collection and statistics from lab experiments.",
        "client" : { "4" : 2 }
    },
    {
        "id"    : "2",
        "label" : "Sales Inventory",
        "color" : "#37b578ff",
        "info"  : "Product sales and statistics module.",
        "client" : { "4" : 2 }
    },
    {
        "id"    : "3",
        "label" : "HR",
        "color" : "#fde725ff",
        "info"  : "Human resources management tool.",
        "client" : { "1" : 1 ,  "2" : 1 , "4" : 4 }
    },
    {
        "id"    : "4",
        "label" : "Accounting",
        "color" : "#ed4044ff",
        "info"  : "Accounting tool, statistics and forecasting.",
        "client" : {}
    }
  ]
}

This dataset then gets transformed into a dependency matrix. In the data below the matrix contains for each label (indexed) a row and a column. The links are scaled/normalized to the largest value in the matrix. In this example there are the following relationships among others:

• No self links (0 on the diagonal);
• Lab application (index=1) is not connected to Sales Inventory (index=2), since elements e12 and e21 are both 0.
• HR application (index=3) and Accounting (index=4) share a larger link (here set to 4) for elements e34 and e43. Here the relationships are mirrored, but you can imagine other cases where there is asymmetry (e.g. exports and imports between countries).

  var matrix = [
    [    0,     1,     1,    1,    1 ],
    [    1,     0,     0,    1,    2 ],
    [    1,     0,     0,    1,    4 ],
    [    1,     1,     1,    0,    2 ],
    [    1,     2,     4,    2,    0 ]
  ];

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);
});

The data is then transformed into the following datasets:

• A matrix element containing the relationships;
• A colors element containing the colors for each class;
• A labels element containing the labels for each class.

The matrix is fed to the chord function:

 var chord = d3
    .chord()
    .sortSubgroups(d3.descending)(matrix);

Next paths and chords are created as follows:

  svg
    .datum(chord)
    .append('g')
    .selectAll('g')
    .data(function (d) { return d.groups; })
    .enter()
    .append('g')
    	.append('path');

  svg
    .datum(chord)
    .append("g")
    .attr("class", "chord")
    .selectAll("path")
    .data(function(d) { return d; })
    .enter()
    .append("path")
      .attr("d", d3.ribbon().radius(innerRadius));