Curriculum Exploration

Based on Sara Quigley's Curriculum Exploration

forked from syntagmatic's block: Curriculum Exploration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Science Curriculum Exploration</title>
</head>
<style type="text/css">
body {
  font: 10px "Helvetica Neue";
}
table {
  border-collapse: collapse;
  width: 960px;
}

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

thead td {
  cursor: s-resize;
}

tbody td {
  height: 12px;
}

tbody .punch {
  background: darkslateblue;
  margin: 0 auto;
}

.hint {
  color: #999;
  text-align: center;
}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
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.sqrt().domain([0,(d3.max(csv, function(d) {return +d.Headcount;}) + 10)]).range([0,16]);

tr.append("th")
      .text(function(d) { return d.Major; });

tr.selectAll("td")
      .data(function(d) { return courses.map(function(k) { return d[k]; }); })
    .enter().append("td")
      .append("div")
      .attr("class", "punch")
      .style("border-radius", function(d) { 
        return Math.ceil(x(+d)/2) + "px"; 
      })
      .style("height", function(d) { 
        return Math.ceil(x(+d)) + "px"; 
      })
      .style("width", function(d) { 
        return Math.ceil(x(+d)) + "px";
      });
  
});
</script>
<body>
<div class="hint">hint: click a column header to sort on a column</div>
<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