D3 Examples - relief of US plus boundary

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
  /* Style here... */
  path#USI {
    fill: none;
    stroke: #000;
stroke-width:2;
  }
  image.bg {
    opacity: .5;
  }
</style>
​
<div></div>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script>
  var width = 1000,
      height = 430;
​
  var projection = d3.geo.albers()
        .rotate([95.8,.2])
    .scale(937)
    .translate([width / 2, height / 2]);
​
  var path = d3.geo.path()
    .projection(projection);
​
  var svg = d3.select("body").append("svg")
    .attr("class", "map")
    .attr("width", width)
    .attr("height", height);
​
  d3.json("usborder.json", function(error, data) {
    var us = topojson.object(data, data.objects.usborder);
​
    svg.append("image")
      //.attr("clip-path", "url(#clip)")
      .attr("xlink:href", "usael.png")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bg");
​
    svg.selectAll(".cr-subunit")
      .data(us.geometries)
    .enter().append("path")
      .attr("id", function(d) { return "USI"; })
      .attr("d", path);
​
    svg.append("clipPath")
      .attr("id", "clip")
    .append("use")
      .attr("xlink:href", "#USI");
​
    svg.append("image")
      .attr("clip-path", "url(#clip)")
      .attr("xlink:href", "usael.png")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "fg");
  });
​
  // Script here...
</script>
​
    