Ch. 6, Fig. 6 - D3.js in Action

This is the code for Chapter 6, Figure 6 from D3.js in Action showing how to create a simple arc diagram from node and edge list formatted data.

<html>
<head>
  <title>D3 in Action Chapter 6 - Example 2</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }

</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
    queue()
    .defer(d3.csv, "nodelist.csv")
    .defer(d3.csv, "edgelist.csv")
    .await(function(error, file1, file2) { createArcDiagram(file1, file2); });
    function createArcDiagram(nodes,edges) {

arcG.selectAll("path")
      .data(edges)
      .enter()
      .append("path")
      .style("stroke", "black")
      .style("stroke-width", function(d) {return d.weight * 2})
      .style("opacity", .25)
      .style("fill", "none")
      .attr("d", arc)
      .on("mouseover", edgeOver)
      
      arcG.selectAll("circle")
      .data(nodes)
      .enter()
      .append("circle")
      .attr("r", 10)
      .style("fill", "lightgray")
      .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) * 2;
        return draw([[d.source.x,0],[midX,midY],[d.target.x,0]])
      }
      
      function shapedEdge(d,i) {
        var draw = d3.svg.line().interpolate("basis");
        var sw = linkScale(d.weight)
        var midX = (d.source.x + d.target.x) / 2;
        var midY = d.source.x - d.target.x - sw;
        var midY2 = d.source.x - d.target.x + sw;
        return draw([[d.source.x,0],[midX,midY],[d.target.x + (sw*1.5),0],[d.target.x - (sw*1.5),0],[midX,midY2],[d.source.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 ? "blue" : p == d.target ? "green" : "lightgray"})}      
    }
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://d3js.org/queue.v1.min.js