LucaBrassi/index.html

## index.html
<!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="http://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>

## student_debt_college.csv

          
            year
            debt

            
              2004
              11767

            
              2005
              12098

            
              2006
              12239

            
              2007
              12497

            
              2008
              12480

            
              2009
              12411

            
              2010
              12411

            
              2011
              12197

            
              2012
              12747

            
              2013
              13083

## student_debt_private.csv

          
            year
            debt

            
              2004
              8720

            
              2005
              8671

            
              2006
              8650

            
              2007
              9394

            
              2008
              9579

            
              2009
              9655

            
              2010
              9655

            
              2011
              11041

            
              2012
              11103

            
              2013
              11334

## student_debt_uni.csv

          
            year
            debt

            
              2004
              20875

            
              2005
              21084

            
              2006
              21235

            
              2007
              21739

            
              2008
              21883

            
              2009
              21548

            
              2010
              21178

            
              2011
              21511

            
              2012
              21885

            
              2013
              22207
	<!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="http://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>
	year	debt
	2004	11767
	2005	12098
	2006	12239
	2007	12497
	2008	12480
	2009	12411
	2010	12411
	2011	12197
	2012	12747
	2013	13083