Last active
December 11, 2015 04:09
-
-
Save saraquigley/4543131 to your computer and use it in GitHub Desktop.
Draft Account Summary
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 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> |
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
{ | |
"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