Curriculum Exploration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Science Curriculum Exploration</title>
</head>
<style type="text/css">

table {
  margin-top: 10px;
  border-collapse: collapse;
  font: 10px sans-serif;
  width: 720px;
}

th {
  font-weight: normal;
  text-align: right;
  padding-right: 6px;
  min-width: 43px;
}

thead td {
  cursor: s-resize;
}

tbody tr:first-child td {
  padding-top: 2px;
}

tbody td {
  padding: 0;
}

tbody rect {
  fill: steelblue;
}

tbody tr:hover rect {
  fill: orange;
}

.tophead {
  font: 400 26px "Helvetica Neue";
  color: #525252;
}

.hint {
  padding-left: 20px;
  font: 200 18px "Helvetica Neue";
  color: #525252;
}

/* testing out d3 tooltip */
    .d3-tip {
      line-height: 1;
      font-weight: normal;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 8px;
    }

/* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }

/* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
</style>

// tooltips for bar chart
var barTip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function (d) { 
          return  d + " students";
        });

d3.csv("degree-earners.csv", function(csv) {
  var courses = d3.keys(csv[0]).filter(function(key) {
    return key != "Major" && key != "Graduating-Year";
  });

d3.selectAll("thead td").data(courses).on("click", function(k) {
    tr.sort(function(a, b) { return (b[k]) - (a[k]); });
  });

var tr = d3.select("tbody").selectAll("tr")
      .data(csv)
    .enter().append("tr");

var x = d3.scale.linear().domain([0,(d3.max(csv, function(d) {return +d.Headcount;}) + 10)]).range([0,71]);

tr.append("th")
      .attr("width", 200)
      .text(function(d) { return d.Major; });

tr.selectAll("td")
      .data(function(d) { return courses.map(function(k) { return d[k]; }); })
    .enter().append("td").append("svg")
      .attr("width", 71)
      .attr("height", 12)
    .append("rect")
      .attr("class", "bar")
      .attr("height", 12)
      .attr("width", function(d) { 
        return x(+d); 
      });
  
  d3.selectAll(".bar").call(barTip);
  d3.selectAll(".bar").on('mouseover', barTip.show)
      .on('mouseout', barTip.hide);

});

</script>
<body>
  <span class="tophead">Curriculum Exploration</span><span class="hint">(November 20, 2014)  </span><span class="hint">hint: click a column header to sort on a column</span>
<table>
  <thead>
    <tr>
      <th>Major</th>
      <td>Headcount</td>
      <td>Stat 2</td>
      <td>Stat 20</td>
      <td>Stat 21</td>
      <td>Stat N21 </td>
      <td>Stat W21 </td>
      <td>Stat 133 </td>
      <td>Stat LD Other</td>
      <td>Stat UD Other</td>
      <td>Stat Grad Other</td>
      <td>CS 10</td>
      <td>CS W10 </td>
      <td>CS 61A </td>
      <td>CS 61AS</td>
      <td>CS 61B_BL</td>
      <td>CS LD Other</td>
      <td>CS UD Other</td>
      <td>CS Grad Other</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js