D3 Horizontal Bar Graph: Ontario College Total Funding 2013

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;
	margin-right:2px;
    background-color: teal;
}

</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>D3 Examples - Loading CSV Data</title>
</head>

<body>
	<h3>Provincial Grant Funding for Ontario Colleges - 2013</h3>
<script>

var w = 800;
var h = 850;
var barpadding = 20;

var svg = d3.select("body")
	.append("svg")
	.attr("width",w)
	.attr("height",h);

d3.csv("grants.csv",function(data) {

data.sort(function(a,b) {
		return d3.descending(Math.floor(a.TotalPerCollege),Math.floor(b.TotalPerCollege));
	});

svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x",0)
	.attr("y", function(d, i) {
			return i*25;
		})
	.attr("width", function(d) {
			return d.TotalPerCollege*0.000005;
		})
	.attr("height", 20)
   .append("title")
   .text(function(d){
   	return d.College+"'s Total Grant Funding: "+d.TotalPerCollege;
   })

});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js