Ontario College Total Operating Grants by Full Time Student Population

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

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

circle {
	fill:teal;
}

circle:hover {
	fill:black;
}

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

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

svg {
	margin-left:40px;
}

</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>College Grants vs. Full Time Student Population</title>
</head>

<body>
	<h2>Provincial Grant Funding for Ontario Colleges vs. Full Time Student Population - 2013</h2>
	<p class="subtext">Figure 1 - Total of all grants by college (in millions) compared with Full-Time Equivalent (FTE) Student Population. Sources: <a href="https://www.ontario.ca/data-search/vote-open-data?id=37296/postsecondary-education-institution-operating-grants">Ontario Open Data</a> and <a href="https://www.collegesontario.org/research/2013_environmental_scan/CO_EnvScan_12_Stu&GradProfiles_WEB.pdf">Colleges Ontario</a></p>
<script>

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

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

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

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

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

Yscale.domain([d3.max(data, function(d) {
			return +d.TotalFTEStudents;
		}),0]);

circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cy",function(d){
		return Yscale(d.TotalFTEStudents);
	})
	.attr("cx", function(d) {
		return Xscale(d.TotalPerCollege);
		})
	.attr("r", 0.5)
	//.transition().duration(2000).attr("r", 3)
	.append("title")
	.text(function(d) {
   	return d.College+"'s Total Grant Funding: $"+d.TotalPerCollege;
   });

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

svg.append("g")
   .attr("class","y axis")
   .attr("transform", "translate(" + (padding[3]) + ",0)")
   .call(Yaxis);

svg.selectAll("circle")
   .sort(function(a, b) {
   	return d3.ascending(+a.TotalPerCollege, +b.TotalPerCollege);
   })
   .transition()
   .delay(function(d, i){
   	return i*100;
   })
   .duration(1000)
   .attr("r", 5);

});

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

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

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