This is the code for Chapter 6, Figure 4 from D3.js in Action showing how to create a simple adjacency matrix from node and edge list formatted data.
<html>
<head>
<title>D3 in Action Chapter 6 - Example 1</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
</head>
<style>
svg {
height: 500px;
width: 500px;
border: 1px solid gray;
}
</style>
<body>
<div id="viz">
<svg>
</svg>
</div>
<div id="controls" />
</body>
<footer>
<script>
queue()
.defer(d3.csv, "nodelist.csv")
.defer(d3.csv, "edgelist.csv")
.await(function(error, file1, file2) { createAdjacencyMatrix(file1, file2); });
function createAdjacencyMatrix(nodes,edges) {
var edgeHash = {};
for (x in edges) {
var id = edges[x].source + "-" + edges[x].target;
edgeHash[id] = edges[x];
}
matrix = [];
//create all possible edges
for (a in nodes) {
for (b in nodes) {
var grid = {id: nodes[a].id + "-" + nodes[b].id, x: b, y: a, weight: 0};
if (edgeHash[grid.id]) {
grid.weight = edgeHash[grid.id].weight;
}
matrix.push(grid);
}
}
d3.select("svg")
.append("g")
.attr("transform", "translate(50,50)")
.attr("id", "adjacencyG")
.selectAll("rect")
.data(matrix)
.enter()
.append("rect")
.attr("width", 25)
.attr("height", 25)
.attr("x", function (d) {return d.x * 25})
.attr("y", function (d) {return d.y * 25})
.style("stroke", "black")
.style("stroke-width", "1px")
.style("fill", "red")
.style("fill-opacity", function (d) {return d.weight * .2})
.on("mouseover", gridOver)
var scaleSize = nodes.length * 25;
var nameScale = d3.scale.ordinal().domain(nodes.map(function (el) {return el.id})).rangePoints([0,scaleSize],1);
xAxis = d3.svg.axis().scale(nameScale).orient("top").tickSize(4);
yAxis = d3.svg.axis().scale(nameScale).orient("left").tickSize(4);
d3.select("#adjacencyG").append("g").call(xAxis).selectAll("text").style("text-anchor", "end").attr("transform", "translate(-10,-10) rotate(90)");
d3.select("#adjacencyG").append("g").call(yAxis);
function gridOver(d,i) {
d3.selectAll("rect").style("stroke-width", function (p) {return p.x == d.x || p.y == d.y ? "3px" : "1px"})
}
}
</script>
</footer>
</html>
source,target,weight
sam,pris,1
roy,pris,5
roy,sam,1
tully,pris,5
tully,kim,3
tully,pat,1
tully,mo,3
kim,pat,2
kim,mo,1
mo,tully,7
mo,pat,1
mo,pris,1
pat,tully,1
pat,kim,2
pat,mo,5
lee,al,3
id,followers,following
sam,17,500
roy,83,80
pris,904,15
tully,7,5
kim,11,50
mo,80,85
pat,150,300
lee,38,7
al,12,12