JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
   <body>
   </body>

CSS

svg {
            outline: black solid 1px;
          }

JavaScript

var svg = d3.select("body")
 .append("svg")
 .attr("width", 400)
 .attr("height", 400)
 .attr("viewBox", "0 0 150 150");
 
var geoJson = { "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [10.0, 10.0], [60.0, 40.0], [50.0, 75.0],[20.0, 60.0]
        ]
      },
      "properties": {
        "id": "1",
        "Type": "campingspot"
      }
    },
    { "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [20.0, 65.0], [50.0, 80.0], [50.0, 110.0],[20.0, 115.0]
        ]
      },
      "properties": {
        "id": "1",
        "Type": "campingspot"
      }
    }
  ]
}

//Succesfull Render a GeoJSON file
//var jsonData = d3.json("geoJson", function(error,jsonData){
// svg.selectAll("polygon")
//   .data(geoJson.features)
//    .enter()
//    .append("polygon")
//    .attr("points", function(d){ return d3.merge(d.geometry.coordinates) })
//    .attr("stroke", "black")
//    .attr("stroke-width", 1)
//    .attr("fill", "none")
//});

//var jsonData2 = d3.json("geoJson", function(error, json){
  svg.selectAll("path")
    .data(geoJson.features)
    .enter()
    .append("path")
   .attr("d", d3.geoPath())
   .attr("stroke", "black")
    .attr("stroke-width", 1)
    .attr("fill", "green")
//});