colliand/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Grading Team Performance Insights

This page provides visualizations on grading team performance using Crowdmark at Queen's University during Fall 2014.
Legend


The area of each bubble is proportional to the number of pages uploaded.
The velocity is based on the Fall 2014 Crowdmark timing data algorithm (see below).
Exams with multiple versions in the same class are shown here separately.
Other information including the days before returning the exam are shown in a hover tip.

This page is built by imitating this resource by Mike Bostock:
http://bl.ocks.org/mbostock/3887118
How does the timing work?

When a grader adds a score, Crowdmark records a time called the "created at" time. When a facilitator changes that score, Crowdmark  records a time called the "updated at" time. The algorithm for calculating time spent grading completely ignores "updated at" and is exclusively based on "created at" times. Suppose that a grader or facilitator creates a sequence of "created at" times t_1, t_2, t_3, .... , t_4. If |t_{n+1} - t_n| < THRESHOLD, we assume that the grader was continuously grading during the time interval [t_n, t_{n+1}]. If the time separation is bigger than THRESHOLD, we assume that the grader has stopped grading. We then calculate the length of the time intervals interpreted as continuous marking and that is the total time spent grading. The current THRESHOLD is 10 minutes. Should we change the threshold time?
Caveats: If a grader spends 11 minutes reviewing a page and then enters a score and then spends 11 minutes reviewing the next page and enters a score, the total time appearing in the algorithm will be 0 minutes spent grading. Activities like matching and reviewing scores do not presently contribute to time-spent-grading.

  
## bubbles.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var radius = d3.scale.linear()
    .range([0,225])

var color = d3.scale.category20();

// var tip = d3.tip()
//   .attr('class', 'd3-tip')
//   .offset([-10, 10])
//   .html(function(d) {
//     return "<strong>Uploaded:</strong> <span style='color:red'>" + d.UploadedPages + "</span>";
//   })

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("qdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = parseDate(d.SentDate);
    d.Velocity = +d.Velocity;
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.Velocity; })).nice();
  radius.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();

// Define x axis

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

 // Define y axis

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Velocity (pages/minute");

//Define dots of data on the grid


svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
      // .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.Velocity); })
      .style("fill", function(d) { return color(d.Course); })
      .append("svg:title")
            .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
      // .text(function(d) { return "Slug:" + d.Slug  ;})

  // svg.selectAll(".dot")
  //     .data(data)
  //   .enter().append("circle")
  //     .attr("class", "dot")
  //     .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
  //     // .attr("r", 3.5)
  //     .attr("cx", function(d) { return x(d.SentDate); })
  //     .attr("cy", function(d) { return y(d.Velocity); })
  //     .style("fill", function(d) { return color(d.Course); })
  //     .append("svg:title")
  //     .text("Blah");

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});


</script>


<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>


## daynumber.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

var x = d3.scale.linear()
    .range([0, width]);

// var parseDate = d3.time.format("%Y%m%d").parse;

// var x = d3.time.scale()
//     .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

d3.tsv("qdata2.tsv", function(error, data) {
  data.forEach(function(d) {
    d.Velocity = +d.Velocity;
    d.SentDate = +d.SentDate;
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.Velocity; })).nice();

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Velocity (pages/minute")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.Velocity); })
      .style("fill", function(d) { return color(d.Course); });

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>

## ellipse.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var radius = d3.scale.linear()
    .range([0,0.1 * height])

var w = d3.time.scale()
    .range([0,width])

var color = d3.scale.category20();

// var tip = d3.tip()
//   .attr('class', 'd3-tip')
//   .offset([-10, 10])
//   .html(function(d) {
//     return "<strong>Uploaded:</strong> <span style='color:red'>" + d.UploadedPages + "</span>";
//   })

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("qdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = parseDate(d.SentDate);
    d.WrittenDate = parseDate(d.WrittenDate);
    d.Velocity = +d.Velocity;
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  w.domain(d3.extent(data, function(d) { return d.WrittenDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.Velocity; })).nice();
  radius.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();


// Define x axis

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

 // Define y axis

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Velocity (pages/minute");

//Define dots of data on the grid

  svg.selectAll(".dot")
      .data(data)
    .enter().append("ellipse")
      .attr("class", "dot")
      .attr("rx", function(d) {return ( (Math.sqrt(1 +  (x(d.SentDate) - w(d.WrittenDate)) * (x(d.SentDate) - w(d.WrittenDate)) ) )); })
      .attr("ry", function(d) {return (radius(d.UploadedPages)*radius(d.UploadedPages) /(Math.sqrt(1000 +  (x(d.SentDate) - w(d.WrittenDate)) * (x(d.SentDate) - w(d.WrittenDate)) )) ); })
      // .attr("r", 3.5)
      .attr("cx", function(d) { return (x(d.SentDate) - 0.5 * ( x(d.SentDate) - w(d.WrittenDate))) ; })
      .attr("cy", function(d) { return y(d.Velocity); })
      .style("fill", function(d) { return color(d.Course); })


  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});


</script>


<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>


<head>
<title>Fall 2014 University of Toronto Grading Data</title>
</head>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);


var radius = d3.scale.linear()
    .range([0, 0.5 * height])

var color = d3.scale.category10();

// var tip = d3.tip()
//   .attr('class', 'd3-tip')
//   .offset([-10, 10])
//   .html(function(d) {
//     return "<strong>Uploaded:</strong> <span style='color:red'>" + d.UploadedPages + "</span>";
//   })

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("wdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = +parseDate(d.SentDate);
    d.Velocity = +d.Velocity;
    d.UploadedPages = +d.UploadedPages
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.Velocity; })).nice();
  radius.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();

// Define x axis

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

 // Define y axis

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Velocity (pages/minute");

//Define dots of data on the grid

svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
      // .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.Velocity); })
      .style("fill", function(d) { return color(d.Course); })
      .append("svg:title")
            .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
      // .text(function(d) { return "Slug:" + d.Slug  ;})


  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});


</script>


<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>


## qdata_full.tsv

          
            Course
            UploadedPages
            Slug
            Hours
            Assessments
            UnevaluatedPagesPerBooklet
            EvaluatedPages
            UploadDate
            SentDate
            Velocity
            ReturnInterval

            
              Math 121
              1604
              math_121_test01
              17.4
              401
              1
              1203
              2014-10-03
              2014-10-21
              1.152298851
              18

            
              APSC 171
              7170
              apsc-171-test-1
              79.31
              717
              2
              5736
              2014-10-21
              2014-10-25
              1.205396545
              4

            
              Math 121
              936
              math_121_test02-1f2ac
              9.08
              234
              1
              702
              2014-10-10
              2014-10-28
              1.288546256
              18

            
              Math 121
              1572
              math_121_test03
              13.32
              393
              1
              1179
              2014-10-17
              2014-11-04
              1.475225225
              18

            
              Math 121
              1576
              math_121_test04
              13.42
              394
              1
              1182
              2014-10-24
              2014-11-22
              1.467958271
              29

            
              Math 121
              908
              math_121_test05
              9.69
              227
              1
              681
              2014-10-31
              2014-11-22
              1.17131063
              23

            
              APSC 171
              7039
              apsc-171-test-2
              84.91
              706
              3
              4921
              2014-11-26
              2014-11-28
              0.965924705
              2

            
              Math 121
              1524
              math_121_test06
              9.94
              381
              1
              1143
              2014-11-07
              2014-12-02
              1.916498994
              25

## rectangles.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var radius = d3.scale.linear()
    .range([0, 0.5 * height])

var w = d3.time.scale()
    .range([0,width])

var color = d3.scale.category20();

// var tip = d3.tip()
//   .attr('class', 'd3-tip')
//   .offset([-10, 10])
//   .html(function(d) {
//     return "<strong>Uploaded:</strong> <span style='color:red'>" + d.UploadedPages + "</span>";
//   })

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("qdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = parseDate(d.SentDate);
    d.WrittenDate = parseDate(d.WrittenDate);
    d.Velocity = +d.Velocity;
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  w.domain(d3.extent(data, function(d) { return d.WrittenDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.Velocity; })).nice();
  radius.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();


// Define x axis

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

 // Define y axis

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Velocity (pages/minute");

//Define rectangles slicing the bubbles with length defined by sent minus written date

  svg.selectAll(".rect")
      .data(data)
    .enter().append("rect")
      .attr("class", "rect")
      .attr("width", function(d) {return Math.abs(x(d.SentDate) - w(d.WrittenDate) ) ; })
      .attr("height", function(d) {return 4; })
      .attr("x", function(d) { return (x(d.SentDate) - Math.abs(x(d.SentDate) - w(d.WrittenDate) )  * 0.5) ; })
      .attr("y", function(d) { return (y(d.Velocity) -2); })
      .style("fill", function(d) { return color(d.Course); })


// Define bubbles on the grid with area proportional to UploadedPages

svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
      // .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.Velocity); })
      .style("fill", function(d) { return color(d.Course); })
      .append("svg:title")
            .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
      // .text(function(d) { return "Slug:" + d.Slug  ;})


  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});


</script>


<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>


## return.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>


<head>
<title>Fall 2014 University of Toronto Grading Data</title>
</head>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var radius = d3.scale.linear()
    .range([0, 0.5 * height])

var color = d3.scale.category10();

// var tip = d3.tip()
//   .attr('class', 'd3-tip')
//   .offset([-10, 10])
//   .html(function(d) {
//     return "<strong>Uploaded:</strong> <span style='color:red'>" + d.UploadedPages + "</span>";
//   })

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("wdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = parseDate(d.SentDate);
    d.ReturnInterval = +d.ReturnInterval;
    d.UploadedPages = + d.UploadedPages
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.ReturnInterval; })).nice();
  radius.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();

// Define x axis

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

 // Define y axis


 svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Return (days)")


// //Define dots of data on the grid

// svg.selectAll(".dot")
//       .data(data)
//     .enter().append("circle")
//       .attr("class", "dot")
//       .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
//       // .attr("r", 3.5)
//       .attr("cx", function(d) { return x(d.SentDate); })
//       .attr("cy", function(d) { return y(d.ReturnInterval); })
//       .style("fill", function(d) { return color(d.Course); })
//       .append("svg:title")
//             .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
//       // .text(function(d) { return "Slug:" + d.Slug  ;})


//Define dots of data on the grid

svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
      // .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.ReturnInterval); })
      .style("fill", function(d) { return color(d.Course); })
      .append("svg:title")
            .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
      // .text(function(d) { return "Slug:" + d.Slug  ;})


  // svg.selectAll(".dot")
  //     .data(data)
  //   .enter().append("circle")
  //     .attr("class", "dot")
  //     .attr("r", 5)
  //     .attr("cx", function(d) { return x(d.SentDate); })
  //     .attr("cy", function(d) { return y(d.ReturnInterval); })
  //     .style("fill", function(d) { return color(d.Course); });


  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});


</script>


<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>


## return2.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);


var radius = d3.scale.linear()
    .range([0, 0.5 * height])

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("qdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.ReturnInterval = +d.ReturnInterval;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = parseDate(d.SentDate);
    d.ReturnInterval = +d.ReturnInterval;
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.ReturnInterval; })).nice();

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Return (pages/minute")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      // .attr("r", 3.5)
      .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.ReturnInterval); })
      .style("fill", function(d) { return color(d.Course); })
      .append("svg:title")
        .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});

// svg.selectAll(".dot")
//       .data(data)
//     .enter().append("circle")
//       .attr("class", "dot")
//       .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
//       // .attr("r", 3.5)
//       .attr("cx", function(d) { return x(d.SentDate); })
//       .attr("cy", function(d) { return y(d.ReturnInterval); })
//       .style("fill", function(d) { return color(d.Course); })
//       .append("svg:title")
//             .text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
//       // .text(function(d) { return "Slug:" + d.Slug  ;})


  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>

<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## uploaded.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>


<head>
<title>Fall 2014 University of Toronto Grading Data</title>
</head>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}


</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// var xScale = d3.time.scale()
//     .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
//         .rangeRound([0, w-padding.left-padding.right]);

// var x = d3.scale.linear()
//     .range([0, width]);

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

// d3.tsv("wdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.UploadedPages = +d.UploadedPages;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("qdata_full.tsv", function(error, data) {
  data.forEach(function(d) {
    d.SentDate = parseDate(d.SentDate);
    d.UploadedPages = +d.UploadedPages;
  });

  x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
  y.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sent Date (Day of Year)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Page Images Uploaded")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.SentDate); })
      .attr("cy", function(d) { return y(d.UploadedPages); })
      .style("fill", function(d) { return color(d.Course); });

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>


<h1> Grading Performance Visualizations </h1>
<h2>
  <a href="index.html">Grading Velocity vs. Day of Year</a><br>
  <a href="return.html">Return Inteval vs. Day of Year</a><br>
  <a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
</h2>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot {
	stroke: #000;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;


	// var xScale = d3.time.scale()
	// .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),8)])
	// .rangeRound([0, w-padding.left-padding.right]);

	// var x = d3.scale.linear()
	// .range([0, width]);

	var parseDate = d3.time.format("%Y-%m-%d").parse;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var radius = d3.scale.linear()
	.range([0,225])

	var color = d3.scale.category20();

	// var tip = d3.tip()
	// .attr('class', 'd3-tip')
	// .offset([-10, 10])
	// .html(function(d) {
	// return "<strong>Uploaded:</strong> <span style='color:red'>" + d.UploadedPages + "</span>";
	// })

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	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 + ")");

	// d3.tsv("qdata_full.tsv", function(error, data) {
	// data.forEach(function(d) {
	// d.Velocity = +d.Velocity;
	// d.SentDate = +d.SentDate;
	// });


	d3.tsv("qdata_full.tsv", function(error, data) {
	data.forEach(function(d) {
	d.SentDate = parseDate(d.SentDate);
	d.Velocity = +d.Velocity;
	});

	x.domain(d3.extent(data, function(d) { return d.SentDate; })).nice();
	y.domain(d3.extent(data, function(d) { return d.Velocity; })).nice();
	radius.domain(d3.extent(data, function(d) { return d.UploadedPages; })).nice();

	// Define x axis

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Sent Date (Day of Year)");

	// Define y axis

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Velocity (pages/minute");

	//Define dots of data on the grid


	svg.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
	// .attr("r", 3.5)
	.attr("cx", function(d) { return x(d.SentDate); })
	.attr("cy", function(d) { return y(d.Velocity); })
	.style("fill", function(d) { return color(d.Course); })
	.append("svg:title")
	.text(function(d){ return " " + d.Course + "\n " + d.Slug + "\n " + d.UploadedPages + " " + "pages" + "\n " +d.ReturnInterval + " " + "days"});
	// .text(function(d) { return "Slug:" + d.Slug ;})

	// svg.selectAll(".dot")
	// .data(data)
	// .enter().append("circle")
	// .attr("class", "dot")
	// .attr("r", function(d) {return Math.sqrt(radius(d.UploadedPages)); })
	// // .attr("r", 3.5)
	// .attr("cx", function(d) { return x(d.SentDate); })
	// .attr("cy", function(d) { return y(d.Velocity); })
	// .style("fill", function(d) { return color(d.Course); })
	// .append("svg:title")
	// .text("Blah");

	var legend = svg.selectAll(".legend")
	.data(color.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	});



	</script>


	<h1> Grading Performance Visualizations </h1>
	<h2>
	<a href="index.html">Grading Velocity vs. Day of Year</a><br>
	<a href="return.html">Return Inteval vs. Day of Year</a><br>
	<a href="uploaded.html">Uploaded Pages vs. Day of Year</a><br>
	</h2>
Course	UploadedPages	Slug	Hours	Assessments	UnevaluatedPagesPerBooklet	EvaluatedPages	UploadDate	SentDate	Velocity	ReturnInterval
Math 121	1604	math_121_test01	17.4	401	1	1203	2014-10-03	2014-10-21	1.152298851	18
APSC 171	7170	apsc-171-test-1	79.31	717	2	5736	2014-10-21	2014-10-25	1.205396545	4
Math 121	936	math_121_test02-1f2ac	9.08	234	1	702	2014-10-10	2014-10-28	1.288546256	18
Math 121	1572	math_121_test03	13.32	393	1	1179	2014-10-17	2014-11-04	1.475225225	18
Math 121	1576	math_121_test04	13.42	394	1	1182	2014-10-24	2014-11-22	1.467958271	29
Math 121	908	math_121_test05	9.69	227	1	681	2014-10-31	2014-11-22	1.17131063	23
APSC 171	7039	apsc-171-test-2	84.91	706	3	4921	2014-11-26	2014-11-28	0.965924705	2
Math 121	1524	math_121_test06	9.94	381	1	1143	2014-11-07	2014-12-02	1.916498994	25