Data Scientist at Warwick Investment Group. Passionate about science, predictive modeling, and data visualizations.
md`
A matrix diagram of Les Misérables characters colored and ordered by their communities (determined using Louvain modularity). Darker colors indicate more interactions between characters, and light gray cells indicate no interaction.
In comparison with [node-link diagrams](https://bl.ocks.org/rpgove/1eb246918cd9d80fd84708fef0432128), which can become inscrutable hairballs with dense networks, matrix diagrams can be simpler and easier to read. However, this is highly dependent on the row and column ordering, and it is difficult to follow paths connecting nodes. Furthermore, a matrix diagram of a graph with hundreds or thousands of nodes can be difficult to fit on one screen and still be able to read the row and column labels.
`
chart = {
var margin = {
top: 70,
right: 0,
bottom: 0,
left: 70
};
var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
const color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(10));
var opacity = d3.scaleLinear()
.domain([0, 4])
.range([0.25, 1])
.clamp(true);
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1)
.align(0);
var svgDOM = d3.select(DOM.svg(800, 800))
.attr('class','matrixdiagram')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
var svg = svgDOM.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var graph = data;
var idToNode = {};
graph.nodes.forEach(function (n) {
n.degree = 0;
idToNode[n.id] = n;
});
graph.links.forEach(function (e) {
// if(idToNode[e.source]){
e.source = idToNode[e.source];
e.target = idToNode[e.target];
e.source.degree++;
e.target.degree++;
// }
});
graph.nodes.sort(function (a, b) {
return b.group - a.group;
});
x.domain(d3.range(graph.nodes.length));
opacity.domain([0, d3.max(graph.nodes, function (d) { return d.degree; })]);
var matrix = graph.nodes.map(function (outer, i) {
outer.index = i;
return graph.nodes.map(function (inner, j) {
return {i: i, j: j, val: i === j ? inner.degree : 0};
});
});
graph.links.forEach(function (l) {
matrix[l.source.index][l.target.index].val += l.value;
matrix[l.target.index][l.target.index].val += l.value;
matrix[l.source.index][l.source.index].val += l.value;
matrix[l.target.index][l.source.index].val += l.value;
});
var row = svg.selectAll('g.row')
.data(matrix)
.enter().append('g')
.attr('class', 'row')
.attr('transform', function (d, i) { return 'translate(0,' + x(i) + ')'; })
.each(makeRow);
row.append('text')
.attr('class', 'label')
.attr('x', -4)
.attr('y', x.bandwidth() / 2)
.attr('dy', '0.32em')
.text(function (d, i) { return graph.nodes[i].id; });
var column = svg.selectAll('g.column')
.data(matrix)
.enter().append('g')
.attr('class', 'column')
.attr('transform', function(d, i) { return 'translate(' + x(i) + ', 0)rotate(-90)'; })
.append('text')
.attr('class', 'label')
.attr('x', 4)
.attr('y', x.bandwidth() / 2)
.attr('dy', '0.32em')
.text(function (d, i) { return graph.nodes[i].id; });
function makeRow(rowData) {
var cell = d3.select(this).selectAll('rect')
.data(rowData)
.enter().append('rect')
// .attr('class', 'cell')
.attr('x', function (d, i) { return x(i); })
.attr('width', x.bandwidth())
.attr('height', x.bandwidth())
.style('fill-opacity', function (d) { return opacity(d.val); })
.style('fill', function (d) {
if (d.val > 0 && graph.nodes[d.i].group === graph.nodes[d.j].group) {
return color(graph.nodes[d.i].group);
} else if (d.val > 0) {
return '#555';
} else {
return null;
}
})
.on('mouseover', function (d) {
row.filter(function (_, i) { return d.i === i; })
.selectAll('text')
.style('fill', '#d62333')
.style('font-weight', 'bold');
column.filter(function (_, j) { return d.j === j; })
.style('fill', '#d62333')
.style('font-weight', 'bold');
})
.on('mouseout', function () {
row.selectAll('text')
.style('fill', null)
.style('font-weight', null);
column
.style('fill', null)
.style('font-weight', null);
});
cell.append('title')
.text(function (d) {
return graph.nodes[d.i].id;
});
}
return svgDOM.node();
}
data = (await fetch("https://cdn.rawgit.com/mbostock/4062045"
+ "/raw/5916d145c8c048a6e3086915a6be464467391c62"
+ "/miserables.json")).json()
d3 = require("https://d3js.org/d3.v5.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
