JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<!DOCTYPE html>
<style>

.states {
  fill: none;
  stroke: black;
}

.usa-border {
  fill: blue;
  stroke: red;
  stroke-width: 5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var svg = d3.select("svg");

var path = d3.geoPath();

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; })));

  // this border and it's fill does not display!
  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; })));
  
  // rect is clipped correctly
  svg.append("rect")
      .attr("clip-path", "url(#usaClip)")
      .attr("x", 460)
      .attr("y", 0)
      .attr("height", 600)
      .attr("width", 40)
      .attr("fill", "black")

});

</script>