JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/d3@7.0.4/dist/d3.min.js"></script>

  <div id="content">
    <svg width="800px" height="400px">
      <g class="map"></g>
    </svg>
  </div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

#content .map path {
  fill: #ddd;
  stroke: #aaa;
}

JavaScript

let geojson = 
{
  "features": [{
  "geometry": {
    "coordinates": [[[172.416088, -43.987709], [172.416585, -43.991154], [172.415202, -43.991154], [172.41816, -43.991837], [172.418697, -43.991745], [172.41817, -43.991028],[172.416088, -43.987709]]],
    "type": "Polygon"
  },
  "properties": {
    "name": "6"
  },
  "type": "Feature"
}],
  "type": "FeatureCollection"
}

;

let projection = d3.geoAzimuthalEqualArea()
  .scale(20)
  .translate([200, 150]);

let geoGenerator = d3.geoPath()
  .projection(projection);

function update(geojson) {
  let u = d3.select('#content g.map')
    .selectAll('path')
    .data(geojson.features);

  u.enter()
    .append('path')
    .attr('d', geoGenerator);
}

update(geojson);