{
// Set up color scheme and radius.
const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1));
const radius = 928 / 2;
// Create a partition layout as usual…
const partition = data => d3.partition()
.size([2 * Math.PI, radius])
(d3.hierarchy(data)
.sum(d => d.value));
const root = partition(data);
// Modify arc generator to invert the radial scale.
// In this mapping:
// - Nodes at shallow depth (stages) are drawn at larger radius (outer ring).
// - Their children (levels) are drawn inward.
const arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius / 2)
.innerRadius(d => radius - d.y1)
.outerRadius(d => radius - d.y0 - 1);
// Create the SVG container.
const svg = d3.create("svg");
// Add arcs with hover titles.
const format = d3.format(",d");
svg.append("g")
.attr("fill-opacity", 0.6)
.selectAll("path")
.data(root.descendants().filter(d => d.depth)) // exclude root
.join("path")
// Color by the top-level stage: traverse upward until depth 1.
.attr("fill", d => {
let node = d;
while (node.depth > 1) node = node.parent;
return color(node.data.name);
})
.attr("d", arc)
.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join(" > ")}\n${format(d.value)}`);
// Add labels for each arc.
svg.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.selectAll("text")
.data(root.descendants().filter(d => d.depth && ((radius - d.y0 + radius - d.y1)/2 * (d.x1 - d.x0) > 10)))
.join("text")
.attr("transform", d => {
// Calculate the angle in degrees.
const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
// Calculate the inverted radial position.
const y = radius - (d.y0 + d.y1) / 2;
return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
})
.attr("dy", "0.35em")
.text(d => d.data.name);
// Adjust the viewBox so the whole chart fits.
svg.attr("viewBox", [-radius, -radius, radius * 2, radius * 2].join(" "));
return svg.node();
}
function autoBox() {
document.body.appendChild(this);
const {x, y, width, height} = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
data = ({
name: "root",
children: [
{
name: "Preparation",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Proposal",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Methods",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Results: Raw Data",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Analysis",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Results: Interpretation",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Application",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
},
{
name: "Review",
children: [
{ name: "High", value: 1 },
{ name: "Intermediate", value: 1 },
{ name: "Low", value: 1 }
]
}
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
