JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
</body>

CSS

path {
    	  stroke: white;
    	  stroke-width: 0.5px;
    	  fill: grey;
    	}
    	.circle {
    	  stroke: red;
    	  stroke-width: 1px;
    	  stroke-dasharray: 5;
    	  fill: transparent;
    	}

JavaScript

var width = 1200;
var height = 400;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);
 
var projection = d3.geoMercator();
  
var path = d3.geoPath()
	.projection(projection);

//circle caluclation
var circumference = 6371000 * Math.PI * 2;

//define each circle & angle
var angle1 = 1000000 / circumference * 360;
var missile1 = d3.geoCircle().center([125.6720717,39.0292506]).radius(angle1);

var angle2 = 3500000 / circumference * 360;
var missile2 = d3.geoCircle().center([125.6720717,39.0292506]).radius(angle2);

// load and display the World
var url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
    d3.json(url, function(err, geojson) {
    //load the world
      svg.append("path")
        .attr("d", path(geojson));    
     //append the circles   
      svg.append("path")
       .attr("d", path(missile1()))
       .attr("class","circle");
      svg.append("path")
       .attr("d", path(missile2()))
       .attr("class","circle")      
    });