Readme
Last active
June 5, 2020 11:07
-
-
Save harrisoncramer/32bbcd8c360e6d8aa0d5b7a50725fe73 to your computer and use it in GitHub Desktop.
Adjacency Matrix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
source | target | weight | |
---|---|---|---|
Jim | Irene | 5 | |
Susie | Irene | 5 | |
Jim | Susie | 5 | |
Susie | Kai | 5 | |
Shirley | Kai | 5 | |
Shelby | Kai | 5 | |
Kai | Susie | 5 | |
Kai | Shirley | 5 | |
Kai | Shelby | 5 | |
Erik | Zan | 5 | |
Tony | Zan | 5 | |
Tony | Fil | 5 | |
Tony | Ian | 5 | |
Tony | Adam | 5 | |
Fil | Tony | 4 | |
Ian | Miles | 1 | |
Adam | Tony | 3 | |
Miles | Ian | 2 | |
Miles | Ian | 3 | |
Erik | Kai | 2 | |
Erik | Nadieh | 2 | |
Jim | Nadieh | 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
id | role | salary | |
---|---|---|---|
Irene | manager | 300000 | |
Zan | manager | 380000 | |
Jim | employee | 150000 | |
Susie | employee | 90000 | |
Kai | employee | 135000 | |
Shirley | employee | 60000 | |
Erik | employee | 90000 | |
Shelby | employee | 150000 | |
Tony | employee | 72000 | |
Fil | employee | 35000 | |
Adam | employee | 85000 | |
Ian | employee | 83000 | |
Miles | employee | 99000 | |
Sarah | employee | 160000 | |
Nadieh | contractor | 240000 | |
Hajra | contractor | 280000 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment