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

xxxxxxxxxx
 
<!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>
    