Readme
xxxxxxxxxx
<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