Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/README.md

Last active October 23, 2019 21:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jalapic/38edf23c95c191fe8a0c to your computer and use it in GitHub Desktop.
Save jalapic/38edf23c95c191fe8a0c to your computer and use it in GitHub Desktop.
Download ZIP
adjacency
Raw
edgelist.txt
"source","target","weight"
"A","A",
"B","A",0
"C","A",0
"D","A",1
"E","A",0
"F","A",0
"G","A",0
"H","A",0
"I","A",0
"J","A",0
"K","A",0
"L","A",2
"A","B",100
"B","B",
"C","B",3
"D","B",1
"E","B",1
"F","B",0
"G","B",1
"H","B",0
"I","B",0
"J","B",0
"K","B",1
"L","B",1
"A","C",77
"B","C",28
"C","C",
"D","C",6
"E","C",0
"F","C",3
"G","C",1
"H","C",1
"I","C",0
"J","C",0
"K","C",0
"L","C",0
"A","D",95
"B","D",13
"C","D",8
"D","D",
"E","D",0
"F","D",1
"G","D",6
"H","D",0
"I","D",1
"J","D",0
"K","D",0
"L","D",2
"A","E",18
"B","E",22
"C","E",5
"D","E",18
"E","E",
"F","E",12
"G","E",2
"H","E",2
"I","E",0
"J","E",1
"K","E",0
"L","E",0
"A","F",35
"B","F",7
"C","F",12
"D","F",29
"E","F",16
"F","F",
"G","F",3
"H","F",1
"I","F",1
"J","F",1
"K","F",2
"L","F",0
"A","G",21
"B","G",3
"C","G",5
"D","G",18
"E","G",2
"F","G",23
"G","G",
"H","G",0
"I","G",2
"J","G",16
"K","G",0
"L","G",1
"A","H",38
"B","H",23
"C","H",1
"D","H",47
"E","H",2
"F","H",11
"G","H",2
"H","H",
"I","H",0
"J","H",2
"K","H",0
"L","H",0
"A","I",17
"B","I",12
"C","I",5
"D","I",5
"E","I",0
"F","I",9
"G","I",2
"H","I",2
"I","I",
"J","I",0
"K","I",0
"L","I",1
"A","J",40
"B","J",19
"C","J",14
"D","J",11
"E","J",14
"F","J",11
"G","J",7
"H","J",6
"I","J",7
"J","J",
"K","J",0
"L","J",1
"A","K",25
"B","K",12
"C","K",9
"D","K",4
"E","K",3
"F","K",10
"G","K",1
"H","K",4
"I","K",0
"J","K",1
"K","K",
"L","K",0
"A","L",25
"B","L",14
"C","L",3
"D","L",3
"E","L",0
"F","L",11
"G","L",2
"H","L",4
"I","L",2
"J","L",0
"K","L",2
"L","L",
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js" type="text/javascript"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body onload="adjacency()">
<div>
<div id="vizcontainer" style="float:left">
<svg style="width:400px;height:400px;border:1px lightgray solid;" />
</div>
<div id="vizcontainer1" style="float:left">
<svg style="width:400px;height:400px;border:1px lightgray solid;" />
</div>
</div>
<script>
function adjacency() {
queue()
.defer(d3.csv, "nodelist.txt")
.defer(d3.csv, "edgelist.txt")
.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);
}
}
var weightScale = d3.scale.linear()
.domain(d3.extent(function(d){ return d.weight }))
.range([0,1])
// fill matrix
d3.selectAll("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", "#ff1414")
.style("fill-opacity", function (d) {return d.weight*0.1; })
.on("mouseover", gridOver)
;
// add values
d3.selectAll("svg")
.append("g")
.attr("transform", "translate(50,50)")
.attr("id", "adjacencyG")
.selectAll("rect")
.data(matrix)
.enter()
.append("text")
.attr("x", function (d) {return (d.x * 25)+12.5})
.attr("y", function (d) {return (d.y * 25)+12.5})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black")
.attr("text-anchor","middle")
.attr("dy", ".35em")
.text(function(d){ return d.weight;})
;
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.selectAll("#adjacencyG").append("g")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "translate(-10,-10) rotate(90)");
d3.selectAll("#adjacencyG").append("g")
.call(yAxis);
// cell and it's transpose
function gridOver(d,i) {
d3.selectAll("rect")
.style("stroke-width", function (p) {return (p.x == d.y && p.y == d.x) || (p.y == d.y && p.x == d.x) ? "3.5px" : "1px"})
}
}
}
</script>
</body>
</html>
Raw
nodelist.txt
id,numericId
A,1
B,2
C,3
D,4
E,5
F,6
G,7
H,8
I,9
J,10
K,11
L,12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment