JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<div id="map"></div>

CSS

path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}

JavaScript

var width = 960,
    height = 500;

var data = [
  {
    "code":"TYO",
    "city":"TOKYO",
    "country":"JAPAN",
    "lat":"35.68",
    "lon":"139.76"
  },
  {
    "code":"OSK",
    "city":"Osaka",
    "country":"JAPAN",
    "lat":"	34.40",
    "lon":"135.37"
  },
  {
    "code":"HISH",
    "city":"Hiroshima",
    "country":"JAPAN",
    "lat":"34.3853",
    "lon":"132.4553"
  },
  {
    "code":"BKK",
    "city":"BANGKOK",
    "country":"THAILAND",
    "lat":"13.75",
    "lon":"100.48"
  },
  {
    "code":"DEL",
    "city":"DELHI",
    "country":"INDIA",
    "lat":"29.01",
    "lon":"77.38"
  },
  {
    "code":"SEA",
    "city":"SEATTLE",
    "country":"USA",
    "lat":"38.680632",
    "lon":"-96.5001"
  }
];

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("https://gist.githubusercontent.com/d3noob/5189284/raw/598d1ebe0c251cd506c8395c60ab1d08520922a7/world-110m2.json", function(error, topology) {
   g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
   
   drawMap(data);
});
 
// load and display the cities
//d3.csv("cities.csv", function(error, data) {
function drawMap(data){
    
    var circle = g.selectAll("circle")
        .data(data)
        .enter()
        .append("g")
    
    circle.append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 5)
       .style("fill", "red");
    
    circle.append("image")
			.attr("xlink:href",...