Fall 2012 Enrollment Counts & Limits

<!DOCTYPE html>
<html>
  <head>
    <title>Fall 2012 Enrollment Counts & Limits</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="./tooltip.js"></script>
    <style type="text/css">

body {
  font: 11px sans-serif;
}

.chart rect {
  stroke: white;
}
rect:hover {

}

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

.rule {
  font: 10px sans-serif;
}

.enrollCountLabel {
  font: 10px sans-serif;
    color: steelblue;
  
}
#header {
  position: absolute;
  z-index: 1;
  display: block;
}

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

.tooltip {
  font: 400 11px "Helvetica Neue";
  color: steelblue; 
}

#sara {
  top: 65px;
  left: 40px;
  font: 300 12px "Helvetica Neue";
  color: steelblue;
  letter-spacing: 1px;
  position: absolute;
}

</style>
  </head>
  <body>
   <div id="header">Fall 2012 Enrollment Counts & Limits by Academic Department (in aggregate) 
   <br>As of July 1, 2012</div>
   <div id="sara">Sara Quigley</div>
   <div id="chart">
  
    <script type="text/javascript">

var w = 700,
    h = 2000,
    m = [100, 30, 80, 60]; //margin top, right, bottom, left

var color = d3.scale.category20b();

d3.json("deptClassesEnrollments.json", function(data) {

var y = d3.scale.ordinal()
    .domain([data.length])
	.rangeBands([0, h]);

var x = d3.scale.linear()
     .domain([0, d3.max(data.map(function(d) {return parseInt(d.enrollLimit);}))]) 
     .range([0, w - m[1]]);

//add y-axis labels
chart.selectAll(".deptLabel")
      .data(data)
	  .enter().append("svg:text")
      .attr("x",0)	  
      .attr("y", m[0])
	  .attr("fill", function(d, i) { return color(i) })
      .attr("text-anchor", "end")
      .attr("vertical-align", "middle")
      .attr("dy", ".52em")
      .text(function(d) { return (d.dept);})
      .attr("transform", function(d,i) { return ("translate(" +   (m[3] - 5)  + "," +  ((y.rangeBand() / data.length * i) + 5) + ")");});

//add enrollment count labels
chart.selectAll(".enrollCountLabel")
      .data(data)
	  .enter().append("svg:text")
      .attr("x", m[3])	  
      .attr("y", m[0])
	  .attr("fill", function(d, i) { return color(i) })
      .attr("text-anchor", "start")
      .attr("vertical-align", "middle")
      .attr("dy", ".52em")
      .text(function(d) { return (d.enrollCount);})
      .attr("transform", function(d,i) { return ("translate(" +  x(d.enrollCount + 5 + m[3]) + "," +  ((y.rangeBand() / data.length * i) + 5) + ")");});

// Add x-axis rules.
  var xRule = chart.selectAll("g.rule")
      .data(x.ticks(6))
    .enter().append("svg:g")
      .attr("class", "rule")
      .attr("transform", function(d) { return "translate(" + (m[3] + x(d)) + ",0)"; });

xRule.append("svg:line")
      .attr("y2", h + m[3])
      .style("stroke", "#fff")
      .style("stroke-opacity", function(d) { return d ? .7 : null; });

xRule.append("svg:text")
      .attr("y", m[0] - 10)
      .attr("dy", ".35em")
      .attr("fill", "#D0D1E6")
      .attr("text-anchor", "middle")
      .text(d3.format(",d.enrollLimit"));

});

</script>
    </div>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js