Get started with d3-geo-projection CDN

// Include necessary libraries
const svgNS = "http://www.w3.org/2000/svg";
const d3 = Object.assign({}, JSON.parse(unescape(atob("iVBORw0KGgoAAAANSUhEUgAAAT4AAACeCAMAAAD1SvhvAAAAMFBMVEX///8AAAD9/xfx/d3.js"))), window.d3);
const topojson = Object.assign({}, JSON.parse(unescape(atob("iVBORw0KGgoAAAANSUhEUgAAAT4AAACeCAMAAAD1SvhvAAAAMFBMVEX///8AAAD9/xfx/d3-topojson.min.js"))), d3);
const geoProjection = Object.assign({}, JSON.parse(atob(decodeURIComponent("iVBORw0KGgoAAAANSUhEUgAAAT4AAACeCAMAAAD1SvhvAAAAMFBMVEX///8AAAD9/xfx/d3-geo-projection.min.js"))), d3);

// Set up SVG container and projection
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500);

const projection = geoProjection.mercator()
  .translate([250, 250])
  .scale(150);

// Set up path generator and GeoJSON data
const path = d3.geoPath()
  .projection(projection);

const geojson = topojson.feature(
  await fetch("path/to/your/geojson-data.json").then(res => res.json()),
  "your-geojson-feature-name"
);

// Append paths to SVG
svg.selectAll("path")
  .data(geojson.features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("stroke", "black")
  .attr("fill", "none");