colliand/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Grading Team Performance Insights

This page provides visualizations on grading team performance using Crowdmark at Stanford 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("sdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("sdata_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("ndata2.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("sdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("sdata_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 Stanford 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.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("wdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("sdata_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>


## 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("sdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("sdata_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 Stanford 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.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("wdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.Velocity = +d.Velocity;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("sdata_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("sdata_full.tsv", function(error, data) {
//   data.forEach(function(d) {
//     d.ReturnInterval = +d.ReturnInterval;
//     d.SentDate = +d.SentDate;
//   });


d3.tsv("sdata_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>

## sdata_full.tsv

          
            Course
            UploadedPages
            Slug
            Hours
            Assessments
            UnevaluatedPagesPerBooklet
            EvaluatedPages
            UploadDate
            SentDate
            Velocity
            ReturnInterval

            
              Math52
              410
              mid1
              7.05
              41
              1
              369
              2014-10-16
              2014-10-17
              0.872340426
              1

            
              Math51
              3376
              math51-exam1-10ea4
              30.73
              305
              2
              2766
              2014-10-17
              2014-10-20
              1.500162707
              3

            
              Math42
              1200
              fall-14-math-42-exam-1
              20.99
              75
              5
              825
              2014-10-21
              2014-10-23
              0.655073845
              2

            
              Math51
              3472
              math51-exam2
              27.54
              305
              2
              2862
              2014-11-07
              2014-11-10
              1.732026144
              3

            
              Math42
              1136
              fall-14-math-42-exam-2
              14.1
              71
              5
              781
              2014-11-07
              2014-11-13
              0.923167849
              6

            
              Math52
              545
              mid2-ce24e
              7.75
              39
              3
              428
              2014-11-14
              2014-11-17
              0.920430108
              3

            
              Math52
              532
              final
              7.07
              38
              2
              456
              2014-12-09
              2014-12-10
              1.074964639
              1

            
              Math51
              5729
              math51-final
              54.34
              299
              5
              4234
              2014-12-09
              2014-12-11
              1.298613667
              2

            
              Math42
              1562
              fall-14-math-42-final-exam
              23.97
              71
              6
              1136
              2014-12-09
              2014-12-16
              0.789876234
              7

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


<head>
<title>Fall 2014 Stanford 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.category20();

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("sdata_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("sdata_full.tsv", function(error, data) {
	// data.forEach(function(d) {
	// d.Velocity = +d.Velocity;
	// d.SentDate = +d.SentDate;
	// });


	d3.tsv("sdata_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
Math52	410	mid1	7.05	41	1	369	2014-10-16	2014-10-17	0.872340426	1
Math51	3376	math51-exam1-10ea4	30.73	305	2	2766	2014-10-17	2014-10-20	1.500162707	3
Math42	1200	fall-14-math-42-exam-1	20.99	75	5	825	2014-10-21	2014-10-23	0.655073845	2
Math51	3472	math51-exam2	27.54	305	2	2862	2014-11-07	2014-11-10	1.732026144	3
Math42	1136	fall-14-math-42-exam-2	14.1	71	5	781	2014-11-07	2014-11-13	0.923167849	6
Math52	545	mid2-ce24e	7.75	39	3	428	2014-11-14	2014-11-17	0.920430108	3
Math52	532	final	7.07	38	2	456	2014-12-09	2014-12-10	1.074964639	1
Math51	5729	math51-final	54.34	299	5	4234	2014-12-09	2014-12-11	1.298613667	2
Math42	1562	fall-14-math-42-final-exam	23.97	71	6	1136	2014-12-09	2014-12-16	0.789876234	7