Draft Account Summary

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="https://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="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js