test world map block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .names {
      fill: none;
      stroke: #ff3d3d;
      stroke-linejoin: round;
    }
  </style>
</head>
<body>
  
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>

var width = 960,
    height = 500;

var map = d3.select('canvas');
  
var projection = d3.geoEquirectangular()
  .center([0, 5])
  .scale(100)
  .rotate([-180,0])
  .translate([width / 2, height / 2])
  .precision(.1);

var svg = map.append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("stroke", "#E1DFBD")
  .style("fill", "#BEB894")
  .style("stroke-width", 1)
  .attr("preserveAspectRatio", "xMidYMid");

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

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

d3.json("https://unpkg.com/world-atlas@1/world/110m.json", (error, world) => {
 	if (error) {
    console.error(error);
    throw error
  };
	
  var features = topojson.feature(world, world.objects.countries).features;
//  console.log('im in!', features);
 
  g.selectAll("path")
    .data(features)
    .enter()
    .append("path")
    .attr("d", path);
    
});

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.v4.min.js

https://unpkg.com/topojson-client@3