Charges - Awards Chord Diagram

This example shows how financial aid award disbursements and student payments have been applied to the fees and charges on a student's account. Open in a new window for a better view!

<!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>

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

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js