Learn D3.js

Creating a simple adjacency diagram

You can create a heatmap that displays node adjacencies by binding a matrix to a square grid of shapes and using the value of each element to change the appearance of its corresponding shape. In this section you will learn how to create a reusable layout function that will make this work easier by previously calculating the coordinates for each node.

Consider the following data as an example (see Adjacency/1-matrix.html).

const matrix = [    [0, 6, 2, 0, 0],    [8, 0, 5, 0, 0],    [0, 1, 0, 0, 0],    [0, 1, 0, 0, 1],    [0, 0, 0, 0, 0]];const labels = ['A', 'B', 'C', 'D', 'E'];

The layout function should receive this data as input and produce an array of objects, containing the original data and additional properties. ...