hepplerj/edgeslist.csv

## 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

## 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>

## nodeslist.csv
id
I
F
s
d
C
	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
	<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>