Built with blockbuilder.org
xxxxxxxxxx
<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>
<body>
<svg />
<script>
const width = 400;
const height = 400;
const margin = 100;
const radius = width / 2;
const svg = d3.select("svg")
.attr('width', width)
.attr('height', height);
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