D3 Examples - [Unlisted] Learning: Multiple Line Graphs

[Unlisted] Learning: Multiple Line Graphs
This data set that shows a summary of student behavior during mathematical problem solving within an intelligent tutoring system. The system records behavior such as time to solve each problem, number of attempts, number of hints shown, and correctness. This data set also has corresponding MCAS scores for each student (MCAS is a state-wide standardized mathematics test for students in Massachusetts). To access original data from Feng, Heffernan, and Koedinger (2009) see here.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
​
body { font: 12px georgia;}
​
path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
​
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
​
.grid .tick {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}
​
.grid path {
    stroke-width: 0;
}
​
text.shadow {
    stroke: white;
    stroke-width: 2.5px;
    opacity: 0.9;
}
​
</style>
<body>
​
<!-- load the d3.js library -->    
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script>
​
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = 800 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
​
// Parse the date / time
//var parseDate = d3.time.format("%d-%b-%y").parse;
​
// Set the ranges
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
​
// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(10);
​
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);
​
// Define the line
var valueline = d3.svg.line()
        .x(function(d) { return x(d.original_count); })
        .y(function(d) { return y(d.correct); });
​
var valueline2 = d3.svg.line()
        .x(function(d) { return x(d.original_count); })
        .y(function(d) { return y(d.MCAS); });
​
var valueline3 = d3.svg.line()
        .x(function(d) { return x(d.original_count); })
        .y(function(d) { return y(d.DA_avg_time); });
​
var valueline4 = d3.svg.line()
        .x(function(d) { return x(d.original_count); })
        .y(function(d) { return y(d.DA_avg_attempt); });
​
var valueline5 = d3.svg.line()
        .x(function(d) { return x(d.original_count); })
        .y(function(d) { return y(d.DA_avg_hint); });
    
// Adds the svg canvas
var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", 
                "translate(" + margin.left + "," + margin.top + ")");
​
//Create grid lines
function make_x_axis() {
    return d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(10)
}
​
function make_y_axis() {
    return d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(5)
}
​
// Get the data
d3.csv("DataViz_MCAS.csv", function(error, data) {
   data.forEach(function(d) {
      d.original_count = +d.original_count;
      d.correct = +d.correct;
      d.MCAS = +d.MCAS;
     d.DA_avg_time = +d.DA_avg_time;
     d.DA_avg_attempt = +d.DA_avg_attempt;
     d.DA_avg_hint = +d.DA_avg_hint
    });
​
    // Scale the range of the data;
    x.domain(d3.extent(data, function(d) { return d.original_count; }))
    y.domain([0, d3.max(data, function(d) { return Math.max(d.correct, d.MCAS,d.DA_avg_time,d.DA_avg_attempt,  d.DA_avg_hint); })]);
​
​
    // Add the valueline path.
    svg.append("path")
            .attr("class", "line")
            .style("stroke-dasharray", ("3,3"))
                    .style("stroke", "green")
            .attr("d", valueline(data));
​
    svg.append("path")
            .attr("class", "line")
            .style("stroke-dasharray", ("3,3"))
            .style("stroke", "blue")
            .attr("d", valueline2(data));
  svg.append("path")
            .attr("class", "line")
            .style("stroke-dasharray", ("3,3"))
            .style("stroke", "red")
            .attr("d", valueline3(data));
  svg.append("path")
            .attr("class", "line")
            .style("stroke-dasharray", ("3,3"))
            .style("stroke", "orange")
            .attr("d", valueline4(data));
  svg.append("path")
            .attr("class", "line")
            .style("stroke-dasharray", ("3,3"))
            .style("stroke", "gold")
            .attr("d", valueline5(data));
​
    svg.append("g")
            .attr("class", "grid")
            .attr("transform", "translate(0," + height + ")")
            .call(make_x_axis()
                    .tickSize(-height, 0, 0)
                    .tickFormat("")
            )
​
    svg.append("g")
            .attr("class", "grid")
            .call(make_y_axis()
                    .tickSize(-width, 0, 0)
                    .tickFormat("")
            )
​
    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
​
    // Add the Y Axis
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
​
    //White shadow Title
    svg.append("text")
            .attr("x", (width/2))
            .attr("y", 0 - (margin.top / 2))
            .attr("text-anchor", "middle")
            .style("font-size", "16px")
            .style("text-decoration", "underline")
            .attr("class", "shadow")
            .text("Student Learning with Number of Problems");
​
    //Title of the graph
    svg.append("text")
            .attr("x", (width/2))
            .attr("y", 0 - (margin.top / 2))
            .attr("text-anchor", "middle")
            .style("font-size", "18px")
            .style("text-decoration", "underline")
            .text("Student Learning with Number of Problems");
​
​
    //Text label for the X Axis
    svg.append("text")
            .attr("x", width/2)
            .attr("y", height + margin.bottom)
            .style("text-anchor", "middle")
            .text("Number of Problems");
​
    //Text label for the Y Axis
    svg.append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 0 - margin.left)
            .attr("x", 0 - (height/2))
            .attr("dy", "2em")
            .style("text-anchor", "middle")
            .text("Value");
​
    svg.append("text")
            .attr("transform", "translate(" + (width+3) + "," + y(data.correct) + ")")
            .attr("dy", "4em")
            .attr("text-anchor", "start")
            .style("fill", "green")
            .text("Correctness");
​
    svg.append("text")
            .attr("transform", "translate(" + (width+3) + "," + y(data.MCAS) + ")")
            .attr("dy", "10em")
            .attr("text-anchor", "start")
            .style("fill", "blue")
            .text("MCAS Score");
 svg.append("text")
            .attr("transform", "translate(" + (width+3) + "," + y(data.DA_avg_time) + ")")
            .attr("dy", "13.5em")
            .attr("text-anchor", "start")
            .style("fill", "red")
            .text("Time");
  svg.append("text")
            .attr("transform", "translate(" + (width+3) + "," + y(data.DA_avg_attempt) + ")")
            .attr("dy", "18.5em")
            .attr("text-anchor", "start")
            .style("fill", "orange")
            .text("Errors");
  svg.append("text")
            .attr("transform", "translate(" + (width+3) + "," + y(data.DA_avg_hint) + ")")
            .attr("dy", "24.5em")
            .attr("text-anchor", "start")
            .style("fill", "gold")
            .text("Hints");
​
});
​
</script>
</body>
    