Line Chart: Ontario Student Repayable Debt by Institution, 2004 - 2013

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

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

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

svg {
	margin-left:40px;
}

.redtext {
	color: red;
}

.bluetext {
	color: steelblue;
}

.greentext {
	color: green;
}

</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>Ontario Student Repayable Debt 2004-2013</title>
</head>

<body>
	<h2>Average Repayable Debt for Ontario Students, 2004-2013</h2>
	<p class="subtext">Figure 1 - Average repayable debt by institution type (<span class="redtext" id="red">Four-Year University</span>, <span class="bluetext" id="blue">Two-year College</span> and <span class="greentext" id="green">One-Year Private College</span>). Source: <a href="https://www.ontario.ca/data/average-osap-debt">Ontario Open Data</a></p>
<script>

var paths;
var dateformat = d3.time.format("%Y"); 
var w = 900;
var h = 500;
var padding = [20,10,30,50]; //top,right,bottom,left

var Xscale = d3.time.scale()
.range([padding[3], w - padding[1] - padding[3]]);

var Yscale = d3.scale.linear()
.range([padding[0], h - padding[2]]);

var Xaxis = d3.svg.axis()
.scale(Xscale)
.ticks(10)
.tickFormat(function(d) {
	return dateformat(d);
})
.orient("bottom");

var Yaxis = d3.svg.axis().scale(Yscale).orient("left");

var line = d3.svg.line()
.x(function(d){
	return Xscale(dateformat.parse(d.year));
})
.y(function(d){
	return Yscale(d.debt);
})

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

d3.csv("student_debt_college.csv",function(colldata) {

d3.csv("student_debt_uni.csv",function(unidata) {
		d3.csv("student_debt_private.csv",function(privdata) {

var mergedData = colldata.concat(unidata);
		var finalMerged = mergedData.concat(privdata);

Xscale.domain([
		d3.min(finalMerged, function(d) {
			return dateformat.parse(d.year);
		}),
		d3.max(finalMerged, function(d) {
			return dateformat.parse(d.year);
		})
		]);

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

svg.data([colldata])
	.append("path")
	.attr("id","bluepath")
	.attr("class", "line col")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-width", 2)
	.attr("opacity",0.3);

svg.data([unidata])
	.append("path")
	.attr("id","redpath")
	.attr("class", "line uni")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "red")
	.attr("stroke-width", 2)
	.attr("opacity",0.3);

svg.data([privdata])
	.append("path")
	.attr("id","greenpath")
	.attr("class", "line uni")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "green")
	.attr("stroke-width", 2)
	.attr("opacity",0.3);

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

});
});

});

d3.selectAll("span")
        .on("click", function() {
        	resetPaths();
        	var target = "#"+this.id+"path";
        	document.querySelector(target).style.opacity = 1;
        });

function resetPaths() {
	document.querySelector("#redpath").style.opacity = 0.3;
	document.querySelector("#bluepath").style.opacity = 0.3;
	document.querySelector("#greenpath").style.opacity = 0.3;
}

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

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

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