JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

<style> .counties {
  fill: white;
  stroke: #7887AB;
  stroke-width: .1px;
}

.county-borders {
  fill: none;
  stroke: #F0F8FF;
  stroke-width: .1px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.state-borders {
  fill: none;
  stroke: #162955;
  stroke-width: .15px;
  opacity: .4;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

</style>

JavaScript

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var margin = d3.map();

var projection = d3.geoMercator(); //Added from block

var path = d3.geoPath()
  .projection(null); //Added from block

var x = d3.scaleLinear()
  .domain([1, 10])
  .rangeRound([500, 860]);

var color = d3.scaleThreshold()
  .domain(d3.range(2, 10))
  .range(d3.schemeBlues[9]);

var g = svg.append("g")
  .attr("class", "key")
  .attr("transform", "translate(0,40)");

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("Average Margin");

g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) {
      return i * 2500 ? x * 2500 : x * 2500;
    })
    .tickValues(color.domain()))
  .select(".domain")
  .remove();

d3.queue()
  .defer(d3.json, "https://d3js.org/us-10m.v1.json")
  //.defer(d3.csv, "avgmargin.csv", function(d) { margin.set(d.id, +d.rate); })
  .await(data);

function data(error, us) {

  projection //Added from block -- What is this doing?
    .scale(1000) //Added from block
    .center([-106, 37.5]) //Added from block

  aa = [-122.490402, 37.786453]; //Added from block
  bb = [-122.389809, 37.72728]; //Added from block

  console.log(projection(aa), projection(bb)); //Added from block

  svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter()
    .append("path")
    //.attr("fill",...