County Treemap I

A treemap of counties by state. Counties are colored in shades of green if they grew from 2010 to 2014 and shades of red if they shrunk in that same period. The shading is calculated using the minimum -13.50% and maximum 71.95% population growth rate across all counties in all states.

An iteration on the bl.ock Treemap from emeeks

<!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("PEP_2014_PEPANNRES_with_ann.csv", cleanCensus);

function cleanCensus(data){

var minChange = d3.min(data, function(county) {
    return (county["pop2014"] - county["pop2010"]) / county["pop2010"];
  })

console.log("minChange", minChange);
  
  var maxChange = d3.max(data, function(county) {
    return (county["pop2014"] - county["pop2010"]) / county["pop2010"];
  })

console.log("maxChange", maxChange);
  
  // a scale for generating values from 0 to 1 to use in our HSL color interpolators
  var colorLinearLoss = d3.scale.linear()
    .domain([minChange, 0])
    .range([1,0]);
  
  var colorLinearGrowth = d3.scale.linear()
    .domain([0, maxChange])
    .range([0,1]);
  
  //colors can be specified as any CSS color string
  var colorInterpolatorGrowth = d3.interpolateHsl("lightgray", "green");
  var colorInterpolatorLoss = d3.interpolateHsl("lightgray", "red");

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";

// set the color based on the rate of population change between 2010 and 2014
    // use a different color scale for positive rates (growth) and negative rates (loss)
    if(county["pop2014"] - county["pop2010"] > 0) {
      // "green"
      county.leafColor = colorInterpolatorGrowth(colorLinearGrowth((county["pop2014"] - county["pop2010"]) / county["pop2010"]))
    } else {
      // "red"
      county.leafColor = colorInterpolatorLoss(colorLinearLoss((county["pop2014"] - county["pop2010"]) / county["pop2010"]))
    }

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([500,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 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"})

chartG.selectAll("text")
  .data(treemapData.filter(function (d) {return d.depth === 1}))
  .enter()
  .append("text")
  .attr("x", function (d) {return d.x})
  .attr("y", function (d) {return d.y + 15})
  .text(function (d) {return d["key"] ? d["key"].substr(0, parseInt(d.dx / 8)) : ""})

}

</script>

https://d3js.org/d3.v3.min.js