Navigation Menu

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/dbbafc21d4c4fc879568 to your computer and use it in GitHub Desktop.
Save emeeks/dbbafc21d4c4fc879568 to your computer and use it in GitHub Desktop.
Download ZIP
Ch. 6, Fig. 6 - D3.js in Action
Raw
readme.md

This is the code for Chapter 6, Figure 6 from D3.js in Action showing how to create a simple arc diagram 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 2</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>
</body>
<footer>
<script>
queue()
.defer(d3.csv, "nodelist.csv")
.defer(d3.csv, "edgelist.csv")
.await(function(error, file1, file2) { createArcDiagram(file1, file2); });
function createArcDiagram(nodes,edges) {
var nodeHash = {};
for (x in nodes) {
nodeHash[nodes[x].id] = nodes[x];
nodes[x].x = parseInt(x) * 40;
}
for (x in edges) {
edges[x].weight = parseInt(edges[x].weight);
edges[x].source = nodeHash[edges[x].source];
edges[x].target = nodeHash[edges[x].target];
}
linkScale = d3.scale.linear().domain(d3.extent(edges, function (d) {return d.weight})).range([5,10])
var arcG = d3.select("svg").append("g").attr("id", "arcG").attr("transform", "translate(50,250)");
arcG.selectAll("path")
.data(edges)
.enter()
.append("path")
.style("stroke", "black")
.style("stroke-width", function(d) {return d.weight * 2})
.style("opacity", .25)
.style("fill", "none")
.attr("d", arc)
.on("mouseover", edgeOver)
arcG.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", "lightgray")
.style("stroke", "black")
.style("stroke-width", "1px")
.attr("cx", function (d) {return d.x})
.on("mouseover", nodeOver)
function arc(d,i) {
var draw = d3.svg.line().interpolate("basis");
var midX = (d.source.x + d.target.x) / 2;
var midY = (d.source.x - d.target.x) * 2;
return draw([[d.source.x,0],[midX,midY],[d.target.x,0]])
}
function shapedEdge(d,i) {
var draw = d3.svg.line().interpolate("basis");
var sw = linkScale(d.weight)
var midX = (d.source.x + d.target.x) / 2;
var midY = d.source.x - d.target.x - sw;
var midY2 = d.source.x - d.target.x + sw;
return draw([[d.source.x,0],[midX,midY],[d.target.x + (sw*1.5),0],[d.target.x - (sw*1.5),0],[midX,midY2],[d.source.x,0]])
}
function nodeOver(d,i) {
d3.selectAll("circle").style("fill", function (p) {return p == d ? "red" : "lightgray"})
d3.selectAll("path").style("stroke", function (p) {return p.source == d || p.target == d ? "red" : "black"})
}
function edgeOver(d) {
d3.selectAll("path").style("stroke", function(p) {return p == d ? "red" : "black"})
d3.selectAll("circle").style("fill", function(p) {return p == d.source ? "blue" : p == d.target ? "green" : "lightgray"})}
}
</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