Simple Arc Diagram Layout

An example of a simple arc diagram layout I wrote for an upcoming workshop on network data visualization.

<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>
</body>
  <footer>

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