2020w7 world wealth

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    path {
      fill: none;
      stroke: black;
    }

svg {
      border: 1px solid green;
    }
  </style>
</head>

const main = svg.append('g')
    .attr('transform', `translate(${width/2 - margin/2}, ${height/2-margin/2})`)

const stratify = d3.stratify()
    .id(d => d.Country)
    .parentId(d => d.Region);

const tree = d3.cluster()
    .size([2 * Math.PI, radius - 100])
    .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);

d3.csv("worldwealth.csv").then(data => {
      const root = tree(stratify(data)
                        .sort((a, b) => a.Wealth - b.Wealth));

const link = main.selectAll(".link")
      .data(root.descendants().slice(1))
      .enter().append("path")
      .attr("class", "link")
      .attr("d", d => 
            "M" + project(d.x, d.y)
            + "C" + project(d.x, (d.y + d.parent.y) / 2)
            + " " + project(d.parent.x, (d.y + d.parent.y) / 2)
            + " " + project(d.parent.x, d.parent.y)
           );

const node = main.selectAll(".node")
      .data(root.descendants())
      .enter().append("g")
      .attr("class", d => "node" + (d.children ? " node--internal" : " node--leaf"))
      .attr("transform", d => `translate(${project(d.x, d.y)})`);

node.append("circle")
        .attr("r", 2.5);

node.append("text")
        .attr("dy", ".31em")
        .attr("x", d => d.x < 180 === !d.children ? 6 : -6)
        .style("text-anchor", d => d.x < 180 === !d.children ? "start" : "end")
        .attr("transform", d => `rotate(${d.x < 180 ? d.x - 90 : d.x + 90})`)
        .text(d => d.id);
    });

const project = (x, y) => {
      const angle = (x - 90) / 180 * Math.PI;
      const radius = y;
      return [radius * Math.cos(angle), radius * Math.sin(angle)];
    }

</script>
</body>

https://d3js.org/d3.v5.js