An example of a simple arc diagram layout I wrote for an upcoming workshop on network data visualization.
xxxxxxxxxx
<html>
<head>
<title>Arc Diagram Demo</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.layout.arcDiagram.js" type="text/JavaScript"></script>
</head>
<style>
svg {
height: 500px;
width: 500px;
border: 1px solid gray;
display: inline-block;
}
g.am-axis text {
font-size: 8px;
}
.domain {
fill: none;
}
.tick > line{
stroke: black;
stroke-width: 1px;
stroke-opacity: .25;
}
</style>
<body>
<div id="viz">
<svg id="arc-diagram">
</svg>
</div>
</body>
<footer>
<script>
var someColors = d3.scale.category20b();
d3.json("miserables.json", createArcDiagram);
function createArcDiagram(data) {
//create some random back links just to demo the functionality
data.links.forEach(function (link) {
if (Math.random() < .1) {
data.links.push({source: link.target, target: link.source, value: 1})
}
});
var arcDiagram = d3.layout.arcDiagram()
.size([450,250])
.nodes(data.nodes)
.links(data.links)
.nodeID(function (d) {return d.name});
//initialize the arc diagram
arcDiagram();
var arcG = d3.select("svg#arc-diagram")
.append("g").attr("id", "arcG")
.attr("transform", "translate(25,0)");
arcG.selectAll("path")
.data(data.links)
.enter()
.append("path")
.attr("class", "arc")
.style("stroke", function (d) {return someColors(d.source.group)})
.style("stroke-width", 2)
.style("opacity", .25)
.style("fill", "none")
.attr("d", arcDiagram.arc);
arcG.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("class", "node")
.attr("r", 2)
.style("fill", function (d) {return someColors(d.group)})
.attr("cx", function (d) {return d.x;})
.attr("cy", function (d) {return d.y});
}
</script>
</footer>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js