Skip to content

Instantly share code, notes, and snippets.

@yelper

yelper/README.md

Last active August 29, 2015 14:16
Show Gist options
  • Save yelper/364ffaac2effa6fafd25 to your computer and use it in GitHub Desktop.
Save yelper/364ffaac2effa6fafd25 to your computer and use it in GitHub Desktop.
Download ZIP
Survey results of CS 638/838 Students
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #eee;
}
.segment {
width: 400px;
float: left;
padding: 10px;
}
h2 {
font-size: 1.2em;
}
svg {
width: 350px;
height: 200px;
}
#studentMajor {
height: 700px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.bars text {
fill: white;
font: 14px sans-serif;
text-anchor: end;
}
</style>
<body>
<div class="segment">
<h2>What kind of students are in the class?</h2>
<svg id="studentType" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="segment">
<h2>How long have they been that kind of student?</h2>
<svg id="studentYear" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="segment">
<h2>When do they expect to graduate?</h2>
<svg id="studentGraduate" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="segment">
<h2>What is their area of concentration?</h2>
<svg id="studentMajor" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="segment">
<h2>Have they had an experimental methods class?</h2>
<svg id="experimentalMethods" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="segment">
<h2>What programming experience have they had?</h2>
<svg id="progExp" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div class="segment">
<h2>What is their interest in data visualization?</h2>
<svg id="interestType" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
studentType = [{name: 'ugrad', data: 23}, {name: 'grad', data: 38}];
studentYear = [{name: 'first', data: 20}, {name: 'second', data: 10}, {name: 'third', data: 9}, {name: 'four+', data: 22}];
studentGraduate = [{name: 'this year', data: 25}, {name: 'later', data: 35}];
studentMajor = [
{name: 'Computer Science', data: 26},
{name: 'Statistics', data: 7},
{name: 'Biomedical Engineering', data: 4},
{name: 'Electrical and Computer Engineering', data: 3},
{name: 'Journalism and Mass Communication', data: 3},
{name: 'Industrial and Systems Engineering', data: 3},
{name: 'GIS/Geography', data: 3},
{name: 'Nuclear Engineering', data: 2},
{name: 'Population Health Sciences', data: 2},
{name: 'English', data: 1},
{name: 'Japanese', data: 1},
{name: 'Life Sciences Communication', data: 1},
{name: 'Mechanical Engineering', data: 1},
{name: 'Operations and Technology Management', data: 1},
{name: 'Psychology', data: 1}
];
experimentalMethods = [{name: 'yes', data: 23}, {name: 'no', data: 38}];
progExp = [{name: 'none', data: 1}, {name: 'a little', data: 8}, {name: 'non-trivial', data: 25}, {name: 'proficient', data: 27}];
interestType = [
{name: 'domain scientist', data: 16},
{name: 'data scientist', data: 26},
{name: 'vis scientist', data: 8},
{name: 'observer of vis', data: 10},
{name: 'other', data: 1}
];
// i'm not even going to say anything about it.
// with thanks to <http://bl.ocks.org/mbostock/7555321>
var wrap = function(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
};
// just do it piecemeal.
dataSources = ['studentType', 'studentYear', 'studentGraduate', 'studentMajor', 'experimentalMethods', 'progExp', 'interestType'];
dataSources.forEach(function(source, i) {
var svg = d3.select('#' + source);
var curData = eval(source);
var height = source == 'studentMajor' ? 700 : 200;
svg.style('height', height);
var colors = d3.scale.category10();
var x = d3.scale.linear()
.domain([0, d3.max(curData.map(function(d) { return d.data;}))])
.range([0, 250]);
var y = d3.scale.ordinal()
.domain(curData.map(function(d) { return d.name; }))
.rangeRoundBands([20, height - 20], 0.1, 0.2);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(90, 0)')
.call(yAxis)
.selectAll('.tick text')
.call(wrap, 80)
.attr('transform', function() {
// gross hack, I'm not sure what's going on with the wrap code;
// dy's don't seem to listen to me
var numLines = d3.select(this).node().children.length - 1;
return 'translate(-10,' + numLines * -6 + ')';
});
var bars = svg.selectAll('.bars').data(curData, function(d) { return d.name; })
.enter()
.append('g')
.attr('class', 'bars')
.attr('transform', function(d) {
return 'translate(100,' + y(d.name) + ')';
});
bars.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', function(d) { return x(d.data); })
.attr('height', y.rangeBand())
.style('fill', function(d,i) { return colors(i); });
bars.append('text')
.attr('x', function(d) {
var w = x(d.data);
if (w < 25)
return w + 12;
else
return w - 4;
})
.attr('y', y.rangeBand() / 2)
.attr('dy', '.35em')
.text(function(d) { return d.data; })
.style('fill', function(d) {
if (x(d.data) < 25) return 'black';
});
});
confusionSources = ['languages', 'd3', 'python', 'tableau'];
confusionSources.forEach(function(source) {
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment