saraquigley · November 27, 2012 23:14
diff --git a/BigWaitlists_Oct14.csv b/BigWaitlists_Oct14.csv
diff --git a/BigWaitlistTimeSeries.css b/BigWaitlistTimeSeries.css
 body {
  font: 10px sans-serif;
  margin-top: 20px;
 }

 svg {
  margin-top: 40px;
  margin-left: 10px;
 }

 path.line {
  fill: none;
  stroke: #006D2C;
  stroke-width: 1.5px;
 }

 path.waitlist {
  fill: none;
  stroke: #FE9929;
  stroke-width: 1.5px;
  stroke-opacity: 1.25;
 }

 path.area {
  fill: #A1D99B;
 }

 path.area3 {
  fill: #FEE391;
 }

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

 path.full{
  fill: none;
  stroke: #A50026;
  stroke-width: 1.5px;
  stroke-opacity: 1.25;
 }

 line.line4 {
  fill: none;
  stroke: steelblue;
  stroke-width: 1 px;
  shape-rendering: crispEdges;
 }

 text.coursenum {
  font: 10px sans-serif;
  color: #666;
  letter-spacing: 1px;
  font-weight: 600;

 }

 #header {
  position: absolute;
  z-index: 1;
  display: block;
 }

 #header {
  top: 20px;
  left: 40px;
  font: 300 18px "Helvetica Neue";
  color: steelblue;
 }


 text.full {
  font: 10px sans-serif;
  stroke: #A50026;
  fill: #A50026;
  letter-spacing: .75px;
  font-weight: 400;
  stroke-width: 0.25px;
 }

 text.enrolled {
  font: 10px sans-serif;
  stroke: #006D2C;
  fill: #006D2C;
  letter-spacing: .75px;
  font-weight: 500;
  stroke-width: 0.20px;
 }

 text.waitlisted {
  font: 10px sans-serif;
  stroke: #FE9929;
  fill: #FE9929;
  letter-spacing: .75px;
  font-weight: 500;
  stroke-width: 0.20px;
 }

 text.milestones {
  font: 10px sans-serif;
  stroke: none;
  fill: steelblue;
 }

 #sara {
  top: 45px;
  left: 40px;
  font: 300 12px "Helvetica Neue";
  color: steelblue;
  letter-spacing: 1px;
  position: absolute;
    display: block;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="BigWaitlistTimeSeries.css" />
  <body>
    <script src='http://mbostock.github.com/d3/d3.v2.js'></script>
     <div id="header">Fall 2012 Courses with Big Waitlists</div>
   <div id="sara">Sara Quigley</div>
    <script type="text/javascript">

 var m = [0, 85, 30, 20],
    w = 700 - m[1] - m[3],
    h = 160 - m[0] - m[2],
    parse = d3.time.format("%B %d").parse;

 // Scales. Note the inverted domain for the y-scale: bigger is up!
 var x = d3.time.scale().range([0, w]),
    y = d3.scale.linear().range([h, 0]);

 // X-axis.
 var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(-h);

 // An area generator, for the light fill.
 var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(h)
    .y1(h);

 // A line generator, for the dark stroke.
 var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(h);

 //Adding a second line generator, for the enroll_limit
 var line2 = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.enrollLimit); });
    
 //Adding a third line generator, for the waitlist_count
 var line3 = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.waitListCount) + y(d.enrollLimit); });


 // Another area generator, for the waitlist count fill.
 var area3 = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(h)
    .y1(h);



 d3.csv("BigWaitlists_Oct14.csv", function(data) {

  // Nest values by symbol.
  var symbols = d3.nest()
      .key(function(d) { return d.courseNum + ": " + d.courseTitle; })
      .entries(data);

  // Parse dates and numbers. We assume values are sorted by date.
  // Also compute the maximum enrollment per course, needed for the y-domain.
  symbols.forEach(function(s) {
    s.values.forEach(function(d) { d.date = parse(d.date); d.enrollCount = +d.enrollCount; d.waitListCount = +d.waitListCount; d.enrollLimit = +d.enrollLimit;});
   // s.maxPercent = d3.max(s.values, function(d) { return d.percentFull; });
    s.maxEnroll = d3.max(s.values, function(d) { return +d.enrollLimit; });
    s.maxWaitlist = d3.max(s.values, function(d) { return +d.waitListCount; });
  });

  // Compute the minimum and maximum date across symbols.
  x.domain([
    d3.min(symbols, function(d) { return d.values[0].date; }),
    d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; })
  ]);


  // Add an SVG element for each symbol, with the desired dimensions and margin.
  var svg = d3.select("body").selectAll("svg")
      .data(symbols)
    .enter().append("svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
    .append("g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");


  // Add the area path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "area")
      .attr("d", function(d) { y.domain([0, 0]); return area(d.values); });

  // Add the x-axis.
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);
      
  // Add the waitlist area path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "area3")
      .attr("d", function(d) { y.domain([0, 0]); return area3(d.values); });

  // Add the waitlist line path elements. 
  svg.append("path")
      .attr("class", "waitlist")
      //.attr("y", y(function(d) { return d.enrollLimit; }))
      .attr("d", function(d) { y.domain([0,0]); return line3(d.values); });
      //.attr("transform", "translate(0," + function(d) {return d.enrollLimit;} + ")");

  // Add the line path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "line")
      .attr("d", function(d) { y.domain([0,0]); return line(d.values); });
      
      
  // Add a small label for the coursenum.
  svg.append("text")
      .attr("x", w - 6)
      .attr("y", 36)
      .attr("text-anchor", "end")
      .attr("class", "coursenum")
      .text(function(d) { return d.key; });
      
  //add the latest enrollment limit    
  svg.append("svg:text")
      .attr("x", w + 7)
      .attr("y", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return y(d.maxEnroll); })
      .attr("text-anchor", "start")
      .attr("class", "full")
      .text(function(d, i) {return symbols[i].values[(symbols[i].values.length)-1].enrollLimit + "  seat limit" ;} );
      
  //add the latest enrollment count    
  svg.append("svg:text")
      .attr("x", w + 7)
      .attr("y", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return y(d.maxEnroll); })
      .attr("transform", "translate(0, 14)")
      .attr("text-anchor", "start")
      .attr("class", "enrolled")
      .text(function(d, i) {return symbols[i].values[(symbols[i].values.length)-1].enrollCount + "  enrolled" ;} );

  //add the max waitlist count    
  svg.append("svg:text")
      .attr("x", w + 7)
      .attr("y", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return y(d.maxEnroll); })
      .attr("transform", "translate(0, -14)")
      .attr("text-anchor", "start")
      .attr("class", "waitlisted")
      .text(function(d, i) {return (d.maxWaitlist - d.maxEnroll) + "  waitlist peak" ;} );

  // Add the enroll limit. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "full")
      .attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return line2(d.values); });   

  // Add the line path elements. Note: the y-domain is set per element.
  svg.append("svg:line")
      .attr("class", "line4")
      .attr("x1", x(parse("July 11")))
      .attr("x2", x(parse("July 11")))
      .attr("y1", h + 20)
      .attr("y2", 50);

  // Add the line path elements. Note: the y-domain is set per element.
  svg.append("svg:line")
      .attr("class", "line4")
      .attr("x1", x(parse("September 21")))
      .attr("x2", x(parse("September 21")))
      .attr("y1", h + 20)
      .attr("y2", 50);
      
  svg.append("svg:text")
      .attr("class", "milestones")
      .attr("x", x(parse("July 11")) + 6)
      .attr("y", h + 25)
      .attr("text-anchor", "start")
      .text("Phase 2");

  svg.append("svg:text")
      .attr("class", "milestones")
      .attr("x", x(parse("September 21")) + 6)
      .attr("y", h + 25)
      .attr("text-anchor", "start")
      .text("Add/Drop Deadline");

 // Tele-BEARS Phase 1  April 9 - July 10
 // Tele-BEARS Phase 2  July 12 - August 12
 // Early Drop Deadline August 31
 // Add Drop Deadline September 21


 //transition to actual graphs
    area.y1(function(d) { return y(d.enrollCount); });
    area3.y1(function(d) { return y(d.waitListCount); });
    area3.y0(function(d) { return y(d.enrollLimit); });
    line.y(function(d) { return y(d.enrollCount); });
    line3.y(function(d) { return y(d.waitListCount); });
    line2.y(function(d) {return y(d.maxEnroll);});

 
  
     d3.selectAll("path.waitlist")
    	.transition()
    	.duration(2750)
    	.delay(1500)
    	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return line3(d.values); });
    	//.attr("transform", "translate(0, " +  function(d) { return -y(d.enrollCount);} + ")");
 
     d3.selectAll("path.area3")
    	.transition()
    	.duration(2750)
    	.delay(1500)
        .attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return area3(d.values) > line3(d.values) ? area3(d.values) : null; });   
    
    d3.selectAll("path.line")
    	.transition()
    	.duration(1750)
    	.delay(500)
    	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return line(d.values); });

    d3.selectAll("path.area")
    	.transition()
    	.duration(1750)
    	.delay(500)
        .attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return area(d.values); });



 });

    </script>
diff --git a/thumbnail.png b/thumbnail.png
	body {
	font: 10px sans-serif;
	margin-top: 20px;
	}

	svg {
	margin-top: 40px;
	margin-left: 10px;
	}

	path.line {
	fill: none;
	stroke: #006D2C;
	stroke-width: 1.5px;
	}

	path.waitlist {
	fill: none;
	stroke: #FE9929;
	stroke-width: 1.5px;
	stroke-opacity: 1.25;
	}

	path.area {
	fill: #A1D99B;
	}

	path.area3 {
	fill: #FEE391;
	}

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

	path.full{
	fill: none;
	stroke: #A50026;
	stroke-width: 1.5px;
	stroke-opacity: 1.25;
	}

	line.line4 {
	fill: none;
	stroke: steelblue;
	stroke-width: 1 px;
	shape-rendering: crispEdges;
	}

	text.coursenum {
	font: 10px sans-serif;
	color: #666;
	letter-spacing: 1px;
	font-weight: 600;

	}

	#header {
	position: absolute;
	z-index: 1;
	display: block;
	}

	#header {
	top: 20px;
	left: 40px;
	font: 300 18px "Helvetica Neue";
	color: steelblue;
	}


	text.full {
	font: 10px sans-serif;
	stroke: #A50026;
	fill: #A50026;
	letter-spacing: .75px;
	font-weight: 400;
	stroke-width: 0.25px;
	}

	text.enrolled {
	font: 10px sans-serif;
	stroke: #006D2C;
	fill: #006D2C;
	letter-spacing: .75px;
	font-weight: 500;
	stroke-width: 0.20px;
	}

	text.waitlisted {
	font: 10px sans-serif;
	stroke: #FE9929;
	fill: #FE9929;
	letter-spacing: .75px;
	font-weight: 500;
	stroke-width: 0.20px;
	}

	text.milestones {
	font: 10px sans-serif;
	stroke: none;
	fill: steelblue;
	}

	#sara {
	top: 45px;
	left: 40px;
	font: 300 12px "Helvetica Neue";
	color: steelblue;
	letter-spacing: 1px;
	position: absolute;
	display: block;
	}
	<!DOCTYPE html>

	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="BigWaitlistTimeSeries.css" />
	<body>
	<script src='http://mbostock.github.com/d3/d3.v2.js'></script>
	<div id="header">Fall 2012 Courses with Big Waitlists</div>
	<div id="sara">Sara Quigley</div>
	<script type="text/javascript">

	var m = [0, 85, 30, 20],
	w = 700 - m[1] - m[3],
	h = 160 - m[0] - m[2],
	parse = d3.time.format("%B %d").parse;

	// Scales. Note the inverted domain for the y-scale: bigger is up!
	var x = d3.time.scale().range([0, w]),
	y = d3.scale.linear().range([h, 0]);

	// X-axis.
	var xAxis = d3.svg.axis()
	.scale(x)
	.tickSize(-h);

	// An area generator, for the light fill.
	var area = d3.svg.area()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y0(h)
	.y1(h);

	// A line generator, for the dark stroke.
	var line = d3.svg.line()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y(h);

	//Adding a second line generator, for the enroll_limit
	var line2 = d3.svg.line()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.enrollLimit); });

	//Adding a third line generator, for the waitlist_count
	var line3 = d3.svg.line()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.waitListCount) + y(d.enrollLimit); });


	// Another area generator, for the waitlist count fill.
	var area3 = d3.svg.area()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y0(h)
	.y1(h);



	d3.csv("BigWaitlists_Oct14.csv", function(data) {

	// Nest values by symbol.
	var symbols = d3.nest()
	.key(function(d) { return d.courseNum + ": " + d.courseTitle; })
	.entries(data);

	// Parse dates and numbers. We assume values are sorted by date.
	// Also compute the maximum enrollment per course, needed for the y-domain.
	symbols.forEach(function(s) {
	s.values.forEach(function(d) { d.date = parse(d.date); d.enrollCount = +d.enrollCount; d.waitListCount = +d.waitListCount; d.enrollLimit = +d.enrollLimit;});
	// s.maxPercent = d3.max(s.values, function(d) { return d.percentFull; });
	s.maxEnroll = d3.max(s.values, function(d) { return +d.enrollLimit; });
	s.maxWaitlist = d3.max(s.values, function(d) { return +d.waitListCount; });
	});

	// Compute the minimum and maximum date across symbols.
	x.domain([
	d3.min(symbols, function(d) { return d.values[0].date; }),
	d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; })
	]);


	// Add an SVG element for each symbol, with the desired dimensions and margin.
	var svg = d3.select("body").selectAll("svg")
	.data(symbols)
	.enter().append("svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");


	// Add the area path elements. Note: the y-domain is set per element.
	svg.append("path")
	.attr("class", "area")
	.attr("d", function(d) { y.domain([0, 0]); return area(d.values); });

	// Add the x-axis.
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);

	// Add the waitlist area path elements. Note: the y-domain is set per element.
	svg.append("path")
	.attr("class", "area3")
	.attr("d", function(d) { y.domain([0, 0]); return area3(d.values); });

	// Add the waitlist line path elements.
	svg.append("path")
	.attr("class", "waitlist")
	//.attr("y", y(function(d) { return d.enrollLimit; }))
	.attr("d", function(d) { y.domain([0,0]); return line3(d.values); });
	//.attr("transform", "translate(0," + function(d) {return d.enrollLimit;} + ")");

	// Add the line path elements. Note: the y-domain is set per element.
	svg.append("path")
	.attr("class", "line")
	.attr("d", function(d) { y.domain([0,0]); return line(d.values); });


	// Add a small label for the coursenum.
	svg.append("text")
	.attr("x", w - 6)
	.attr("y", 36)
	.attr("text-anchor", "end")
	.attr("class", "coursenum")
	.text(function(d) { return d.key; });

	//add the latest enrollment limit
	svg.append("svg:text")
	.attr("x", w + 7)
	.attr("y", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return y(d.maxEnroll); })
	.attr("text-anchor", "start")
	.attr("class", "full")
	.text(function(d, i) {return symbols[i].values[(symbols[i].values.length)-1].enrollLimit + " seat limit" ;} );

	//add the latest enrollment count
	svg.append("svg:text")
	.attr("x", w + 7)
	.attr("y", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return y(d.maxEnroll); })
	.attr("transform", "translate(0, 14)")
	.attr("text-anchor", "start")
	.attr("class", "enrolled")
	.text(function(d, i) {return symbols[i].values[(symbols[i].values.length)-1].enrollCount + " enrolled" ;} );

	//add the max waitlist count
	svg.append("svg:text")
	.attr("x", w + 7)
	.attr("y", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return y(d.maxEnroll); })
	.attr("transform", "translate(0, -14)")
	.attr("text-anchor", "start")
	.attr("class", "waitlisted")
	.text(function(d, i) {return (d.maxWaitlist - d.maxEnroll) + " waitlist peak" ;} );

	// Add the enroll limit. Note: the y-domain is set per element.
	svg.append("path")
	.attr("class", "full")
	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return line2(d.values); });

	// Add the line path elements. Note: the y-domain is set per element.
	svg.append("svg:line")
	.attr("class", "line4")
	.attr("x1", x(parse("July 11")))
	.attr("x2", x(parse("July 11")))
	.attr("y1", h + 20)
	.attr("y2", 50);

	// Add the line path elements. Note: the y-domain is set per element.
	svg.append("svg:line")
	.attr("class", "line4")
	.attr("x1", x(parse("September 21")))
	.attr("x2", x(parse("September 21")))
	.attr("y1", h + 20)
	.attr("y2", 50);

	svg.append("svg:text")
	.attr("class", "milestones")
	.attr("x", x(parse("July 11")) + 6)
	.attr("y", h + 25)
	.attr("text-anchor", "start")
	.text("Phase 2");

	svg.append("svg:text")
	.attr("class", "milestones")
	.attr("x", x(parse("September 21")) + 6)
	.attr("y", h + 25)
	.attr("text-anchor", "start")
	.text("Add/Drop Deadline");

	// Tele-BEARS Phase 1 April 9 - July 10
	// Tele-BEARS Phase 2 July 12 - August 12
	// Early Drop Deadline August 31
	// Add Drop Deadline September 21


	//transition to actual graphs
	area.y1(function(d) { return y(d.enrollCount); });
	area3.y1(function(d) { return y(d.waitListCount); });
	area3.y0(function(d) { return y(d.enrollLimit); });
	line.y(function(d) { return y(d.enrollCount); });
	line3.y(function(d) { return y(d.waitListCount); });
	line2.y(function(d) {return y(d.maxEnroll);});



	d3.selectAll("path.waitlist")
	.transition()
	.duration(2750)
	.delay(1500)
	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return line3(d.values); });
	//.attr("transform", "translate(0, " + function(d) { return -y(d.enrollCount);} + ")");

	d3.selectAll("path.area3")
	.transition()
	.duration(2750)
	.delay(1500)
	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return area3(d.values) > line3(d.values) ? area3(d.values) : null; });

	d3.selectAll("path.line")
	.transition()
	.duration(1750)
	.delay(500)
	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return line(d.values); });

	d3.selectAll("path.area")
	.transition()
	.duration(1750)
	.delay(500)
	.attr("d", function(d) { y.domain([0, (d.maxEnroll + d.maxWaitlist)]); return area(d.values); });



	});

	</script>