New Mexico: Change in population

New Mexico: Change in population (2013 vs 2016) since 2010 census. The map displays the county information (name and percentage of change), and the year of the census on mouseover. I am also using Mike Bostock's Choropleth example to fill colors and recreate the threshold scale.

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<body>
<div id="header"><hdr>New Mexico: Change in population (2013 vs 2016) since 2010 census.</hdr></div>
<div id="cont">
	<div id="area1">
	</div>
	<div id="area2">
	</div>
  <div id="bottomA"></div>
</div>
<div id="info"><maxT id="label"></maxT></div>

var nmPopChange2013 = d3.map();
var nmPopChange2016 = d3.map();

var svg = d3.select("#bottomA").append("svg")
    .attr("width", width * 2)
    .attr("height", 64 );

var svg1 = d3.select("#area1").append("svg")
    .attr("width", width)
    .attr("height", height);

var svg2 = d3.select("#area2").append("svg")
    .attr("width", width)
    .attr("height", height);

var projection = d3.geoAlbersUsa()
    .scale(width * 9)
    .translate([width * 1.72, -width/10]);

var path = d3.geoPath()
    .projection(projection);

// Using Mike Bostock's Choropleth example to fill colors and recreate the
// threshold scale: https://bl.ocks.org/mbostock/4060606
var color = d3.scaleThreshold()
    .domain([-8, -6, -4, -2, 0, 2, 4, 6, 8])
    .range(d3.schemeRdBu[9]);

var x = d3.scaleLinear()
    .domain([-8, 8])
    .rangeRound([360,520]);

var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0, 30)");

var fDecCom = d3.format(",.2f");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

g.append("text")
  .attr("class", "caption")
  .attr("x", x.range()[0])
  .attr("y", -6)
  .attr("fill", "#000")
  .attr("text-anchor", "start")
  .attr("font-weight", "bold")
  .text("Population change rate");

g.call(d3.axisBottom(x)
  .tickSize(13)
  .tickFormat(function(x, i) { return i ? x : x + "%"; })
  .tickValues(color.domain()))
  .select(".domain")
  .remove();

d3.queue()
    .defer(d3.json, "nmNMod.json")
    .defer(d3.csv, "NM-Popul-C.csv", function(d){
        nmPopChange2013.set(d.id, +d.chng2013);
        nmPopChange2016.set(d.id, +d.chng2016);
    })
    .await(plotting);

function plotting(error, data){
  if(error) throw error;

svg1.selectAll('path')
    .data(topojson.feature(data, data.objects.cb_2015_new_mexico_county_20m).features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr("fill", function(d) { return color(d.nmPopChange2013 = nmPopChange2013.get(d.properties.GEOID)) })
    .style("stroke", "white")
    .on('mouseover', function(d){
      var label = "County: " + d.properties.NAME + ", " + fDecCom(d.nmPopChange2013) + "%";
      return document.getElementById("label").innerHTML=label;
    })
    .on('mouseout', function(d){
      var label = "";
      return document.getElementById("label").innerHTML=label;
    })
    .append("title")
      .text(function(d) { return d.properties.NAME + ", " + fDecCom(d.nmPopChange2013) + "%"; });

svg2.selectAll('path')
    .data(topojson.feature(data, data.objects.cb_2015_new_mexico_county_20m).features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr("fill", function(d) { return color(d.nmPopChange2016 = nmPopChange2016.get(d.properties.GEOID)) })
    .style("stroke", "white")
    .on('mouseover', function(d){
      var label = "County: " + d.properties.NAME + ", " + fDecCom(d.nmPopChange2016) + "%";
      return document.getElementById("label").innerHTML=label;
    })
    .on('mouseout', function(d){
      var label = "";
      return document.getElementById("label").innerHTML=label;
    })
    .append("title")
      .text(function(d) { return d.properties.NAME + ", " + fDecCom(d.nmPopChange2016) + "%"; });

svg1.on("mouseover",function(){ d3.select("text").text("Population change rate - 2013"); });
  svg1.on("mouseout",function(){ d3.select("text").text("Population change rate"); });
  svg2.on("mouseover",function(){ d3.select("text").text("Population change rate - 2016"); });
  svg2.on("mouseout",function(){ d3.select("text").text("Population change rate"); });
}
</script>
</body>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/topojson.v2.min.js to a secure url

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

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/topojson.v2.min.js