Adjacency Matrix

Readme

<!DOCTYPE html>
<meta charset="UTF-8">
<svg width="960" height="500"></svg>
<style>
.grid {
    stroke: #9A8B7A;
	stroke-width: 1px; fill: #CF7D1C;
} 
.arc {
    stroke: #9A8B7A;
	fill: none;
}
.node {    
	fill: #EBD8C1;
	stroke: #9A8B7A; 
	stroke-width: 1px;
}
circle.active {
	fill: #FE9922;
}
path.active {
	stroke: #FE9922;
}
circle.source {
	fill: #93C464;
}
circle.target {
	fill: #41A368;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<script>
function adjacency() {
    
    var promiseWrapper = (d) => new Promise(resolve => d3.csv(d, (p) => resolve(p)))
	
    Promise.all([promiseWrapper("nodelist.csv"),promiseWrapper("edgelist.csv")]).then(resolve => {
        createAdjacencyMatrix(resolve[0],resolve[1])    
     })
	console.log(Promise.all([promiseWrapper("nodelist.csv"),promiseWrapper("edgelist.csv")]))
	
    function createAdjacencyMatrix(nodes,edges){
		
		var width = 600
		var height = 600
		
		var edgeHash = {};
		edges.forEach(edge =>{
			var id = edge.source + "-" + edge.target
			edgeHash[id] = edge
		})
				
		var matrix = []
		nodes.forEach((source, a) => {
			nodes.forEach((target, b) => {
				var grid = {id: source.id + "-" + target.id, x: b, y: a, weight: 0};
				if(edgeHash[grid.id]){
					grid.weight = edgeHash[grid.id].weight;
				}
			matrix.push(grid)
			})
		})
		
		console.log(matrix)

var svg = d3.select("svg")

d3.select("svg").append("g")
		.attr("transform","translate(50,50)")
		.attr("id","adjacencyG")
		.selectAll("rect")
		.data(matrix)
		.enter()
		.append("rect")
		.attr("class","grid")
		.attr("width",35)
		.attr("height",35)
		.attr("x", d=> d.x*35)
		.attr("y", d=> d.y*35)
		.style("fill-opacity", d=> d.weight * .2)
		
	d3.select("svg")
		.append("g")
		.attr("transform","translate(50,45)")
		.selectAll("text")
		.data(nodes)
		.enter()
		.append("text")
		.attr("x", (d,i) => i * 35 + 17.5)
		.text(d => d.id)
		.style("text-anchor","middle")
		.style("font-size","10px")
		
	d3.select("svg")
		.append("g").attr("transform","translate(45,50)")
		.selectAll("text")
		.data(nodes)
		.enter()
		.append("text")
		.attr("y",(d,i) => i * 35 + 17.5)
		.text(d => d.id)
		.style("text-anchor","end")
		.style("font-size","10px")

d3.selectAll("rect.grid").on("mouseover", gridOver); 
	
	function gridOver(d) {
		d3.selectAll("rect").style("stroke-width", function(p) { return p.x == d.x || p.y == d.y ? "3px" : "1px"});
	};
		
    };
}

adjacency();
</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v0.4.min.js