D3 Examples - Resize: ITS Learning Behavior

The Data Set
This data set shows a summary of student behavior during mathematical problem solving within an intelligent tutoring system (ITS). 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).
Data Sources
To access original data from Feng, Heffernan, and Koedinger (2009) see here.
Code Sources
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;
} */
​
​
svg {
    padding-top: 30px;  
    padding-left: 40px;
    padding-bottom:20px;
}
​
</style>
<body>
​
<div id="chart"></div>
​
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
    var chartDiv = document.getElementById("chart"),
        svg = d3.select(chartDiv).append("svg"),
        xAxis = svg.append("g"),
        yAxis = svg.append("g"),
        maintitle = svg.append("g"),
        xtitle = svg.append("g"),
        ytitle = svg.append("g"),
        g = svg.append("g");
​
    function redraw() {
var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;
​
      var chartDivWidth = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
          chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
​
      // set the dimensions and margins of the graph
      var margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = chartDivWidth - margin.left - margin.right,
          height = chartDivHeight - margin.top - margin.bottom;
​
      // set the ranges
      var x = d3.scaleLinear().range([0, width]),
          y = d3.scaleLinear().range([height, 0]);
​
​
// Define the line
var valueline = d3.line()
          .x(function (d) {
              return x(d.original_count);
          })
          .y(function (d) {
              return y(d.correct);
          });
      
var valueline2 = d3.line()
          .x(function (d) {
              return x(d.original_count);
          })
          .y(function (d) {
              return y(d.MCAS);
          });
var valueline3 = d3.line()
          .x(function (d) {
              return x(d.original_count);
          })
          .y(function (d) {
              return y(d.DA_avg_time);
          });
var valueline4 = d3.line()
          .x(function (d) {
              return x(d.original_count);
          })
          .y(function (d) {
              return y(d.DA_avg_attempt);
 });
var valueline5 = d3.line()
          .x(function (d) {
              return x(d.original_count);
          })
          .y(function (d) {
              return y(d.DA_avg_hint);
 });
      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) {
          if (error) throw error;
​
          // format the 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); })]);
                              
    var maintitle = g.selectAll("#maintitle").data([data]);
    var xtitle = g.selectAll("#xtitle").data([data]);
    var ytitle = g.selectAll("#ytitle").data([data]);
        
        maintitle.exit().remove();
        xtitle.exit().remove();
        ytitle.exit().remove();
        
     var pathcorrect = g.selectAll("#correct").data([data]),
                pathMCAS = g.selectAll("#MCAS").data([data]),
          pathDA_avg_time = g.selectAll("#DA_avg_time").data([data]),
           pathDA_avg_attempt = g.selectAll("#DA_avg_attempt").data([data]),
           pathDA_avg_hint = g.selectAll("#DA_avg_hint").data([data]);
                    
​
          pathcorrect.exit().remove();
          pathMCAS.exit().remove();
            pathDA_avg_time.exit().remove();
            pathDA_avg_attempt.exit().remove();
            pathDA_avg_hint.exit().remove();
​
   
        
        
//        maintitle
//        .enter()
//        .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 Behavior with More Practice")
//              .merge (maintitle);
        
//        xtitle
//        .enter()
//        .append("text")
//        .attr("x", width/2)
//            .attr("y", height + margin.bottom)
//           .style("text-anchor", "middle")
//            .text("Number of Problems")
//              .merge (xtitle);
//        ytitle
//        .enter()
//        .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")
//              .merge (ytitle);
        
          // Add the valueline path.
          pathcorrect
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
              .attr("id", "correct")
                .style("stroke-dasharray", ("3,3"))
                .style("stroke", "green")
            .merge(pathcorrect)
              .attr("d", valueline);
                        
          // Add the valueline2 path.
          pathMCAS
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
              .attr("id", "MCAS")
                .style("stroke-dasharray", ("3,3"))
              .style("stroke", "blue")
            .merge(pathMCAS)
              .attr("d", valueline2);
                
         
            pathDA_avg_time
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
              .attr("id", "DA_avg_time")
                .style("stroke-dasharray", ("3,3"))
              .style("stroke", "red")
            .merge(pathDA_avg_time)
              .attr("d", valueline3);
            
        
      pathDA_avg_attempt
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
              .attr("id", "DA_avg_attempt")
                    .style("stroke-dasharray", ("3,3"))
              .style("stroke", "orange")
            .merge(pathDA_avg_attempt)
              .attr("d", valueline4);
                     
        
  pathDA_avg_hint
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
              .attr("id", "DA_avg_hint")
                        .style("stroke-dasharray", ("3,3"))
              .style("stroke", "gold")
            .merge(pathDA_avg_hint)
              .attr("d", valueline5);
​
          // Add the X Axis
          xAxis
            .merge(xAxis)
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x));
​
          // Add the Y Axis
          yAxis
            .merge(yAxis)
              .call(d3.axisLeft(y));
        
       
​
      });
   //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 Behavior with More Practice");
​
​
    //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");
​
          }
  
​
    redraw();
    window.addEventListener("resize", redraw);
​
</script>
</body>
    