js418 · February 9, 2017 17:41
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/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","25-34","35-54","55+"];
 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,195]);
  })

  //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 * 200) + "," + (d.y * 200) + ")" });

  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", 200)
    .attr("width", 200);

    //label
    d3.select(this).append("text")
    .attr("x", 100)
    .style("text-anchor", "middle")
    .attr("y", 15)
    .attr("font-size", 15)
    .text(matrix.a + " vs " + 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 195 - scale[matrix.b](d[matrix.b])})
  })


 }

 </script>
 </body>
 </html>
diff --git a/year school_races.csv b/year school_races.csv
	<!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","25-34","35-54","55+"];
	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,195]);
	})

	//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 * 200) + "," + (d.y * 200) + ")" });

	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", 200)
	.attr("width", 200);

	//label
	d3.select(this).append("text")
	.attr("x", 100)
	.style("text-anchor", "middle")
	.attr("y", 15)
	.attr("font-size", 15)
	.text(matrix.a + " vs " + 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 195 - scale[matrix.b](d[matrix.b])})
	})


	}

	</script>
	</body>
	</html>
education	All	Males	Females	25-34	35-54	55+	White	Non-His White	Black	Asian	Hispanic
Less than 1 year, no diploma	0.40000000000000002	0.40000000000000002	0.40000000000000002	0.20000000000000001	0.40000000000000002	0.5	0.29999999999999999	0.10000000000000001	0.29999999999999999	1.1000000000000001	1.3999999999999999
1st-4th grade, no diploma	0.80000000000000004	0.90000000000000002	0.80000000000000004	0.5	0.69999999999999996	1.2	0.80000000000000004	0.20000000000000001	0.59999999999999998	1.3	3.8999999999999999
5th-6th grade, no diploma	1.6000000000000001	1.7	1.5	1.0	1.8	1.7	1.7	0.29999999999999999	0.90000000000000002	1.8999999999999999	8.4000000000000004
7th-8th grade, no diploma	1.8	1.8999999999999999	1.8	1.0	1.5	2.5	1.8999999999999999	1.2	1.5	1.8	5.0999999999999996
9th grade, no diploma	1.6000000000000001	1.6000000000000001	1.6000000000000001	1.5	1.7	1.6000000000000001	1.7	0.90000000000000002	1.3	1.1000000000000001	5.2999999999999998
10th grade, no diploma	1.8	1.8999999999999999	1.8	1.5	1.6000000000000001	2.2000000000000002	1.7	1.5	2.7000000000000002	1.3999999999999999	3.0
11th grade, no diploma	2.0	2.1000000000000001	2.0	2.2000000000000002	1.8999999999999999	2.1000000000000001	1.8999999999999999	1.6000000000000001	3.3999999999999999	1.0	3.3999999999999999
12th grade, no diploma	1.3999999999999999	1.5	1.3999999999999999	1.6000000000000001	1.3999999999999999	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	0.0	0.0	0.0	0.0	0.0
1st-4th grade, GED	0.0	0.0	0.0	0.0	0.0	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.0	0.0	0.0	0.0	0.0	0.10000000000000001
7th-8th grade, GED	0.20000000000000001	0.20000000000000001	0.10000000000000001	0.10000000000000001	0.10000000000000001	0.20000000000000001	0.20000000000000001	0.20000000000000001	0.10000000000000001	0.0	0.20000000000000001
9th grade, GED	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.20000000000000001	0.0	0.29999999999999999
10th grade, GED	0.80000000000000004	0.90000000000000002	0.69999999999999996	0.80000000000000004	0.80000000000000004	0.80000000000000004	0.80000000000000004	0.90000000000000002	0.69999999999999996	0.10000000000000001	0.59999999999999998
11th grade, GED	1.0	1.2	0.80000000000000004	1.1000000000000001	1.1000000000000001	0.90000000000000002	1.0	1.0	1.3	0.20000000000000001	1.0
12th grade, GED	0.59999999999999998	0.69999999999999996	0.59999999999999998	0.69999999999999996	0.69999999999999996	0.5	0.59999999999999998	0.5	0.80000000000000004	0.5	0.90000000000000002
High school diploma	26.5	27.100000000000001	26.0	22.5	24.899999999999999	30.100000000000001	26.600000000000001	26.5	31.0	18.199999999999999	26.699999999999999
Less than 1 year college, no degree	2.5	2.3999999999999999	2.5	2.7000000000000002	2.2000000000000002	2.6000000000000001	2.5	2.7000000000000002	2.6000000000000001	1.1000000000000001	1.8999999999999999
One year of college, no degree	5.2999999999999998	5.0	5.5	5.5999999999999996	5.0	5.2999999999999998	5.2999999999999998	5.4000000000000004	6.4000000000000004	1.8999999999999999	4.5
Two years of college, no degree	6.5	6.5	6.4000000000000004	6.7999999999999998	6.2999999999999998	6.4000000000000004	6.2999999999999998	6.4000000000000004	8.4000000000000004	4.5999999999999996	5.7000000000000002
Three years of college, no degree	1.7	1.8	1.7	2.2999999999999998	1.6000000000000001	1.6000000000000001	1.7	1.7	2.2999999999999998	1.2	1.5
Four or more years of college, no degree	0.69999999999999996	0.80000000000000004	0.59999999999999998	1.1000000000000001	0.69999999999999996	0.5	0.69999999999999996	0.69999999999999996	0.80000000000000004	0.69999999999999996	0.69999999999999996
Less than 1 year college, vocational/associates	0.29999999999999999	0.20000000000000001	0.29999999999999999	0.29999999999999999	0.20000000000000001	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.20000000000000001	0.0	0.20000000000000001
One year of college, vocational/associates	0.59999999999999998	0.5	0.59999999999999998	0.59999999999999998	0.59999999999999998	0.5	0.59999999999999998	0.59999999999999998	0.59999999999999998	0.40000000000000002	0.59999999999999998
Two years of college, vocational/associates	2.7000000000000002	2.6000000000000001	2.7999999999999998	2.6000000000000001	2.8999999999999999	2.5	2.7000000000000002	2.8999999999999999	2.7999999999999998	1.6000000000000001	1.8
Three years of college, vocational/associates	0.40000000000000002	0.40000000000000002	0.40000000000000002	0.5	0.5	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.40000000000000002	0.40000000000000002	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.10000000000000001	0.10000000000000001	0.10000000000000001	0.10000000000000001	0.10000000000000001	0.0	0.10000000000000001	0.10000000000000001
One year of college, academic/associates	0.29999999999999999	0.29999999999999999	0.40000000000000002	0.29999999999999999	0.29999999999999999	0.29999999999999999	0.40000000000000002	0.40000000000000002	0.29999999999999999	0.10000000000000001	0.29999999999999999
Two years of college, academic/associates	3.7000000000000002	3.1000000000000001	4.2000000000000002	3.7000000000000002	4.0999999999999996	3.2999999999999998	3.7000000000000002	3.8999999999999999	3.8999999999999999	2.7000000000000002	2.6000000000000001
Three years of college, academic/associates	0.80000000000000004	0.69999999999999996	0.90000000000000002	1.0	0.80000000000000004	0.69999999999999996	0.80000000000000004	0.80000000000000004	0.69999999999999996	0.59999999999999998	0.59999999999999998
Four or more years of college, academic/associates	0.69999999999999996	0.59999999999999998	0.69999999999999996	0.90000000000000002	0.69999999999999996	0.5	0.69999999999999996	0.69999999999999996	0.59999999999999998	0.40000000000000002	0.40000000000000002
Bachelors degree	20.5	20.300000000000001	20.699999999999999	25.300000000000001	21.899999999999999	16.899999999999999	20.699999999999999	22.699999999999999	14.300000000000001	32.5	10.800000000000001
Master's degree /2	8.6999999999999993	8.0	9.4000000000000004	8.3000000000000007	9.4000000000000004	8.3000000000000007	8.6999999999999993	9.8000000000000007	6.5999999999999996	14.4	3.5
Professional degree	1.6000000000000001	1.8999999999999999	1.3	1.3999999999999999	1.6000000000000001	1.7	1.7	1.8999999999999999	0.80000000000000004	2.7000000000000002	0.69999999999999996
Doctorate degree	1.7	2.1000000000000001	1.3999999999999999	1.2	1.8	1.8999999999999999	1.7	1.8999999999999999	0.80000000000000004	4.2999999999999998	0.5