Skip to content

Instantly share code, notes, and snippets.

@zindlerb

zindlerb/README.md

Last active August 29, 2015 13:57
Show Gist options
  • Save zindlerb/9680392 to your computer and use it in GitHub Desktop.
Save zindlerb/9680392 to your computer and use it in GitHub Desktop.
Download ZIP
LU Graduate Outcome Pie Chart
Raw
README.md

LU Graduate Outcome Pie Chart

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
g {
}
svg {
}
.light {
opacity: 0.2;
}
.bold {
font-weight: bold;
}
.legend:hover {
font-weight: bold;
}
.major:hover {
font-weight: bold;
}
/* Bar Chart CSS */
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.faint {
fill-opacity: 0.5;
}
.x.axis path {
display: none;
}
label {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="pie.js"></script>
Raw
luGrads2012.csv
year status major gender gpa salary
2012 grad_school math male 3.2 none
2012 employed biology female 3.8 27000
2012 grad_school psychology female 4 none
2012 employed psychology male 3.5 32000
2012 employed economics female 4 28000
2012 employed psychology female 3.9 48000
2012 employed biology male 3 48000
2012 employed economics male 3.1 30000
2012 grad_school math male 2.5 none
2012 employed economics male 3.6 86000
2012 employed biology male 4 50000
2012 employed biology female 2.8 34000
2012 grad_school math male 3.6 none
2012 grad_school economics female 2.4 none
2012 employed economics male 2.3 44000
2012 volunteering economics female 2.4 none
2012 employed math male 3.8 98000
2012 employed economics female 3.5 27000
2012 employed economics male 3.5 32000
2012 grad_school economics male 2.9 none
2012 employed economics male 3.8 26000
2012 employed economics male 2.3 26000
2012 employed biology female 2.5 59000
2012 internship economics male 3.3 none
2012 employed economics male 3.5 65000
2012 employed biology male 3.2 26000
2012 internship psychology male 2.9 none
2012 employed math female 3.7 35000
2012 employed economics male 3.6 52000
2012 employed economics female 3.6 56000
2012 internship english female 3.2 none
2012 employed economics male 3.7 83000
2012 employed economics male 2.8 85000
2012 internship psychology female 3.1 none
2012 employed economics female 2.2 28000
2012 grad_school economics female 2.8 none
2012 employed psychology female 2.6 40000
2012 employed biology female 2.2 25000
2012 employed economics female 3.5 29000
2012 job_search economics male 2.6 none
2012 grad_school psychology male 2.8 none
2012 employed economics female 2.9 64000
2012 grad_school psychology female 3 none
2012 employed math male 3.5 71000
2012 employed math female 2.2 53000
2012 fellowship biology female 2.7 none
2012 employed biology female 3.2 51000
2012 grad_school biology female 3 none
2012 employed economics female 3.1 55000
2012 grad_school economics female 3.1 none
2012 job_search spanish male 2.1 none
2012 employed math female 3.1 34000
2012 employed economics male 2.9 50000
2012 employed economics female 4 99000
2012 employed psychology male 2.6 42000
2012 grad_school biology female 2.8 none
2012 grad_school economics male 3.7 none
2012 employed math female 3.2 31000
2012 employed economics male 2.6 56000
2012 grad_school biology female 3.6 none
2012 employed psychology male 3.9 58000
2012 employed psychology male 3.2 79000
2012 employed economics male 3.1 32000
2012 employed economics female 2.2 97000
2012 employed economics female 3.9 34000
2012 employed economics male 3.7 41000
2012 employed math female 2.2 78000
2012 employed math male 2.5 55000
2012 employed economics female 3 59000
2012 employed psychology male 2.7 26000
2012 grad_school economics male 3.5 none
2012 employed economics male 2.8 76000
2012 employed biology female 2.2 59000
2012 grad_school math male 3.1 none
2012 employed math female 2.8 50000
2012 grad_school psychology male 3.8 none
2012 grad_school psychology male 3.1 none
2012 volunteering psychology male 3.8 none
2012 employed economics female 2.1 55000
2012 fellowship math male 3.2 none
2012 employed economics male 3.6 45000
2012 grad_school english male 3.2 none
2012 employed economics female 3.9 35000
2012 grad_school english male 3 none
2012 employed economics male 3.9 80000
2012 employed economics male 3.1 43000
2012 employed biology female 3.5 27000
2012 employed psychology male 3.5 55000
2012 grad_school psychology female 3.8 none
2012 employed economics female 3.2 28000
2012 employed math male 3.7 35000
2012 employed economics male 2.1 76000
2012 employed economics female 2.3 46000
2012 grad_school math male 4 none
2012 grad_school economics female 3.1 none
2012 job_search psychology male 2.9 none
2012 internship biology female 2.2 none
2012 employed biology female 2.6 35000
2012 employed psychology female 3.1 33000
2012 grad_school economics male 3.1 none
2012 employed psychology male 3.8 25000
2012 employed math male 3.7 89000
2012 employed biology male 2.3 27000
2012 grad_school economics female 2.7 none
2012 employed economics male 3.3 65000
2012 employed economics female 2.3 32000
2012 grad_school economics female 3.2 none
2012 employed biology female 2.9 54000
2012 employed economics female 2.9 60000
2012 employed economics female 3.3 56000
2012 grad_school biology male 3.9 none
2012 grad_school psychology female 2.3 none
2012 grad_school biology male 2.6 none
2012 employed economics male 3.7 82000
2012 employed psychology female 3.7 35000
2012 volunteering english male 3.2 none
2012 employed economics female 2.4 50000
2012 employed psychology female 3.8 34000
2012 employed economics female 2.8 95000
2012 employed psychology female 2.9 33000
2012 employed economics male 3.6 75000
2012 job_search english male 2.6 none
2012 employed math female 3.1 78000
2012 employed economics male 2.9 32000
2012 internship biology female 2.8 none
2012 grad_school economics male 3.7 none
2012 employed economics female 2.8 84000
2012 employed math female 3.3 60000
2012 grad_school economics male 2.5 none
2012 employed economics female 2.9 92000
2012 job_search english male 3.2 none
2012 grad_school economics female 3.6 none
2012 employed economics female 3.7 80000
2012 employed math male 2.4 50000
2012 employed math female 2.9 48000
2012 grad_school economics male 3.9 none
2012 employed economics male 4 88000
2012 grad_school biology female 3 none
2012 employed biology male 3.1 29000
2012 employed math female 3.2 32000
2012 employed psychology male 2.9 28000
2012 grad_school economics male 2.6 none
2012 grad_school math male 3.5 none
2012 employed math female 3.7 33000
2012 employed economics female 2.1 73000
2012 employed biology female 4 29000
2012 employed economics female 3.2 59000
2012 grad_school economics male 3.3 none
2012 fellowship spanish female 2.8 none
2012 employed biology male 3.2 25000
2012 employed biology male 2.8 53000
2012 employed economics female 2.3 77000
2012 employed economics female 3 50000
2012 fellowship economics female 2.4 none
2012 employed psychology male 3 28000
2012 employed math male 3.5 44000
2012 employed math male 3.2 55000
2012 employed psychology male 2.1 30000
2012 employed economics female 3.3 33000
2012 employed economics female 3.8 26000
2012 employed economics female 2.2 42000
2012 grad_school economics male 3.6 none
2012 grad_school economics female 3.3 none
2012 employed math female 2.3 29000
2012 employed psychology male 3.8 48000
2012 employed economics male 2.6 46000
2012 employed math female 3.5 59000
2012 grad_school economics female 2.4 none
2012 employed economics female 3.7 42000
2012 employed economics female 2.4 96000
2012 employed math male 2.2 79000
2012 employed math male 3.3 33000
2012 employed psychology female 2.5 34000
2012 internship economics male 3.8 none
2012 internship spanish female 3.1 none
2012 employed economics female 3.6 47000
2012 employed economics male 3.2 29000
2012 grad_school economics female 2.7 none
2012 employed math male 2.4 33000
2012 employed biology male 3 53000
2012 employed math female 2.8 63000
2012 employed biology male 2.6 30000
2012 employed biology female 3.9 26000
2012 employed math female 3.9 76000
2012 volunteering english female 2.1 none
2012 grad_school economics male 2.2 none
2012 employed economics female 3.2 49000
2012 internship biology female 3.1 none
2012 employed math female 2.5 40000
2012 employed economics female 2.8 82000
2012 employed economics male 2.7 86000
2012 employed math male 2.2 60000
2012 employed economics female 3.9 44000
2012 employed economics male 3.9 58000
2012 employed math female 3.5 31000
2012 employed economics male 3 58000
2012 volunteering economics female 2.8 none
2012 internship biology male 2.6 none
2012 employed psychology female 3.9 63000
2012 employed economics male 2.2 72000
2012 employed economics male 4 59000
2012 employed economics female 3.3 33000
2012 employed economics male 3 46000
2012 grad_school economics male 2.6 none
2012 employed economics male 3.1 58000
2012 employed economics male 3.3 97000
2012 grad_school psychology female 3.8 none
2012 employed economics female 3.9 95000
2012 employed math male 4 99000
2012 employed math female 3.8 53000
2012 employed economics female 3.3 34000
2012 employed math female 3 30000
2012 grad_school spanish male 2.9 none
2012 employed economics male 2.8 59000
2012 employed math female 3.6 59000
2012 employed psychology female 2.2 31000
2012 employed psychology female 3.2 56000
2012 employed biology female 3.7 25000
2012 employed biology female 3.3 55000
2012 employed economics female 2.2 28000
2012 grad_school economics male 2.5 none
2012 employed economics female 3.2 77000
2012 grad_school psychology male 2.7 none
2012 grad_school economics female 3 none
2012 employed economics male 3.3 65000
2012 volunteering spanish female 3.1 none
2012 employed math female 2.8 50000
2012 grad_school math female 3.1 none
2012 grad_school biology female 3.5 none
2012 grad_school economics male 2.3 none
2012 employed biology female 3.2 71000
2012 employed economics male 3.9 27000
2012 employed economics female 3.2 52000
2012 employed math female 2.8 59000
2012 employed psychology female 3.1 59000
2012 employed economics female 2.1 33000
2012 grad_school psychology male 3.3 none
2012 grad_school psychology male 2.2 none
2012 employed psychology male 3.1 34000
2012 employed economics female 3.2 54000
2012 grad_school english female 3.5 none
2012 employed economics male 3.2 81000
2012 employed economics female 2.8 87000
2012 volunteering psychology male 3.1 none
2012 employed economics female 2.1 64000
2012 employed economics male 3.8 32000
2012 employed economics female 3.7 59000
2012 employed math male 3.7 74000
2012 employed psychology male 2.6 26000
2012 employed math male 2.9 27000
2012 employed math female 3.3 56000
2012 employed economics female 2.4 26000
2012 employed psychology male 3.5 26000
2012 internship english female 3.1 none
2012 employed economics male 3.1 52000
2012 internship biology female 3 none
2012 employed psychology female 3.2 28000
2012 grad_school biology female 3.5 none
2012 employed economics female 3.3 55000
2012 employed biology female 3.7 61000
2012 job_search english male 3.3 none
2012 grad_school biology male 3 none
2012 employed math female 3.6 72000
2012 employed biology female 3.1 61000
2012 employed economics male 3.2 88000
2012 grad_school math male 3.3 none
2012 employed economics male 2.4 60000
2012 employed math male 2.4 57000
2012 employed biology female 3.6 30000
2012 employed psychology male 4 81000
2012 employed math male 2.2 62000
2012 grad_school biology male 2.1 none
2012 employed math female 2.8 79000
2012 employed math male 2.1 44000
2012 employed economics male 3.8 97000
2012 employed psychology female 3.1 59000
2012 fellowship english male 3.7 none
2012 internship biology female 3.7 none
2012 employed economics female 2.3 52000
2012 employed economics female 3.2 86000
2012 volunteering spanish female 4 none
2012 employed biology male 3.9 40000
2012 employed math male 4 52000
2012 grad_school psychology female 2.1 none
2012 employed economics male 2.7 71000
2012 grad_school economics male 3.9 none
2012 employed economics male 3.6 65000
2012 grad_school math male 2.5 none
2012 employed math male 2.3 31000
2012 grad_school economics male 3.1 none
2012 grad_school biology male 3 none
2012 employed biology female 3.9 29000
2012 employed economics male 3.6 25000
2012 grad_school economics female 2.1 none
2012 employed economics female 2.1 64000
2012 employed psychology male 3.8 53000
2012 grad_school english male 2.1 none
2012 internship psychology male 2.5 none
2012 grad_school math male 2.8 none
2012 employed economics female 3.5 47000
2012 employed biology male 3.8 30000
2012 employed economics female 3.7 82000
2012 employed economics female 4 40000
2012 grad_school math male 3.1 none
2012 fellowship spanish male 2.7 none
2012 employed economics male 3.1 44000
Raw
pie.js
//To DO:
//Add Title
//Add Transitions
//Add bolding on touch
//DONE!
var svgW = 950,
svgH = 600,
paddingX = 200,
paddingY = 200,
radius = 70;
//Start Bar Chart Vars
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, 300], .3, .4);
var y = d3.scale.linear()
.range([radius*2, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
//End Bar Chart Vars
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 25);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.students; });
var svg = d3.select("body").append("svg")
.attr("width", svgW)
.attr("height", svgH)
var chart = svg.append("g")
.attr("transform", "translate(" + paddingX + "," + paddingY + ")");
d3.csv("luGrads2012.csv", function(error, dataCSV) {
var allData = [];
var majors = _.uniq(_.pluck(dataCSV, "major"));
var fullData = _.reduce(majors, function(mem, str) {
var filtered = _.filter(dataCSV, function(obj){
return str == obj.major;
});
mem[str] = filtered;
return mem;
}, {});
//fix the all chart
fullData.all = dataCSV;
fullData = _.reduce(fullData, function(mem , student, key) {
mem[key] = percentage(counting(student, key));
return mem;
}, {});
function updateBar(data){
d3.selectAll("g.barHolder").remove()
x.domain(data.sort(function(a,b){ return b.percent - a.percent; }).map(function(d) { return d.major; }));
y.domain([0, d3.max(data, function(d) { return (d.percent/100); })]);
var height = radius * 2;
var barChart = chart.append("g").attr("class", "barHolder");
barChart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height +")")
.call(xAxis);
barChart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
barChart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.major); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.percent/100); })
.attr("height", function(d) { return height - y(d.percent/100);})
.attr("class", function(d) { return d.class })
.style("fill", function(d) { return color(d.status)});
barChart.attr("transform", function(d) {return "translate("+ 450 +"," + 100 + ")"});
return barChart;
}
updateBar(transformBar(fullData, "none"));
function fullUpdate(piesData){
var countX = 0;
var countY = 0;
svg.selectAll("text.title").remove();
//This might break if I change the data.
var pairedData = _.pairs(piesData);
var last = _.last(pairedData);
pairedData.pop();
pairedData.push(pairedData[0]);
pairedData[0] = last;
_.each(pairedData, function(arr, ind) {
var spacingTop = 2.6;
var spacingSides = 2.4;
var key = arr[0];
var g = pieUpdate(arr[1], key);
if(countX%4 == 0 && countX > 0 ){
countY = countY + 1;
countX = 0;
}
chart.append("text").attr("class", "title")
.attr("x", 0)
.attr("y", 0 )
.style("text-anchor", "middle")
.attr("font-size", "15px")
.text(capitaliseFirstLetter(key))
.attr("transform", function(d) { return "translate(" + (spacingSides * radius * countX) + "," + (spacingTop * countY * radius + 2) + ")"; });
g.attr("transform", function(d, i) { return "translate(" + ( spacingSides * radius * countX) + "," + (spacingTop * countY * radius) + ")"; });
countX = countX + 1;
});
function pieUpdate(pieData, key) {
chart.selectAll(".arc" + key).remove();
var g = chart.selectAll(".arc" + key)
.data(pie(pieData))
.enter().append("g")
.attr("class", "arc" + key);
g.append("path")
.attr("d", arc)
.attr("id", function(d) { return d.data.status })
.attr("class", function(d) { return d.data.class})
.style("fill", function(d) { return color(d.data.status); });
g.append("text")
.attr("transform", function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
labelr = radius + 8,
// pythagorean theorem for hypotenuse
h = Math.sqrt(x*x + y*y);
return "translate(" + (x/h * labelr) + ',' + (y/h * labelr) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.data.percent; });
g.on("mouseenter", function(statusObj){
var dat = allButt(piesData, statusObj.data, "light");
//possible method for bolding?
//highlight selected. I need to know what major has been moused over
updateBar(transformBar(fullData, statusObj.data.status, statusObj.data.major));
fullUpdate(dat);
});
g.on("mouseleave", function(maj){
piesData = allButt(fullData, maj.data ,"full");
updateBar(transformBar(fullData, "none"));
fullUpdate(piesData);
});
return g;
}
}
fullUpdate(fullData);
//abstract legend with pie update put mouse stuff in there too.
function updateLegend(data) {
svg.selectAll("g.legend").remove();
var legend = svg.selectAll(".legend")
.data(data)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(50," + ((i * 20) + paddingY) + ")"; });
legend.append("rect")
.attr("x", 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) {return color(d.status)});
legend.append("text")
.attr("x", 15)
.attr("y", 9)
.attr("dy", ".35em")
.attr("class", function(d) { return d.status; })
.style("text-anchor", "end")
.text(function(d) { return simpleReplace(d.status,"_"," "); });
legend.on("mouseenter", function(statusObj){
var dat = allButt(fullData, statusObj, "light");
updateBar(transformBar(fullData, statusObj.status));
fullUpdate(dat);
});
legend.on("mouseleave", function(maj){
fullData = allButt(fullData, maj ,"full");
fullUpdate(fullData);
})
return legend;
}
updateLegend(fullData.all);
//fixing this requires having a mouse in on the outer box, and changing the nature of the inner mouse out.
// add this interaction for touching the actual graph
});
//Functions
function allButt(data, checker, str) {
return _.reduce(data, function(mem ,arr, key) {
mem[key] = _.map(arr, function(val, ind){
if(checker.status != val.status) {
val.class = str;
}
return val;
});
return mem;
}, {});
}
function counting(data, major) {
return _.reduce(data, function(memo ,obj){
var notExist = true;
if(_.isEmpty(memo)){
memo.push({
status: obj.status,
students: 1,
major: major
});
return memo;
} else {
memo = _.map(memo, function(x) {
if(x.status == obj.status) {
x.students = x.students + 1;
notExist = false;
return x;
} else {
return x;
}
});
}
if(notExist){
memo.push({
status: obj.status,
students: 1,
major: major
});
}
return memo;
}, []);
}
function percentage(data) {
var total = _.reduce(data, function(memo, section) {
return memo + section.students;
}, 0);
//abstract percantages. probs combine with total
return _.map(data, function(sect, index, list){
sect.percent = Math.round(Math.floor((sect.students/total)*1000)/10);
sect.class = "full";
return sect;
})
}
// sect.status = simpleReplace(sect.status, "_", " ");
function simpleReplace(str, lookup, replace) {
var splitStr = str.split(lookup);
var result = "";
_.each(splitStr, function(str) {
if(result == "") {
result = result + str
} else {
result = result + replace + str;
}
});
return result;
}
function transformBar(data, status){
var highlight = false;
if(arguments.length > 2) {
highlight = true;
var majorHighlight = arguments[2];
}
data = _.pairs(data);
return _.reduce(data, function(mem, arr, ind) {
var cl;
if(highlight){
if(arr[0] == majorHighlight) {
cl = "normal"
} else {
cl = "faint";
}
} else {
cl = "normal";
}
var statusObj = _.find(arr[1], function(obj) { return obj.status == status});
if(statusObj == undefined) {
statusObj = {};
statusObj.percent = 0;
}
mem.push({major: shortMajor(arr[0]), percent: statusObj.percent, status: status, class: cl});
return mem;
}, []);
}
function shortMajor(str){
if(str == "psychology"){
return "psych"
} else if(str == "economics") {
return "econ"
} else {
return str;
}
}
function capitaliseFirstLetter(string){
return string.charAt(0).toUpperCase() + string.slice(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment