Treemap

A treemap of counties by state. Counties are colored green if they're growing and red if they're shrinking.

forked from emeeks's block: Treemap

<!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>

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

function cleanCensus(data){

packableData = nesting(data);

treemap(packableData);
}

function nesting(data) {

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

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

function treemap(data) {

var color = d3.scale.linear()
    .domain([0, 10000000])
    .range([ "green"]);

treemap = d3.layout.treemap();

treemap
  .size([940,500])
  .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(0,0)");

chartG.selectAll("rect")
  .data(treemapData)
  .enter()
  .append("rect")
  .attr("x", function (d) {return d.x})
  .attr("y", function (d) {return d.y})
  .attr("height", function (d) {return d.dy})
  .attr("width", function (d) {return d.dx})
  .style("fill", function (d) {return console.log(d.Gross);color(d.Gross);})
  .style("fill-opacity", function (d) {return d.leafColor ? 1 : .1})
  .style("stroke", function (d) {return d.leafColor ? d3.rgb(d.leafColor).darker() : "black"})

chartG.selectAll("text")
  .data(treemapData)
  .enter()
  .append("text")
  .attr("x", function (d) {return d.x})
  .attr("y", function (d) {return d.y + 15})
  .text(function (d) {return d.Title})

}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js