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!
Last active
December 7, 2016 21:46
-
-
Save saraquigley/4718016 to your computer and use it in GitHub Desktop.
Charges - Awards Chord Diagram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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] | |
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment