D3 Examples - Curriculum Exploration

xxxxxxxxxx
 
<!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>
​
​
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="d3.tip.min.js"></script>
<script>
​
// 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>
    