D3 Examples - [Unlisted] Learning: Multiple Line Graphs Resize

[Unlisted] Learning: Multiple Line Graphs Resize
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 Goldstein, Baker & Heffernan (2011) see here.
A few notes about how the data were manipulated:
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <meta charset="utf-8">
        <style> 
    
    /* Make the chart container fill the page using CSS. 
      #chart {
     //  position: fixed;
     //   left: 0px;
     //   right: 0px;
     //   top: 0px;
     //   bottom: 0px;
     // }*/
    
    /* 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;
}
​
​
</style>
<body>
​
    <div id="chart"></div>
​
​
<!-- load the d3.js library -->    
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
  
  var chartDiv = document.getElementById("chart"),
        svg = d3.select(chartDiv).append("svg"),
        xAxis = svg.append("g"),
        yAxis = svg.append("g"),
        g = svg.append("g");
​
​
      function redraw(){
​
// Extract the width and height that was computed by CSS.
        var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;
​
​
        // Use the extracted size to set the size of an SVG element.
        //svg
        //  .attr("width", width)
        //  .attr("height", height);
​
        var chartDivWidth = isNaN(window.innerWidth) ?window.clientWidth : window.innerWidth,
          chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
        
// 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;
​
// 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 lines
var valueline = d3.svg.line()
        .x(function(d) { return x(d.count); })
        .y(function(d) { return y(d.correct); });
​
var valueline2 = d3.svg.line()
        .x(function(d) { return x(d.count); })
        .y(function(d) { return y(d.MCAS); });
​
var valueline3 = d3.svg.line()
        .x(function(d) { return x(d.count); })
        .y(function(d) { return y(d.time); });
​
var valueline4 = d3.svg.line()
        .x(function(d) { return x(d.count); })
        .y(function(d) { return y(d.attempt); });
​
var valueline5 = d3.svg.line()
        .x(function(d) { return x(d.count); })
        .y(function(d) { return y(d.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 + ")");
​
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_short.csv", function(error, data) {
   data.forEach(function(d) {
      d.count = +d.count;
      d.correct = +d.correct;
      d.MCAS = +d.MCAS;
     d.time = +d.time;
     d.attempt = +d.attempt;
     d.hint = +d.hint
    });
​
    // Scale the range of the data;
    x.domain(d3.extent(data, function(d) { return d.count; }))
    y.domain([0, d3.max(data, function(d) { return Math.max(d.correct, d.MCAS,d.time,d.attempt, d.hint); })]);
​
var pathcorrect = g.selectAll("#correct").data([data]),
    pathMCAS = g.selectAll("#MCAS").data([data]);
    pathtime = g.selectAll("#time").data([data]);
    pathattempt = g.selectAll("#attempt").data([data]);
    pathhint = g.selectAll("#hint").data([data]);
​
          pathcorrect.exit().remove();
          pathMCAS.exit().remove();
                pathtime.exit().remove();
                pathattempt.exit().remove();
                pathhint.exit().remove();
  
    // Add the valueline path.
  pathcorrect
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
                        .style("stroke-dasharray", ("3,3"))
                .style("stroke", "blue")
              .attr("id", "correct")
           // .merge(pathcorrect)
              .attr("d", valueline);
  pathMCAS
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
                        .style("stroke-dasharray", ("3,3"))
                .style("stroke", "green")
              .attr("id", "MCAS")
            //  .merge(pathMCAS)
              .attr("d", valueline2);
  pathtime
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
                        .style("stroke-dasharray", ("3,3"))
                .style("stroke", "red")
              .attr("id", "DA_avg_time")
            //  .merge(pathDA_avg_time)
              .attr("d", valueline3);
  pathattempt
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
                        .style("stroke-dasharray", ("3,3"))
                .style("stroke", "orange")
              .attr("id", "DA_avg_attempt")
            //  .merge(pathDA_avg_attempt)
              .attr("d", valueline4);
  pathhint
            .enter()
              .append("path")
              .data([data])
              .attr("class", "line")
                        .style("stroke-dasharray", ("3,3"))
                .style("stroke", "gold")
              .attr("id", "DA_avg_hint")
            //  .merge(pathDA_avg_attempt)
              .attr("d", valueline5);
​
   // 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));
​
  //Add gridlines
    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)
            //.merge(xAxis);
    
    // Add the Y Axis
   svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
                    //.merge(yAxis);
​
    //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 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");
​
    //Line Labels
//    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");
​
});
        
        }
​
      // Draw for the first time to initialize.
      redraw();
​
      // Redraw based on the new size whenever the browser window is resized.
      window.addEventListener("resize", redraw);
​
​
        </script>
    </body>
</html>
    