College Grants Chart with Scales and Axes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

.y.axis path, .y.axis line {
	opacity:0;
}

h2 {
	font-family: sans-serif;
	font-size: 24px;
}

rect {
	fill:teal;
}

rect:hover {
	fill:black;
}

.subtext {
	font-family: sans-serif;
	font-size: 14px;
	margin-left:130px;
}

a:link, a:visited {
	color:#000;
}

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

<body>
	<h2>Provincial Grant Funding for Ontario Colleges - 2013</h2>
	<p class="subtext">Figure 1 - Total of all grants by college (in millions). Source: <a href="https://www.ontario.ca/data-search/vote-open-data?id=37296/postsecondary-education-institution-operating-grants">Ontario Open Data</a></p>
<script>

var w = 900;
var h = 500;
var padding = [20,10,30,130]; //top,right,bottom,left

var Xscale = d3.scale.linear().range([0, w - padding[1] - padding[3] ]);
var Yscale = d3.scale.ordinal().rangeRoundBands([padding[0], h - padding[2]], 0.2); //.1 = 10% spacing
var Xaxis = d3.svg.axis().scale(Xscale).ticks(5).tickFormat(d3.format("$,.2f")).orient("bottom");
var Yaxis = d3.svg.axis().scale(Yscale).orient("left");

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));
	});

Xscale.domain([0, d3.max(data, function(d) {
			return +d.TotalPerCollege;

})]);

Yscale.domain(data.map(function(d){ return d.College; }));

svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x",padding[3])
	.attr("y", function(d) {
			return Yscale(d.College);
		})
	.attr("width", function(d) {
			return Xscale(d.TotalPerCollege);
		})
	.attr("height", Yscale.rangeBand())
   .append("title")
   .text(function(d) {
   	return d.College+"'s Total Grant Funding: $"+d.TotalPerCollege;
   })

svg.append("g")
   .attr("class","x axis")
   .attr("transform", "translate("+ padding[3]+ "," + (h - padding[2]) + ")")
   .call(Xaxis);
   svg.append("g")
   .attr("class","y axis")
   .attr("transform", "translate(" + (padding[3] - 5) + ",0)")
   .call(Yaxis);

});

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

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

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