Skip to content

Instantly share code, notes, and snippets.

@jmuyskens
Last active December 18, 2015 01:29
Show Gist options
  • Save jmuyskens/5704328 to your computer and use it in GitHub Desktop.
Save jmuyskens/5704328 to your computer and use it in GitHub Desktop.
Faculty-to-student and Faculty-to-major ratios

Dark orange is faculty-student ratio while light orange is faculty-major. Art History gets shortchanged because I don't know the faculty-student ratio (it is lumped together with Art & Art History), but is again included for interest's sake.

Department Faculty Students FSRatio
Business 13 518 17.4
Education 14 473 10.3
Political Science 4 111 11.7
Social Work 4 100 13.0
Engineering 15 372 12.0
Communication Arts & Sciences 17 388 16.0
Nursing 13 272 5.8
Psychology 11 217 17.5
Biology 18 287 16.6
Computer Science 7 109 16.4
Kinesiology 16 200 16.0
Spanish 12 138 12.1
Chemistry and Biochemistry 13 135 19.4
English 22 202 12.5
Geo 8 72 15.9
German and Asian Languages 7 58 9.9
Art and Art History 10 74 10.0
Sociology 6 43 18.2
Mathematics and Statistics 12 82 18.6
History 14 89 17.5
French 4 25 10.7
Philosophy 12 74 16.4
Classical Languages 4 21 11.3
Music 13 59 7.7
Economics 8 36 17.1
Physics 7 30 17.9
Religion 13 49 15.9
Art History 3 8 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
background: white;
display:block;
margin:0 auto;
}
button {
clear:right;
float:right;
}
.chart rect {
stroke: white;
}
.line {
fill:none;
stroke:#000;
stroke-width:1.5px;
}
.axis path, .axis line {
fill:none;
stroke:#000;
shape-rendering: crispEdges;
}
.grid {
fill:none;
stroke-width:0.5px;
stroke:#000;
opacity:0.2;
}
.ratio {
fill:#f2c180;
}
.fsratio {
fill:#f3a53d;
}
.students {
fill:#5cadf0;
}
.faculty {
fill:steelblue;
}
#wrap {
width:910px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<button onClick="ascending()">↑</button>
<button onClick="descending()"s>↓</button>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var isAscending = 1;
d3.csv("data.csv", function(d) {
return {
dept: d.Department,
faculty: +d.Faculty,
students: +d.Students,
year: +d.Year,
fsratio: +d.FSRatio
};
}, function(error, rows) {
var margin = {top: 10, right: 40, bottom: 20, left: 40},
depth = 35,
width = 860 - margin.left - margin.right,
height = depth * rows.length + 30;
var vis = d3.select("#wrap").append("svg:svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
rows.forEach(function(d) {
d.ratio = d.students / d.faculty;
d.stuff = ["students", "faculty", "ratio", "fsratio"].map(function(name){ return {name: name, value: +d[name]}; });
});
rows.sort( function(a, b) {
a.ratio - b.ratio;
});
var x = d3.scale.linear()
.domain([0, d3.max(rows, function(d){ return d.students; })])
.range([0, width/2]);
var xpercent = d3.scale.linear()
.domain([0, d3.max(rows, function(d){ return d.ratio; })])
.range([width / 2, 0]);
var y0 = d3.scale.ordinal()
.domain(d3.range(rows.length))
.rangeBands([0, height], 0.2)
var y1 = d3.scale.ordinal()
.domain(d3.range(rows.length))
.range([0, y0.rangeBand()]);
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(8)
}
function make_xpercent_axis() {
return d3.svg.axis()
.scale(xpercent)
.orient("bottom")
.ticks(8)
}
vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+ width/2+"," + margin.top + ")")
.call(make_x_axis().orient("top").ticks(5));
vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+ width/2+"," + height + ")")
.call(make_x_axis().ticks(5));
vis.append("g")
.attr("class", "grid")
.attr("transform", "translate("+ width/2+"," + height + ")")
.call(make_x_axis().tickSize(margin.top-height, 0, 0).tickFormat(""));
vis.append("g")
.attr("class", "xpercent axis")
.attr("transform", "translate(0," + margin.top + ")")
.call(make_xpercent_axis().orient("top").ticks(5));
vis.append("g")
.attr("class", "xpercent axis")
.attr("transform", "translate(0," + height + ")")
.call(make_xpercent_axis().ticks(5));
vis.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_xpercent_axis().tickSize(margin.top-height, 0, 0).tickFormat(""));
var departments = vis.selectAll("g.department")
.data(rows, function(d) { return d.dept; })
.enter().append("svg:g")
.attr("class",function(d){ return "department "+d.dept})
.attr("transform", function(d,i) { return "translate(0," + (33 + i * depth) + ")";});
var rects = departments.selectAll("rect")
.data(function(d){return d.stuff;})
.enter().append("rect")
.attr("class", function(d){ return d.name; })
.attr("x", function(d) {
if (d.name == "ratio" || d.name == "fsratio")
return xpercent(d.value);
return width/2;})
.attr("y", function(d, i){
return (i%2) * 11;
})
.attr("width", function(d) {
if (d.name == "ratio" || d.name == "fsratio")
return width/2 - xpercent(d.value);
return x(d.value);
})
.attr("height", 10)
.on("click", function(d){ rearrange(d);});
var rearrange = function(d) {
departments.sort(function(a, b){ return isAscending * (b[d.name] - a[d.name]); });
departments.transition(departments)
.duration(750)
.delay(function(d, i){ return (i * 20);})
.attr("transform", function(d, i) { return "translate(0," + (33 + i * 35) + ")"; });
//rects.on("click", function(d){ rebrrange(d);});
};
var rebrrange = function(d) {
departments.sort(function(a, b){ return a[d.name] - b[d.name]; });
departments.transition(departments)
.duration(750)
.delay(function(d, i){ return i * 20;})
.attr("transform", function(d, i) { return "translate(0," + (33 + i * 35) + ")"; });
// rects.on("click", function(d){ rearrange(d);});
};
rects.append("text")
.attr("x",0)
.attr("y",0)
.attr("dy","-2.5em")
.style("text-anchor","end")
.text(function(d){return "hello, world"; });
departments.append("text")
.attr("x", width/2)
.attr("y", 0)
.attr("dy","-.25em")
.style("text-anchor","end")
.text(function(d){return d.dept;});
}
);
function ascending() {
isAscending = 1;
}
function descending() {
isAscending = -1;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment