JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<div id="map">
</div>

JavaScript

d3.json("https://raw.githubusercontent.com/simzou/nielsen-dma/master/nielsen-mkt-map_simplified.json")
  .then(data => {
    console.log(data);
    var width = 960,
      height = 500;
    console.log(d3);
    // sets the type of view
    var projection = d3.geoMercator() // size, bigger is bigger
      .fitSize([width, height], data);

    //creates a new geographic path generator
    var path = d3.geoPath()
      .projection(projection);


    //set svg window
    var svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)

    // adding a blank background
    svg.append("rect")
      .attr("class", "background")
      .attr("fill", "#cacaca")
      .attr("width", width)
      .attr("height", height);

    svg.append("g")
      .attr("id", "dmas")
      .selectAll("path")
      .data(data.features)
      .enter()
      .append("path")
      .attr('fill', 'white')
      .attr('stroke', '#222')
      .attr('stroke-width', '2')
      .attr("d", path);

  })
  .catch(err => {
    console.log(err);
  });