World Country Cluster

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
   body {
   background-color: lightgrey;
     }

svg {
    width: 100%;
    height: 100%;
    position: center;
     }
    
    .node circle {
     fill: #999;
      }

.node text {
      font: 10px sans-serif;
     }

.node--internal circle {
      fill: #555;
     }

.node--internal text {
      text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
     }

.link {
      fill: none;
      stroke: #555;
      stroke-opacity: 0.4;
      stroke-width: 1.5px; 
     }
  </style>
</head>

<body>
  <svg width="960" height="2000"></svg>
  <script>
    var margin = {top: 30, right: 50, bottom: 30, left: 50};
    var width = 960 - margin.left - margin.right;
    var height = 2000 - margin.top - margin.bottom;

var g = d3.select("svg")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var node = g.selectAll(".node")
      .data(hierarchy.descendants())
      .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf");})
      .attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")"; 
      })

node.append("circle")
      .attr("r", 3);
  
  node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -6 : 6; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { 
        return d.data.data.id;
      });
});
  </script>
</body>

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