Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/edgelist.csv

Last active March 18, 2016 03:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/391e2cf83a0708c19f8c to your computer and use it in GitHub Desktop.
Save emeeks/391e2cf83a0708c19f8c to your computer and use it in GitHub Desktop.
Download ZIP
Ch. 6, Fig. 4 - D3.js in Action
Raw
readme.md

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.

Raw
edgelist.csv
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
Raw
index.html
<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>
Raw
nodelist.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment