Skip to content

Instantly share code, notes, and snippets.

@js418

js418/.block

Last active February 9, 2017 16:23
Show Gist options
  • Save js418/c41b81348cac3ca84a3db2743526ebc6 to your computer and use it in GitHub Desktop.
Save js418/c41b81348cac3ca84a3db2743526ebc6 to your computer and use it in GitHub Desktop.
Download ZIP
Correlation matrix for education attainment over races
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Correlation Matrix</title>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #000;
stroke-width: 1.5px;
opacity: 0.4;
marker-end: url(#end-arrow);
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script>
//These attributes could be derived from the data
attributes = ["All","White","Non-His White","Black","Asian","Hispanic"];
attributeMatrix = [];
attributes.forEach(function (a, x) {
attributes.forEach(function (b, y) {
//create an n-by-n matrix based on pairs of attributes
attributeMatrix.push({a: a, b: b, x: x, y: y})
})
})
colors = d3.scale.category20();
d3.csv("year school_races.csv", small_scatterplots);
d3.select("body").append("svg").attr("height", 1000).attr("width", 1000);
function small_scatterplots(data) {
//d3.csv pulls in data as strings so they need to be formatted as numbers
data.forEach(function (d) {
attributes.forEach(function (att) {
d[att] = parseFloat(d[att])
})
})
//create scales dynamically for each attribute's extent
scale = {};
attributes.forEach(function (att) {
scale[att] = d3.scale.linear();
attExtent = d3.extent(data, function (d) {return d[att]});
scale[att].domain(attExtent).range([5,115]);
})
//bind the matrix array to a grid of g elements
d3.select("svg")
.selectAll("g")
.data(attributeMatrix)
.enter()
.append("g")
.attr("transform", function (d) {return "translate(" + (d.x * 120) + "," + (d.y * 120) + ")" });
d3.selectAll("g")
.each(function (matrix, i) {
//index i is only used for coloring
//background/border
d3.select(this).append("rect").style("fill", "white").style("stroke", "black").style("stroke-width", 1)
.attr("height", 120)
.attr("width", 120);
//label
d3.select(this).append("text")
.attr("x", 60)
.style("text-anchor", "middle")
.attr("y", 15)
.attr("font-size", 10)
.text(matrix.a + " - " + matrix.b);
//scatterplot points
d3.select(this).selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 2)
.style("fill", colors(i))
.attr("cx", function (d) {return scale[matrix.a](d[matrix.a])})
.attr("cy", function (d) {return 115 - scale[matrix.b](d[matrix.b])})
})
}
</script>
</body>
</html>
Raw
year school_races.csv
education All White Non-His White Black Asian Hispanic
Less than 1 year, no diploma 0.40000000000000002 0.29999999999999999 0.10000000000000001 0.29999999999999999 1.1000000000000001 1.3999999999999999
1st-4th grade, no diploma 0.80000000000000004 0.80000000000000004 0.20000000000000001 0.59999999999999998 1.3 3.8999999999999999
5th-6th grade, no diploma 1.6000000000000001 1.7 0.29999999999999999 0.90000000000000002 1.8999999999999999 8.4000000000000004
7th-8th grade, no diploma 1.8 1.8999999999999999 1.2 1.5 1.8 5.0999999999999996
9th grade, no diploma 1.6000000000000001 1.7 0.90000000000000002 1.3 1.1000000000000001 5.2999999999999998
10th grade, no diploma 1.8 1.7 1.5 2.7000000000000002 1.3999999999999999 3.0
11th grade, no diploma 2.0 1.8999999999999999 1.6000000000000001 3.3999999999999999 1.0 3.3999999999999999
12th grade, no diploma 1.3999999999999999 1.3 1.0 2.2000000000000002 1.3 3.0
Less than 1 year, GED 0.0 0.0 0.0 0.0 0.0 0.0
1st-4th grade, GED 0.0 0.0 0.0 0.10000000000000001 0.0 0.10000000000000001
5th-6th grade, GED 0.0 0.0 0.0 0.0 0.0 0.10000000000000001
7th-8th grade, GED 0.20000000000000001 0.20000000000000001 0.20000000000000001 0.10000000000000001 0.0 0.20000000000000001
9th grade, GED 0.29999999999999999 0.29999999999999999 0.29999999999999999 0.20000000000000001 0.0 0.29999999999999999
10th grade, GED 0.80000000000000004 0.80000000000000004 0.90000000000000002 0.69999999999999996 0.10000000000000001 0.59999999999999998
11th grade, GED 1.0 1.0 1.0 1.3 0.20000000000000001 1.0
12th grade, GED 0.59999999999999998 0.59999999999999998 0.5 0.80000000000000004 0.5 0.90000000000000002
High school diploma 26.5 26.600000000000001 26.5 31.0 18.199999999999999 26.699999999999999
Less than 1 year college, no degree 2.5 2.5 2.7000000000000002 2.6000000000000001 1.1000000000000001 1.8999999999999999
One year of college, no degree 5.2999999999999998 5.2999999999999998 5.4000000000000004 6.4000000000000004 1.8999999999999999 4.5
Two years of college, no degree 6.5 6.2999999999999998 6.4000000000000004 8.4000000000000004 4.5999999999999996 5.7000000000000002
Three years of college, no degree 1.7 1.7 1.7 2.2999999999999998 1.2 1.5
Four or more years of college, no degree 0.69999999999999996 0.69999999999999996 0.69999999999999996 0.80000000000000004 0.69999999999999996 0.69999999999999996
Less than 1 year college, vocational/associates 0.29999999999999999 0.29999999999999999 0.29999999999999999 0.20000000000000001 0.0 0.20000000000000001
One year of college, vocational/associates 0.59999999999999998 0.59999999999999998 0.59999999999999998 0.59999999999999998 0.40000000000000002 0.59999999999999998
Two years of college, vocational/associates 2.7000000000000002 2.7000000000000002 2.8999999999999999 2.7999999999999998 1.6000000000000001 1.8
Three years of college, vocational/associates 0.40000000000000002 0.40000000000000002 0.5 0.5 0.20000000000000001 0.29999999999999999
Four or more years of college, vocational/associates 0.40000000000000002 0.40000000000000002 0.40000000000000002 0.29999999999999999 0.29999999999999999 0.29999999999999999
Less than 1 year college, academic/associates 0.10000000000000001 0.10000000000000001 0.10000000000000001 0.0 0.10000000000000001 0.10000000000000001
One year of college, academic/associates 0.29999999999999999 0.40000000000000002 0.40000000000000002 0.29999999999999999 0.10000000000000001 0.29999999999999999
Two years of college, academic/associates 3.7000000000000002 3.7000000000000002 3.8999999999999999 3.8999999999999999 2.7000000000000002 2.6000000000000001
Three years of college, academic/associates 0.80000000000000004 0.80000000000000004 0.80000000000000004 0.69999999999999996 0.59999999999999998 0.59999999999999998
Four or more years of college, academic/associates 0.69999999999999996 0.69999999999999996 0.69999999999999996 0.59999999999999998 0.40000000000000002 0.40000000000000002
Bachelors degree 20.5 20.699999999999999 22.699999999999999 14.300000000000001 32.5 10.800000000000001
Master's degree /2 8.6999999999999993 8.6999999999999993 9.8000000000000007 6.5999999999999996 14.4 3.5
Professional degree 1.6000000000000001 1.7 1.8999999999999999 0.80000000000000004 2.7000000000000002 0.69999999999999996
Doctorate degree 1.7 1.7 1.8999999999999999 0.80000000000000004 4.2999999999999998 0.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment