JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<h1 id="title"></h1>

<svg id="map_container"></svg>
<script>
    // Json Datas
    var json = {
        
    };

    CB.geo.draw("map_container", json);
</script>

CSS

.country {
  stroke: red;
  stroke-width: .5px;
  stroke-linejoin: round;
}

.graticule {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: .5px;
}

.graticule-outline {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
}

JavaScript

if (CB == null || typeof (CB) != "object") {
    var CB = new Object();
}

(function () {
    //private var's and functions
    function draw(id, json) {
        document.getElementById('title').innerHTML = "World Map";

        var width = 960,
            height = 500;

        var projection = d3.geo.robinson()
            .scale(150)
        //.translate(100,100)
        .precision(.5);

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

        var svg = d3.select("#" + id)
            .attr("width", width)
            .attr("height", height)
            .attr("style", "background:" + json.bc)
            .append("g")
			.call(d3.behavior.zoom().scaleExtent([1, 8])
			.on("zoom", zoom));
        
        // For Zooming 
		function zoom() {
		  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            svg.selectAll("circle").attr("r", 6/d3.event.scale);
		}
        
        // grid
var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);

        svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

        //shape
 d3.json("https://dl.dropboxusercontent.com/s/2qg71ltlq0hc88j/readme-world-110m.json", function (error, world) {
         console.log(world);
         var countries = svg.selectAll(".countries")
				  .data(topojson.feature(world, world.objects.countries).features)
				  .enter()
				  .append("path")
					.attr("style", "fill:#FEFEE4")
					.attr("class", "country")
					.attr("d", path)
         .attr("hi",function(d){
             //console.log(d);
         })
           
           .on("mouseover", function(d){d3.select(this).style("fill", "red");})
           .on("mouseout", function(d){d3.select(this).style("fill", "white");});
           
          svg.selectAll(".dots")
			.data(topojson.feature(world, world.objects.countries).features)
			.enter()
            .append("circle")
            .attr("r","6")
  ...