Two vector tile layers (OSP)

Thanks to Mike Bostock for this working like it should. I'm a newb, all hail the proper authority.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
}

path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.major_road { stroke: #776; }
.minor_road { stroke: #ccb; }
.highway { stroke: #f39; stroke-width: 1.5px; }
.rail { stroke: #7de; }
.buildings path { stroke: none; fill: black; }

#b64f7d7601a,
#bd3209ad51a,
#bff56a6b381,
#b4458cf32fe
  {
	fill: rgb(154, 150, 140);
}

#bca789516cf,
#be32d6d5c03,
#b8c94f28f5b,
#b9850d204b3,
#b8713e3cbb9	{
	fill: rgb(196, 17, 47);
}

#b6db2362cbd,
#b60a3ac9b29,
#b6db2362cbd,
#b2783b2ea95,
#b680b648540,
#b7297748f0a	{
	fill: rgb(250, 165, 24);
}

</style>
<body>

var width = Math.max(960, window.innerWidth),
    height = Math.max(500, window.innerHeight);

var tiler = d3.geo.tile()
    .size([width, height]);

var projection = d3.geo.mercator()
    .center([-95.781169, 34.954749])
    .scale((1 << 24) / 2 / Math.PI)
    .translate([width / 2, height / 2]);

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

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(renderTiles, "highroad")
    .call(renderTiles, "buildings");
    
    var x = 2 * width / 3,
    	y = 3 * height / 4;
    
	svg.append("text").attr("class", "label").attr("x", x).attr("y", y).text("Level of damage to buildings").style("font-weight", "bold");

//completely destroyed
	svg.append("rect").attr("x", x).attr("y", y + 15).attr("height", 12).attr("width", 12).style("fill", "rgb(196, 17, 47)").attr("stroke", "black");
	svg.append("text").attr("class", "label").attr("x", x + 15).attr("y", y + 25).style("text-anchor", "start").text("Complete Damage");

//partially destroyed
	svg.append("rect").attr("x", x).attr("y",  y + 35).attr("height", 12).attr("width", 12).style("fill", "rgb(250, 165, 24)").attr("stroke", "black");
	svg.append("text").attr("class", "label").attr("x", x + 15).attr("y", y + 45).style("text-anchor", "start").text("Partial Damage");
			
	//minor damage
	svg.append("rect").attr("x", x).attr("y", y + 55).attr("height", 12).attr("width", 12).style("fill", "rgb(154, 150, 140)").attr("stroke", "black");
	svg.append("text").attr("class", "label").attr("x", x + 15).attr("y", y + 65).style("text-anchor", "start").text("Minor Damage");

</script>

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

Modified http://d3js.org/d3.geo.tile.v0.min.js to a secure url

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

https://d3js.org/d3.geo.tile.v0.min.js