Create a gist now

Instantly share code, notes, and snippets.

@saraquigley /index.html
Last active Dec 11, 2015

Download ZIP
Draft Account Summary
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-"Type"" content="text/html; charset=utf-8"/>
<title>Table sort example in D3</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type='text/css'>
caption {
font: 300 26px "Helvetica Neue";
text-align: left;
padding: 0px 0px 20px 0px;
}
td.Date {
padding: 0px 30px 0px 0px;
text-align: right;
}
th {
font: 18px "Helvetica Neue";
font-weight: 500;
text-align: left;
}
tbody {
font: 200 18px "Helvetica Neue";
}
.Charge {
color: #FC8D62;
}
.Refund {
color: #66C2A5;
}
.Disbursement {
color: #8DA0CB;
}
.hide {
display: none;
}
.Amount {
padding: 0px 30px 0px 20px;
text-align: right;
}
td {
padding: 0.3em;
}
#header {
font: 300 26px "Helvetica Neue";
position: absolute;
top: 40px;
left: 20%;
right: 20%
}
#accountSummary {
display: block;
position: absolute;
top: 80px;
width: 60%;
left: 20%;
right: 20%;
padding: 5px 0px 5px 0px;
}
#trans {
top: 240px;
left: 20%;
right: 20%
display: block;
position: absolute;
}
footer {
top: 200px;
font: 200 16px "Helvetica Neue";
}
#curBalLabel,
#lstStmntBalLabel {
font: 200 18px "Helvetica Neue";
}
#minPymtDueLabel,
#lstStmntDateLabel {
font: 200 18px "Helvetica Neue";
left: 400px;
}
#pymtDueDateLabel,
{
font: 200 18px "Helvetica Neue";
}
#curBal,
#minPymtDue,
#pymtDueDate,
#lstStmntBal,
#lstStmntDate {
font: 500 20px "Helvetica Neue";
position: aboslute;
left: 400px;
}
</style>
</head>
<body onLoad="transform('Date')">
<div id="header" >
Student Account Summary
<table>
<thead id=acctSummaryHead></thead>
<tbody id="acctSummaryBody"></tbody>
</table>
</div>
<div id="trans">
<table>
<caption>Activity Since Your Last Statement</caption>
<thead id=transHead></thead>
<tbody id=transBody></tbody>
</table>
<footer>
<P>
<BR>
Sara Quigley January 14, 2013
<P>
</footer>
</div>
<script type="text/javascript">
var i = 0, transData = [
{"carsId": "RF0002047436","Date": "01-12-2013","Description": "Refund Transaction","Dept": "Billing & Payment Svcs","Amount": "1991.25","Type": "Refund","transStatus": "P","Term": "SP13","closedBy": "A","dueDate": "1-12-2013"},
{"carsId": "YA2000920","Date": "12-13-2012","Description": "Room & Board : February (Unit 1)","Dept": "Housing","Amount": "-1217.40","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "2-15-2013"},
{"carsId": "YA2000921","Date": "12-13-2012","Description": "Room & Board (Unit 1) March","Dept": "Housing","Amount": "-1217.40","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "A","dueDate": "3-15-2013"},
{"carsId": "YA2000922","Date": "12-13-2012","Description": "Room & Board (Unit 1) April ","Dept": "Housing","Amount": "-1217.40","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "4-15-2013"},
{"carsId": "YA2000923","Date": "12-13-2012","Description": "Room & Board (Unit 1) May","Dept": "Housing","Amount": "-1217.40","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "5-15-2013"},
{"carsId": "PELL 13 121212 003","Date": "12-13-2012","Description": "Federal Pell Grant","Dept": "FinancialAid","Amount": "783.75","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": 1,"dueDate": ""},
{"carsId": "FEOG 13 121212 003","Date": "12-13-2012","Description": "Federal SEOG Grant","Dept": "FinancialAid","Amount": "200.00","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": 1,"dueDate": ""},
{"carsId": "OR0008541333","Date": "12-12-2012","Description": "Transit : Class Pass Fee","Dept": "Registration","Amount": "-78.50","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "1-15-2013"},
{"carsId": "OR0008541334","Date": "12-12-2012","Description": "Berkeley Campus","Dept": "Registration","Amount": "-262.25","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "1-15-2013"},
{"carsId": "OR0008541335","Date": "12-12-2012","Description": "Student Services Fee","Dept": "Registration","Amount": "-486.00","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "1-15-2013"},
{"carsId": "OR0008541337","Date": "12-12-2012","Description": "Spring 2013 Tuition","Dept": "Registration","Amount": "-5610.00","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "1-15-2013"},
{"carsId": "YA2000919","Date": "12-12-2012","Description": "Room & Board (Unit 1) January","Dept": "Housing","Amount": "-1217.40","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "M","dueDate": "1-15-2013"},
{"carsId": "OR0008541336","Date": "12-12-2012","Description": "Health Insurance (Waived)","Dept": "Registration","Amount": "-891.00","Type": "Charge","transStatus": "C","Term": "SP13","closedBy": "C","dueDate": "1-15-2013"},
{"carsId": "DLU1 13 121212 002","Date": "12-12-2012","Description": "Federal Unsubsidized Direct Loan","Dept": "FinancialAid","Amount": "990.00","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": "M","dueDate": ""},
{"carsId": "DLS1 13 121212 002","Date": "12-12-2012","Description": "Federal Subsidized Direct Loan","Dept": "FinancialAid","Amount": "1733.00","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": "M","dueDate": ""},
{"carsId": "SX01 13 121211 003","Date": "12-11-2012","Description": "Berkeley Scholarship","Dept": "FinancialAid","Amount": "2181.00","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": "M","dueDate": ""},
{"carsId": "PERK 13 121211 001","Date": "12-11-2012","Description": "Federal Perkins Loan","Dept": "FinancialAid","Amount": "600.00","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": "M","dueDate": ""},
{"carsId": "CALAF 13 121211 001","Date": "12-11-2012","Description": "Cal Grant A Fee Award","Dept": "FinancialAid","Amount": "6096.00","Type": "Disbursement","transStatus": "","Term": "SP13","closedBy": "M","dueDate": ""}];
// Account Summary
var summaryData = [
{"name":"Current Balance:", "value":"0.00"},
{"name":"Last Statement Balance:", "value":"0.00"},
{"name":"Last Statement Date:", "value":"12/15/2012"},
{"name":"Minimum Amount Due:", "value":"0.00"}
];
var trSummary = d3.select("#acctSummaryBody").selectAll("tr")
.data(summaryData)
.enter()
.append("tr")
.append("td")
.text(function(d) { return d.name; });
d3.select("#acctSummaryBody").selectAll("tr").append("td").text(function(d) { return d.value; });
// Activity Since Last Statement
d3.select("#transBody").selectAll("tr").remove();
// variables/functions for formatting dates
var inFormat = d3.time.format("%m-%d-%Y");
var outFormat = d3.time.format("%a %b %d, %Y");
// Header
var th = d3.select("#transHead").selectAll("th")
.data(jsonToArray(transData[0]))
.enter().append("th")
.attr("onclick", function (d, i) { return "transform('" + d[0] + "');";})
.attr("class", function(d) { return d[0]; })
.text(function(d) { return d[0]; })
// Rows
var tr = d3.select("#transBody").selectAll("tr")
.data(transData)
.enter().append("tr")
.sort(function(a, b) { return d3.descending(inFormat.parse(a.Date), inFormat.parse(b.Date)); });
// Cells
var td = tr.selectAll("td")
.data(function(d) { return jsonToArray(d); })
.enter().append("td")
.attr("onclick", function (d, i) { return "transform('" + d[0] + "');";})
.attr("class", function(d) { return d[1]; })
.text(function(d) { return d[0] == "Date" ? outFormat(inFormat.parse(d[1])) : d[1]; });
// set class attributes
d3.selectAll("td").filter(function(d) { return d[0] == "carsId"; })
.attr("class", "hide");
d3.selectAll("th").filter(function(d) { return d[0] == "carsId"; })
.attr("class", "hide");
d3.selectAll("td").filter(function(d) { return d[0] == "transStatus"; })
.attr("class", "hide");
d3.selectAll("th").filter(function(d) { return d[0] == "transStatus"; })
.attr("class", "hide");
d3.selectAll("td").filter(function(d) { return d[0] == "Term"; })
.attr("class", "hide");
d3.selectAll("th").filter(function(d) { return d[0] == "Term"; })
.attr("class", "hide");
d3.selectAll("td").filter(function(d) { return d[0] == "closedBy"; })
.attr("class", "hide");
d3.selectAll("th").filter(function(d) { return d[0] == "closedBy"; })
.attr("class", "hide");
d3.selectAll("td").filter(function(d) { return d[0] == "dueDate"; })
.attr("class", "hide");
d3.selectAll("th").filter(function(d) { return d[0] == "dueDate"; })
.attr("class", "hide");
d3.selectAll("th").filter(function(d) { return d[0] == "Date"; })
.attr("class", "Date");
d3.selectAll("td").filter(function(d) { return d[0] == "Date"; })
.attr("class", "Date");
d3.selectAll("td").filter(function(d) { return d[0] == "Amount"; })
.attr("class", "Amount");
function jsonKeyValueToArray(k, v) {return [k, v];}
function jsonToArray(json) {
var ret = new Array();
var key;
for (key in json) {
if (json.hasOwnProperty(key)) {
ret.push(jsonKeyValueToArray(key, json[key]));
}
}
return ret;
};
</script>
</body>
</html>
Raw
students.json
{
"students": [
{
"name": "Student1",
"url": "http://bl.ocks.org/d/4543131/"
},
{
"name": "Student2",
"url": "http://bl.ocks.org/d/4616393/"
},
{
"name": "Student3",
"url": "http://bl.ocks.org/d/4718016/"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment