yeehaa123 · February 25, 2014 11:59
diff --git a/student-assignments.html b/student-assignments.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Art, Science, and Technology</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fonts.googleapis.com/css?family=Abel|Codystar" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="./styles/main.css">
  </head>
 </html>
 <body>
  <section class="main">
    <section class="content">
 <style>
  .graph {
    width: 800px;
    margin-bottom: 10px;
  }
  table {
    width: 800px;
  }
  
  .axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }
  
   .axis text {
     font-family: sans-serif;
     font-size: 11px;
   }
 </style>
 <div class="graph"></div>
 <table>
  <thead>
    <tr>
      <th>first name</th>
      <th>last name</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
    </tr>
  </thead>
  <tbody></tbody>
 </table>
 <script src="./vendor/jquery/jquery.js"></script>
 <script src="./vendor/handlebars/handlebars.js"></script>
 <script src="./vendor/d3/d3.js"></script>
 <script>
  // var
  //   return Math.random()<.5;
  // }
  
  $(document).ready(function(){
    var students = [];
    
  //   d3.csv('./students.csv', function(d){
  //     students = d.map(function(student){
  //       var assignments = [];
  
  //       for (var i = 0; i < 8; i++) {
  //         assignments[i] = "";
  //       }
  
  //       return {
  //         firstName: student['First Name'],
  //         lastName: student['Last Name'],
  //         studentId: student['Student ID'],
  //         assignments: assignments
  //       };
  //     })
  
  //     var studentsJSON = JSON.stringify(students);
  //     localStorage.setItem('students', studentsJSON);
  //     draw();
  //   });
    d3.json("https://ast2014.firebaseio.com/students.json", function(d){
      students = d.filter(function(student) {
        return student;
      });
      
      students.forEach(function(student){ 
        var numberOfAssignments = 0;
        student.assignments.forEach(function(assignment){
          if (assignment) {
            numberOfAssignments += 1;
          }
          return numberOfAssignments;
        });
        console.log(student);
        student.numberOfAssignments = numberOfAssignments;
      });
      
      drawTable();
      drawGraph();
    });
    
    var rawHTML = "<td>{{firstName}}</td><td>{{lastName}}</td>{{#each assignments}}<td>{{#if this}}<a href='{{this}}'>X</a>{{else}}_{{/if}}</td>{{/each}}</td>";
    var template = Handlebars.compile(rawHTML);
    
    function drawTable() {
      d3.select('tbody')
        .selectAll('tr')
        .data(students)
        .enter()
        .append('tr')
        .html(function(d){
          return template(d);
        })
    };
    
    function drawGraph(){
    
      var margin = { top: 20, right: 20, bottom: 20, left: 40 };
      var width = 800 - margin.left - margin.right;
      var height = 550 - margin.top - margin.bottom;
      var chartHeight = 350;
      
      var svg = d3.select('.graph')
        .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 + ')');
        
      var xScale = d3.scale.ordinal()
      .domain(d3.range(students.length))
      .rangeRoundBands([0, width], 0.2);
      
      var yScale = d3.scale.linear()
      .domain([0, 8])
      .range([chartHeight, 0])
      
      var colorScale = d3.scale.linear()
        .domain([0, 8])
        .range(['yellow', 'green']);
        
      var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .ticks(5);
      
      var bars = svg.selectAll('g')
        .data(students)
        .enter()
        .append('g')
        .attr('x', function(d,i) {
          return xScale(i) + xScale.rangeBand();
        })
        .attr('width', xScale.rangeBand() + 10)
        .attr('height', chartHeight)
        .append('g')
        .attr("transform", function(d, i) {
          return "translate(" + xScale(i) + "," + 0 + ")";
        })
        
        bars.append('rect')
        .attr('x', 0)
        .attr('y', function(d) {
          return yScale(d.numberOfAssignments);
        })
        .attr('width', xScale.rangeBand()) 
        .attr('height', function(d){
          return chartHeight - yScale(d.numberOfAssignments);
        })
        .attr('fill', function(d){
          return colorScale(d.numberOfAssignments);
        });
        
      bars.append("text")
        .text(function(d) { 
          if(d.numberOfAssignments != 0) {
            return d.numberOfAssignments; 
          }
        })
        .attr("text-anchor", "middle")
        .attr("x", function(d, i) { return xScale.rangeBand() / 2; })
        .attr("y", function(d) { return yScale(d.numberOfAssignments) + 20; })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white");
        
      bars.append("text")
        .text(function(d){
          return d.firstName + " " + d.lastName;
        })
        .attr("x", function(d, i) { return xScale.rangeBand() / 2; })
        .attr("y", chartHeight + 10)
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .style("writing-mode", "tb");
        
      svg.append("g")
        .attr("class", "axis")
        .call(yAxis);
        };
    });
 </script>
    </section>
  </section>
 </body>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Art, Science, and Technology</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="http://fonts.googleapis.com/css?family=Abel\|Codystar" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="./styles/main.css">
	</head>
	</html>
	<body>
	<section class="main">
	<section class="content">
	<style>
	.graph {
	width: 800px;
	margin-bottom: 10px;
	}
	table {
	width: 800px;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	<div class="graph"></div>
	<table>
	<thead>
	<tr>
	<th>first name</th>
	<th>last name</th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	<th>4</th>
	<th>5</th>
	<th>6</th>
	<th>7</th>
	<th>8</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	<script src="./vendor/jquery/jquery.js"></script>
	<script src="./vendor/handlebars/handlebars.js"></script>
	<script src="./vendor/d3/d3.js"></script>
	<script>
	// var
	// return Math.random()<.5;
	// }

	$(document).ready(function(){
	var students = [];

	// d3.csv('./students.csv', function(d){
	// students = d.map(function(student){
	// var assignments = [];

	// for (var i = 0; i < 8; i++) {
	// assignments[i] = "";
	// }

	// return {
	// firstName: student['First Name'],
	// lastName: student['Last Name'],
	// studentId: student['Student ID'],
	// assignments: assignments
	// };
	// })

	// var studentsJSON = JSON.stringify(students);
	// localStorage.setItem('students', studentsJSON);
	// draw();
	// });
	d3.json("https://ast2014.firebaseio.com/students.json", function(d){
	students = d.filter(function(student) {
	return student;
	});

	students.forEach(function(student){
	var numberOfAssignments = 0;
	student.assignments.forEach(function(assignment){
	if (assignment) {
	numberOfAssignments += 1;
	}
	return numberOfAssignments;
	});
	console.log(student);
	student.numberOfAssignments = numberOfAssignments;
	});

	drawTable();
	drawGraph();
	});

	var rawHTML = "<td>{{firstName}}</td><td>{{lastName}}</td>{{#each assignments}}<td>{{#if this}}<a href='{{this}}'>X</a>{{else}}_{{/if}}</td>{{/each}}</td>";
	var template = Handlebars.compile(rawHTML);

	function drawTable() {
	d3.select('tbody')
	.selectAll('tr')
	.data(students)
	.enter()
	.append('tr')
	.html(function(d){
	return template(d);
	})
	};

	function drawGraph(){

	var margin = { top: 20, right: 20, bottom: 20, left: 40 };
	var width = 800 - margin.left - margin.right;
	var height = 550 - margin.top - margin.bottom;
	var chartHeight = 350;

	var svg = d3.select('.graph')
	.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 + ')');

	var xScale = d3.scale.ordinal()
	.domain(d3.range(students.length))
	.rangeRoundBands([0, width], 0.2);

	var yScale = d3.scale.linear()
	.domain([0, 8])
	.range([chartHeight, 0])

	var colorScale = d3.scale.linear()
	.domain([0, 8])
	.range(['yellow', 'green']);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	var bars = svg.selectAll('g')
	.data(students)
	.enter()
	.append('g')
	.attr('x', function(d,i) {
	return xScale(i) + xScale.rangeBand();
	})
	.attr('width', xScale.rangeBand() + 10)
	.attr('height', chartHeight)
	.append('g')
	.attr("transform", function(d, i) {
	return "translate(" + xScale(i) + "," + 0 + ")";
	})

	bars.append('rect')
	.attr('x', 0)
	.attr('y', function(d) {
	return yScale(d.numberOfAssignments);
	})
	.attr('width', xScale.rangeBand())
	.attr('height', function(d){
	return chartHeight - yScale(d.numberOfAssignments);
	})
	.attr('fill', function(d){
	return colorScale(d.numberOfAssignments);
	});

	bars.append("text")
	.text(function(d) {
	if(d.numberOfAssignments != 0) {
	return d.numberOfAssignments;
	}
	})
	.attr("text-anchor", "middle")
	.attr("x", function(d, i) { return xScale.rangeBand() / 2; })
	.attr("y", function(d) { return yScale(d.numberOfAssignments) + 20; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "white");

	bars.append("text")
	.text(function(d){
	return d.firstName + " " + d.lastName;
	})
	.attr("x", function(d, i) { return xScale.rangeBand() / 2; })
	.attr("y", chartHeight + 10)
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "black")
	.style("writing-mode", "tb");

	svg.append("g")
	.attr("class", "axis")
	.call(yAxis);
	};
	});
	</script>
	</section>
	</section>
	</body>