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.
Each item has:
{
"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:
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 ]
];
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:
matrix
element containing the relationships;colors
element containing the colors for each class;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));