emeeks · March 16, 2016 15:37
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html

 <!DOCTYPE html>

 <head>
  <title>County Treemap</title>
 </head>
 <meta charset="utf-8">
 <style>

 svg {
  height: 500px;
  width: 1000px;
 }

 </style>
 <body>
 <div id="viz">
 <svg></svg>
 </div>
 </body>


 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
 <script>

 d3.csv("PEP_2014_PEPANNRES_with_ann.csv", cleanCensus);

 function cleanCensus(data){
  data.forEach(function (county) {
    county.name = county.label.split(", ")[0]
    county.state = county.label.split(", ")[1]
    county.pop = parseInt(county["pop2014"]);
    county.trend = county["pop2014"] - county["pop2010"] > 0 ? "growth" : "loss";
    county.leafColor = county["pop2014"] - county["pop2010"] > 0 ? "green" : "red";
    county.leafData = parseInt(county["pop2014"]);
  })

  packableData = nesting(data);

  treemap(packableData);
 }

 function nesting(data) {

    nestedData = d3.nest()
    .key(function (d) {
      return d.state;
    })
    .key(function (d) {
      return d.trend
    })
    .entries(data);

  return packableData = {id: "root", key: "root", values: nestedData}
 }

  function treemap(data) {

  treemap = d3.layout.treemap();

  treemap
  .size([200,200])
  .children(function(d) {return d["values"]})
  .padding(function (d) {return d["values"] ? 2 : 1})
  .value(function(d) {return d.leafData ? d.leafData : 1})

  treemapData = treemap(data);

  var chartG = d3.select("svg")
    .append("g")
    .attr("class", "dendrogram")
    .attr("transform", "translate(250,250)");

  chartG.selectAll("path")
  .data(treemapData)
  .enter()
  .append("path")
  .attr("d", function (d) {
    var arc = d3.svg.arc()
    .innerRadius(d.y + 20)
    .outerRadius(d.y + d.dy + 20);

    var angles = {startAngle: (d.x / 200) * Math.PI * 2, endAngle: ((d.x + d.dx)/200) * Math.PI * 2};
    return arc(angles)
  })
  .style("fill", function (d) {return d.leafColor ? d.leafColor : "grey"})
  .style("fill-opacity", function (d) {return d.leafColor ? 1 : .1})
  .style("stroke", function (d) {return d.leafColor ? d3.rgb(d.leafColor).darker() : "black"})


 }

 </script>
diff --git a/PEP_2014_PEPANNRES_with_ann.csv b/PEP_2014_PEPANNRES_with_ann.csv
diff --git a/thumbnail.png b/thumbnail.png

	<!DOCTYPE html>

	<head>
	<title>County Treemap</title>
	</head>
	<meta charset="utf-8">
	<style>

	svg {
	height: 500px;
	width: 1000px;
	}

	</style>
	<body>
	<div id="viz">
	<svg></svg>
	</div>
	</body>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
	<script>

	d3.csv("PEP_2014_PEPANNRES_with_ann.csv", cleanCensus);

	function cleanCensus(data){
	data.forEach(function (county) {
	county.name = county.label.split(", ")[0]
	county.state = county.label.split(", ")[1]
	county.pop = parseInt(county["pop2014"]);
	county.trend = county["pop2014"] - county["pop2010"] > 0 ? "growth" : "loss";
	county.leafColor = county["pop2014"] - county["pop2010"] > 0 ? "green" : "red";
	county.leafData = parseInt(county["pop2014"]);
	})

	packableData = nesting(data);

	treemap(packableData);
	}

	function nesting(data) {

	nestedData = d3.nest()
	.key(function (d) {
	return d.state;
	})
	.key(function (d) {
	return d.trend
	})
	.entries(data);

	return packableData = {id: "root", key: "root", values: nestedData}
	}

	function treemap(data) {

	treemap = d3.layout.treemap();

	treemap
	.size([200,200])
	.children(function(d) {return d["values"]})
	.padding(function (d) {return d["values"] ? 2 : 1})
	.value(function(d) {return d.leafData ? d.leafData : 1})

	treemapData = treemap(data);

	var chartG = d3.select("svg")
	.append("g")
	.attr("class", "dendrogram")
	.attr("transform", "translate(250,250)");

	chartG.selectAll("path")
	.data(treemapData)
	.enter()
	.append("path")
	.attr("d", function (d) {
	var arc = d3.svg.arc()
	.innerRadius(d.y + 20)
	.outerRadius(d.y + d.dy + 20);

	var angles = {startAngle: (d.x / 200) * Math.PI * 2, endAngle: ((d.x + d.dx)/200) * Math.PI * 2};
	return arc(angles)
	})
	.style("fill", function (d) {return d.leafColor ? d.leafColor : "grey"})
	.style("fill-opacity", function (d) {return d.leafColor ? 1 : .1})
	.style("stroke", function (d) {return d.leafColor ? d3.rgb(d.leafColor).darker() : "black"})


	}

	</script>