D3 Examples - Charges - Awards Chord Diagram

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>How were my awards applied?</title>
<link href="chargesAwards.css" rel="stylesheet" type="text/css" />
​
<h1>How did my <font color="#238443"><B>financial aid</B></font> apply to my <font color="#4292C6"><B>fees</B></font> and <font color="#deb900"><B>charges</B></font>?  </h1>
​
<aside>Mouseover <font color="#238443"><B>financial aid</B></font> to see what <font color="#4292C6"><B>fees</B></font> it paid..
<br>Or, mouseover a <font color="#deb900"><B>charge</B></font> to see what <font color="#D01C8B"><B>payments</B></font> were applied to it</B></font>.
</aside>
​
<div id="info"> </div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="chargesAwardsMatrix.js"></script>
<script>
​
var width = 840,
    height = 840,
    outerRadius = Math.min(width, height) / 3.5,
    innerRadius = outerRadius - 20;
​
var formatPercent = d3.format(",.2f");
​
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);
​
var layout = d3.layout.chord()
    .padding(.05)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);
​
var path = d3.svg.chord()
    .radius(innerRadius);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
  var info = d3.select("#info");
​
​
​
svg.append("circle")
    .attr("r", outerRadius);
​
d3.csv("Charges-Awards.csv", function(apps) {
​
    // Compute the chord layout.
    layout.matrix(matrix);
​
    // Add a group per neighborhood.
    var group = svg.selectAll(".group")
        .data(layout.groups)
      .enter().append("g")
        .attr("class", "group")
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
​
    // Add the group arc.
    var groupPath = group.append("path")
        .attr("id", function(d, i) { return "group" + i; })
        .attr("d", arc)
        .attr("class", "arc")
        .style("fill", function(d, i) { return apps[i].color; });
​
  group.append("svg:text")
      .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
            + "translate(" + (outerRadius + 6) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .style("fill", function(d, i) { return apps[i].color; })
      .text(function(d, i) { return apps[i].name; });
​
    // Add the chords.
    var chord = svg.selectAll(".chord")
        .data(layout.chords)
      .enter().append("path")
        .attr("class", "chord")
        .style("fill", function(d) { return apps[d.target.index].color; })
        .attr("d", path)
        .on("mouseover", chordMouseover)
        .on("mouseout", mouseout);
​
    // Add an elaborate mouseover title for each chord.
    chord.append("title").text(function(d) {
      return apps[d.target.index].name
          + " → " + apps[d.source.index].name
          + ": $" + formatPercent(d.target.value);
    });
       
​
    function mouseover(d, i) {
      chord.classed("fade", function(p) {
        return p.source.index != i
            && p.target.index != i;
      });
    
      chord.classed("show", function(p) {
        return p.source.index == i
            || p.target.index == i;
      }); 
      
      d3.select("#info")
        .text(this.textContent);
    }
​
    function mouseout(d, i) {
    
      d3.select("#info").text("");
    }
​
    function chordMouseover(d, i) {
​
      d3.select("#info")
        .text(this.textContent);        
    }
});
​
</script>
​
<footer>
  Sara Quigley
<br>January 30, 2013
</footer>
</html>
​
    