Based on Sara Quigley's Curriculum Exploration
xxxxxxxxxx
<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