Skip to content

Instantly share code, notes, and snippets.

@hepplerj

hepplerj/edgeslist.csv

Last active August 29, 2015 14:14
Show Gist options
  • Save hepplerj/e0b788366c539af9513d to your computer and use it in GitHub Desktop.
Save hepplerj/e0b788366c539af9513d to your computer and use it in GitHub Desktop.
Download ZIP
Token Arc
Raw
edgeslist.csv
source target
I F
I F
F s
I F
d I
I F
I s
d I
I F
C F
I F
I F
d I
I F
I F
I F
C I
I F
I F
d F
I F
I F
F s
d F
C I
I F
F s
I F
d F
I F
d I
I F
I F
I F
F s
C I
I F
I F
I F
I F
I F
d F
C I
I F
F s
F s
I F
I F
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Token Arcs</title>
<meta charset="utf-8" />
</head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js" type="text/javascript"></script>
<style>
.tick line {
shape-rendering: crispEdges;
stroke: #000;
}
line.minor {
stroke: #777;
stroke-dasharray: 2,2;
}
path.domain {
fill: none;
stroke: black;
}
</style>
<body onload="arcDiagram()">
<div id="vizcontainer">
<svg style="width:900px;height:500px;" />
</div>
<script>
function arcDiagram() {
queue()
.defer(d3.csv, "nodeslist.csv")
.defer(d3.csv, "edgeslist.csv")
.await(function(error, file1, file2) { createArcDiagram(file1, file2); });
function createArcDiagram(nodes,edges) {
expEdges = edges;
expNodes = nodes;
var nodeHash = {};
for (x in nodes) {
nodeHash[nodes[x].id] = nodes[x];
nodes[x].x = parseInt(x) * 50;
}
for (x in edges) {
edges[x].source = nodeHash[edges[x].source];
edges[x].target = nodeHash[edges[x].target];
}
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", "4px")
.style("opacity", .25)
.style("fill", "none")
.attr("d", arc)
.on("mouseover", edgeOver)
arcG.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 8)
.style("fill", "gray")
.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;
return draw([[d.source.x,0],[midX,midY],[d.target.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 ? "green" : p == d.target ? "green" : "lightgray"})}
}
}
</script>
</body>
</html>
Raw
nodeslist.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
id
I
F
s
d
C
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment