D3 Examples - simple circle packing II

xxxxxxxxxx
 
<!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>
​
    