Arc Diagram

Readme

<!DOCTYPE html>
<meta charset="UTF-8">
<svg width="960" height="500"></svg>
<style>
.node {    
	fill: #EBD8C1;
	stroke: #9A8B7A; 
	stroke-width: 1px;
}
circle.active {
	fill: #FE9922;
}
path.arc {
	stroke: black;
	fill: none;
}
path.active {
	stroke: #FE9922;
}
</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 arc(){
  var promiseWrapper = (d) => new Promise(resolve => d3.csv(d, (p) => resolve(p)))
	
	var promiseWrapper = function(d){
		return new Promise(function(resolve,reject){
			d3.csv(d, function(b){
				return resolve(b)
			})
		})
	}
	Promise.all([promiseWrapper("nodelist.csv"),promiseWrapper("edgelist.csv")]).then(function(resolve){ 
		createArcDiagram(resolve[0],resolve[1])})	
	
	function createArcDiagram(nodes,edges){
	
  var nodeHash = {};
		nodes.forEach((node,i) => {
			nodeHash[node.id] = node;
			node.x = i * 30
		})
	
		edges.forEach(edge => {
			edge.weight = parseInt(edge.weight) // Normal weight
			edge.source = nodeHash[edge.source] // Gets entire "node" data from nodehash of source.
			edge.target = nodeHash[edge.target] // Gets entire "node" data from nodeHash of target.
		})
		
		var arcG = d3.select("svg").append("g").attr("id","arcG")
			.attr("transform","translate(50,250)")
		
		arcG.selectAll("path")
			.data(edges)
			.enter()
			.append("path") // Create a path for each edge 
			.attr("class","arc")
			.style("stroke-width", d => d.weight * 2)
			.style("opacity",.25)
			.attr("d", arc)
		
		function arc(d,i) {
			var draw = d3.line().curve(d3.curveBasis)
			var midX = ((d.source.x + d.target.x) /2 ) // Midway point between two x positions
			var midY = (d.source.x - d.target.x) // Distance from 0, ends up being the height of the arc
			return draw([[d.source.x,0],[midX,midY],[d.target.x,0]])

}

arcG.selectAll("circle")
			.data(nodes)
			.enter()
			.append("circle")
			.attr("cx", (d,i) => d.x)
			.attr("r", 10)
			.attr("class","node")
		
		d3.selectAll("circle").on("mouseover", nodeOver)
		d3.selectAll("path").on("mouseover", edgeOver)
		
		function nodeOver(d){
			d3.selectAll("circle").classed("active", p => p === d) // This function is a useful way to add a class to style an object
			d3.selectAll("path").classed("active", p => p.source === d || p.target === d)
		}
		
		function edgeOver(){
			
		}
		
		
	}
}

arc();
</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v0.4.min.js