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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.