New Mexico: Median Income

New Mexico: Median income data for 2015. The map displays the county information (name, median income, and income change rate) 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: Median Income, est. 2015, and income change rate.</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 nmMedInc2015 = d3.map();
var nmMedIncChng = 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);

var colorInc = d3.scaleThreshold()
    .domain([20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000])
    .range(d3.schemeGreens[8]);

// 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([-15, -10, -5, -2, 0, 2, 5, 10, 15])
    .range(d3.schemeRdBu[9]);

var x = d3.scaleLinear()
    .domain([-15, 15])
    .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("Median income 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-MedInc-C.csv", function(d){
        nmMedInc2015.set(d.id, +d.medInc2015est);
        nmMedIncChng.set(d.id, +d.miChng);
    })
    .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 colorInc(d.nmMedInc2015 = nmMedInc2015.get(d.properties.GEOID)) })
    .style("stroke", "white")
    .on('mouseover', function(d){
      var label = "County: " + d.properties.NAME + ", $" + fDecCom(d.nmMedInc2015);
      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.nmMedInc2015); });

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.nmMedIncChng = nmMedIncChng.get(d.properties.GEOID)) })
    .style("stroke", "white")
    .on('mouseover', function(d){
      var label = "County: " + d.properties.NAME + ", " + fDecCom(d.nmMedIncChng) + "%";
      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.nmMedIncChng) + "%"; });

}
</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