Skip to content

Instantly share code, notes, and snippets.

@saraquigley

saraquigley/Charges-Awards.csv

Last active December 7, 2016 21:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saraquigley/4718016 to your computer and use it in GitHub Desktop.
Save saraquigley/4718016 to your computer and use it in GitHub Desktop.
Download ZIP
Charges - Awards Chord Diagram
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!

Raw
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
Raw
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;
}
Raw
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]
];
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment