Skip to content

Instantly share code, notes, and snippets.

@js418

js418/.block

Last active February 9, 2017 19:46
Show Gist options
  • Save js418/07e73a4e0ed8073df376f416974296fb to your computer and use it in GitHub Desktop.
Save js418/07e73a4e0ed8073df376f416974296fb to your computer and use it in GitHub Desktop.
Download ZIP
Educational Attainment of the Population over Ages
Raw
.block
license: mit
Raw
education_ages.csv
x 18 to 24 years 25 to 29 years 30 to 34 years 35 to 39 years 40 to 44 years 45 to 49 years 50 to 54 years 55 to 59 years 60 to 64 years 65 to 69 years 70 to 74 years 75 years and over
None 68 38 46 86 71 78 71 58 49 92 40 178
1st - 4th grade 85 70 137 122 135 105 193 169 174 171 137 377
5th - 6th grade 103 189 237 422 376 351 322 326 274 248 220 439
7th - 8th grade 201 199 238 292 356 306 316 362 293 306 302 920
9th grade 318 265 398 401 317 345 325 266 247 192 203 475
10th grade 632 324 335 305 287 352 401 344 300 279 355 617
11th grade /2 3670 844 773 698 631 644 765 779 564 450 412 793
High school graduate 9079 5690 5275 5134 5201 5947 6872 6710 5832 4867 3829 7219
Some college, no degree 11049 4259 3683 3228 3202 3163 3500 3613 3308 2743 1860 2604
Associate's degree, occupational 701 949 953 856 927 951 1053 1035 864 660 390 526
Associate's degree, academic 969 1248 1327 1194 1197 1183 1373 1264 1096 792 451 580
Bachelor's degree 3016 5889 4970 4457 4523 4499 4594 3948 3537 2801 1716 2565
Master's degree 212 1492 2068 2002 1995 1982 1783 1841 1770 1477 907 1155
Professional degree 12 214 371 316 382 347 309 325 361 278 174 288
Doctoral degree 2 198 327 404 402 309 354 380 329 371 215 320
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>table1_all_ages</title>
</head>
<svg width="900" height="1500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, 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 + ")");
margin1 = {top: 200, right: 20, bottom: 150, left: 40},
g2 = svg.append("g").attr("transform", "translate(" + margin1.left + "," + (margin1.top+height/3) + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height/3, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00","#E6D955","#EFF757","#BAF757","#5FF757","#57F7A2","#57F7C7","#57D5F7","#5F57F7"]);
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y1 = d3.scaleLinear()
.rangeRound([height/3, 0]);
d3.csv("education_ages.csv", function(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1);
//data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.x; }));
x0.domain(data.map(function(d) { return d.x; }));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
y1.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();
z.domain(keys);
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.x); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height/3 + ")")
.call(d3.axisBottom(x))
.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");
g2.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x0(d.x) + ",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 y1(d.value); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height/3 - y1(d.value); })
.attr("fill", function(d) { return z(d.key); });
g2.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height/3 + ")")
.call(d3.axisBottom(x0))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)")
g2.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y1).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y1(y1.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
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; });
svg.append("text")
.attr("x", (width + (margin.left + margin.right) )/ 2-10)
.attr("y", 0 + margin.top)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-family", "sans-serif")
.text("Educational Attainment of the Population over Ages");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment