d3 topojson clip-path issue

Question

I am having issues with rendering a USA map that I put inside of a clipPath element (in order to make everything outside of the USA invisible). The clipping works correctly; however, the svg path that forms the clip-path is not displaying. Here is the relevant code:

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

  svg.append("g")
      .append("path")
      .attr("class", "states")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

  svg.append("clipPath")
      .attr("id", "usaClip")
      .append("path")
      .attr("class", "usa-border")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a === b; })));

  svg.append("rect")
      .attr("clip-path", "url(#usaClip)")
      .attr("x", 460)
      .attr("y", 0)
      .attr("height", 600)
      .attr("width", 40)
      .attr("fill", "black")

});

A demo of this issue can be found here: https://bl.ocks.org/zivvers/dd70e5e586cf63cc7c86e7a115a8a536

Thanks!