Charges-Awards.csv

## README.md

      
          Raw
        
        
              README.md
            
          
    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!

  
## Charges-Awards.csv

        
        feeType
        name
        color

        
        Charges
        Room & Board : Feb
        #deb900

        
        Charges
        Room & Board : Jan
        #deb900

        
        Charges
        Laundry/Dining Debit
        #deb900

        
        Charges
        Room & Board : Dec
        #deb900

        
        Charges
        Laundry/Dining Debit
        #deb900

        
        Charges
        Laundry/Dining Debit
        #deb900

        
        Charges
        Room & Board : Nov
        #deb900

        
        Fees
        Transit : Class Pass Fee
        #08306B

        
        Fees
        Berkeley Campus Fee
        #08306B

        
        Fees
        Student Services Fee
        #08306B

        
        Fees
        Health Insurance Fee
        #08306B

        
        Fees
        Spring 2013 Tuition
        #08306B

        
        Fees
        Course Fee (Chem 3A)
        #08306B

        
        Fees
        Room & Board : Telephone
        #08306B

        
        Grants
        Federal Pell Grant
        #238443

        
        Grants
        Federal SEOG Grant
        #238443

        
        Grants
        Undergraduate Grant
        #238443

        
        Grants
        Cal Grant A Fee Award
        #238443

        
        Payments
        Payment on 01/26/13
        #D01C8B

## chargesAwards.css
body {
  position: relative;
  font-family: "Helvetica Neue";
  width: 960px;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 4em;
}

footer {
  font-size: small;
  margin-bottom: 8em;
  margin-right: 8em;
}

h1 {
  position: relative;
  font-family: "Helvetica Neue";
}

aside {
  font-size: medium;
  left: 580px;
  position: absolute;
  width: 5200px;
}

#info {
  position: absolute;
  left: 680px;
  width: 400px;
  top: 140px;
  font: 400 18px "Helvetica Neue";
  color: #525252;
}

svg {
  position: absolute;
  left: -100px;
  top: 14px;
}

body > p {
  line-height: 1.5em;
  width: 720px;
}

a {
  color: steelblue;
}

a:not(:hover) {
  text-decoration: none;
}

text {
  font: 400 14px "Helvetica Neue";

}

#circle circle {
  fill: none;
  pointer-events: all;
}

.group path {
  fill-opacity: .5;
}

path.chord {
  stroke: #000;
  stroke-width: .25px;
  fill-opacity: .85;
  }

#circle:hover path.fade {
  fill-opacity: .1;
}

#circle:hover path.show {
  fill: #000;
}

## chargesAwardsMatrix.js
var matrix = [
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,565.50,0.00,0.00,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,821.50,200.00,546.50,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,10.00,0.00,0.00,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,1378.00,0.00,0.00,0.00,190.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,10.00,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,10.00,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,1193.75,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,13.27,65.23,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,44.01,218.24,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,81.84,404.16,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,149.73,741.27,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,942.90,4667.10,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,40.00,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,40.00,0.00,0.00],
[565.50,821.50,10.00,1378.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00],
[0.00,200.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00],
[0.00,546.50,0.00,0.00,10.00,10.00,1193.75,13.27,44.01,81.84,149.73,942.90,40.00,40.00,0.00,0.00,0.00,0.00,0.00],
[0.00,0.00,0.00,0.00,0.00,0.00,0.00,65.23,218.24,404.16,741.27,4667.10,0.00,0.00,0.00,0.00,0.00,0.00,0.00],
[0.00,0.00,0.00,190.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00]
];

## index.html
<!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="http://mbostock.github.com/d3/d3.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>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png