Skip to content

Instantly share code, notes, and snippets.

@js418

js418/.block

Last active February 9, 2017 08:18
Show Gist options
  • Save js418/b6f6f251f77aff676922b78a13fd9dd3 to your computer and use it in GitHub Desktop.
Save js418/b6f6f251f77aff676922b78a13fd9dd3 to your computer and use it in GitHub Desktop.
Download ZIP
Educational Attainment of the Population over Genders
Raw
.block
license: mit
Raw
education_genders.csv
Education Male Female
None 405 473
1st - 4th grade 905 971
5th - 6th grade 1819 1688
7th - 8th grade 2029 2063
9th grade 1830 1921
10th grade 2250 2281
11th grade /2 5633 5391
High school graduate 36008 35646
Some college, no degree 22129 24084
Associate's degree, occupational 4486 5379
Associate's degree, academic 5233 7440
Bachelor's degree 22027 24488
Master's degree 8221 10462
Professional degree 1970 1407
Doctoral degree 2107 1504
Raw
index.html
<!DOCTYPE html>
<svg width="800" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 50, right: 20, bottom: 150, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["blue", "red"]);
d3.csv("education_genders.csv", function(d, i, columns) {
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1);
x0.domain(data.map(function(d) { return d.Education; }));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x0(d.Education) + ",0)"; })
.selectAll("rect")
.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect")
.attr("x", function(d) { return x1(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d) { return z(d.key); });
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");;
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
g.append("text")
.attr("x", 200)
.attr("y", 15)
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.text("male: mean = 7803.5, std = 10099.5, female: mean = 8346.5, std = 10486.8")
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) {return d;});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment