simple circle packing II

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
  <style>
    body { text-align:center; margin:0;top:0;right:0;bottom:0;left:0; }
    svg { font: 10px sans-serif; }
    .annotation-note-title, text.title { font-weight: bold; }
    text.title { font-size: 1.2em; }
  </style>
</head>
<body>
  <svg width="960" height="960">
    <text class="title" x=40 y=50></text>
    <g transform="translate(1,1)"></g>
</svg>
  
<script>
const svg   = d3.select("svg"),
  		width = +svg.attr("width"),
  		height= +svg.attr("height")

const g = svg.append("g")

const layout = d3.pack()
  			.size([width - 2, height - 2])
				.padding(1.6)

// Get the data from our CSV file
d3.csv('data.csv', function(error, data) {

if (error) throw error;
  
  const groups = d3.nest()
    .key(function(d) { return d.group; })
    .rollup(function(leaves) { return leaves.length; })
    .map(data)
  
  const group_colors = d3.scaleOrdinal(d3.schemeCategory10)
  	//.domain(groups.keys())
  	//.domain("Asia", "Oceania", "Europe", "North America", "South America", "Africa", "Antarctica", "")
	
  const stratData = d3.stratify()(data),
				root = d3.hierarchy(stratData)
    			.sum(function (d) { return d.data.size })
  				.sort(function(x, y){
            //return d3.descending(x.value, y.value)
            return d3.ascending(x.data.data.group, y.data.data.group) || 
              d3.descending(x.value, y.value)
          }),
  			nodes = root.descendants()
  	
  layout(root)

svg.selectAll('circles')
  		.data(nodes)
  	.enter()
    .append('circle')
      .attr('cx', function (d) { return d.x })
      .attr('cy', function (d) { return d.y })
      .attr('r', function (d) { return d.r })
  		.style("fill", function(d) {
    		return d.children ? 'white' : group_colors(d.data.data.group)
  		})
      //.style("fill", function(d) { return d.children ? color[d.depth] : group_colors('Asia') })
      .style("stroke", function(d) { return '#eaeaea' })
      .style("stroke-width", 1 )
  	
  var node = svg.selectAll('textnodes')
  		.data(nodes.filter(function (d) { return d.children && d.depth ===1;}))
  	.enter()
  		.append("g")
  		.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" });
  
  node
      .append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .style("font-size", function(d) { return d.r > 50 ? "14px" : "10px"})
        .text(function(d) { return d.data.id})
  
});

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js