JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<script src="http://d3js.org/d3.v4.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>

	</head>
<body>
	<div id="map"> </div>
    <script src="script.js"></script>

</body>
</html>

CSS

.land { fill:#a8ddb5; }
	
	.mesh {
		fill: none;
  		stroke: lightgrey;
  		stroke-width: 2px;
  		stroke-linejoin: round;
	}
	path {fill:none;}
	.source-port {
		fill: white; 
		stroke: darkgreen; 
		stroke-width: 2px;
	}

JavaScript

var width = 960; var height = 600;

var projection = d3.geoAlbersUsa();

var path = d3.geoPath();
    
var svg = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height);
	
d3.json("https://d3js.org/us-10m.v1.json",function(error,us) {
	  states = topojson.feature(us, us.objects.states).features
    svg.append("g")
      .attr("class", "states")                  
      .selectAll("path")
      .data(states)
      .enter()
      .append("path")
      .attr("d", path)
      .style('fill','yellow')

svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "mesh")
      .attr("d", path);

	svg.append("circle")
		.attr("cx", function() { return projection([-71.0589,42.3601])[0];})
		.attr("cy", function() { return projection([-71.0589,42.3601])[1];})
		.attr("r",6)
		.attr("class","source-port");
	
	svg.append("text")
		.attr("x", function() { return projection([-71.0589,42.3601])[0] + 5;})
		.attr("y", function() { return projection([-71.0589,42.3601])[1] + 0;})
		.text("Boston");
		
//	drawTrade();
	});