As a mathematics student I found this visualization funny. I wanted to implement it.
It is extracted from the book Information is Beautiful.
data: MIT/Wellesley College magazine, Counterpoint (2001)
As a mathematics student I found this visualization funny. I wanted to implement it.
It is extracted from the book Information is Beautiful.
data: MIT/Wellesley College magazine, Counterpoint (2001)
subject | percent | |
---|---|---|
Studio Art | 0 | |
Anthropology | 0.20 | |
Neuroscience | 0.25 | |
Art History | 0.37 | |
Computer Science | 0.40 | |
Spanish | 0.43 | |
English | 0.50 | |
French | 0.50 | |
Philosophy | 0.57 | |
History | 0.62 | |
Economics | 0.65 | |
Undecided | 0.68 | |
Psychology | 0.70 | |
International relations | 0.71 | |
Biology | 0.72 | |
Political Science | 0.73 | |
Biochemistry | 0.83 | |
Mathematics | 0.83 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.x.axis text { | |
fill: #474747; | |
font-size: 15px; | |
} | |
.y.axis { | |
display: none; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 70, right: 20, bottom: 30, left: 20}, | |
width = 400 - margin.left - margin.right, | |
height = 800 - margin.top - margin.bottom; | |
var percentFormat = d3.format("%"); | |
var x = d3.scale.linear() | |
.rangeRound([0, width]); | |
var y = d3.scale.ordinal() | |
.rangeRoundBands([0, height], .3); | |
var xAxisTop = d3.svg.axis() | |
.scale(x) | |
.tickValues([0,0.5,1]) | |
.tickFormat(percentFormat) | |
.orient("top"); | |
var xAxisBottom = d3.svg.axis() | |
.scale(x) | |
.tickValues([0,0.5,1]) | |
.tickFormat(percentFormat) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.ticks(1) | |
.orient("left"); | |
var color = d3.scale.ordinal() | |
.range(["#8dd3c7","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#b3b3b3","#bc80bd","#e5c494"]); | |
var svg = d3.select('body').append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("data.csv", function(error, data) { | |
x.domain([0,1]); | |
y.domain(data.map(function(d) { return d.subject; })); | |
var bar = svg.selectAll(".bar") | |
.data(data) | |
.enter().append("g"); | |
bar.append("rect") | |
.attr("x", function(d) { return x(0); }) | |
.attr("y", function(d) { return y(d.subject); }) | |
.attr("width", function(d) { return x(+d.percent); }) | |
.attr("height", y.rangeBand()) | |
.style("fill",function(d) { return color(d.subject); }); | |
bar.append("text") | |
.attr("x", x(0.01)) | |
.attr("y", function(d) { return y(d.subject) + y.rangeBand()/2 + 3; }) | |
.style("fill", function(d,i) { return i === 0 ? "#474747" : "#fff"; }) | |
.text(function(d) { return d.subject; }); | |
svg.append("g") | |
.attr("class", "x axis") | |
.call(xAxisTop) | |
.append("text") | |
.attr("y", -40) | |
.attr("x", -10) | |
.style("text-anchor", "begin") | |
.style('font-weight','bold') | |
.text("% virgin student by university subject"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxisBottom); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
}); | |
d3.select(self.frameElement).style("height", height + margin.top + margin.bottom + "px"); | |
</script> |