Published
Edited
Jul 24, 2022
1 fork
1 star
chart = {
const root = partition(data);
root.each(d => d.current = d);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "9px sans-serif");
const g = svg.append("g")
.attr("transform", `translate(${width / 2},${height / 2})`);
const path = g.append("g")
.selectAll("path")
.data(root.descendants().slice(1)) // we create a path for each descendant
.join("path")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
.attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none")
.attr("d", d => arc(d.current));
path.filter(d => d.children)
.style("cursor", "pointer")
.on("click", clicked);
// text appearing when hovering over a node
path.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}`);
const label = g.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.style("user-select", "none")
.selectAll("text")
.data(root.descendants().slice(1))
.join("text")
.attr("dy", "0.35em")
.attr("fill-opacity", d => +labelVisible(d.current))
.attr("transform", d => labelTransform(d.current))
.text(d => d.data.name);
// text wrapping
svg.selectAll("text")
.each(function(d, i) { wrap_text(d3.select(this), 165) }); // 165px as the max number of characters per line
const parent = g.append("circle")
.datum(root)
.attr("r", radius)
.attr("fill", "none")
.attr("pointer-events", "all")
.on("click", clicked);
function clicked(event, p) {
parent.datum(p.parent || root);
root.each(d => d.target = {
x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
y0: Math.max(0, d.y0 - p.depth),
y1: Math.max(0, d.y1 - p.depth)
});
const t = g.transition().duration(750);
// Transition the data on all arcs, even the ones that aren’t visible
path.transition(t)
.tween("data", d => {
const i = d3.interpolate(d.current, d.target);
return t => d.current = i(t);
})
.filter(function(d) {
return +this.getAttribute("fill-opacity") || arcVisible(d.target);
})
.attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)
.attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none")
.attrTween("d", d => () => arc(d.current));
label.filter(function(d) {
return +this.getAttribute("fill-opacity") || labelVisible(d.target);
}).transition(t)
.attr("fill-opacity", d => +labelVisible(d.target))
.attrTween("transform", d => () => labelTransform(d.current));
}
function arcVisible(d) {
return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;
}
function labelVisible(d) {
return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
}
function labelTransform(d) {
const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
const y = (d.y0 + d.y1) / 2 * radius;
return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
}
return svg.node();
}
data = FileAttachment("whole-output.json").json()
partition = data => {
// 1. create the hierarchy, define the root element
const root = d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value);
// 2. create the partition layout
return d3.partition()
.size([2 * Math.PI, root.height + 1])
(root);
}
arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 1.5)
.innerRadius(d => d.y0 * radius)
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
wrap_text = (text_element, max_width, line_height, unit = "em") => {
let words = text_element.text().split(/\s+/).reverse(),
word,
line = [],
line_number = 0;
// styling parameters
const x = text_element.attr("x"),
y = text_element.attr("y");
if (!line_height) line_height = 1.1;
// clear text_elements text
text_element.text(null);
// append first tspan element (to fill as we build the lines)
let tspan = text_element.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", 0);
// loop through all words and make new lines when we exceed our max_width
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (measure_width(tspan.text()) > max_width) {
line.pop()
tspan.text(line.join(" "));
line = [word];
tspan = text_element.append("tspan")
.attr("x", 0) // x
.attr("y", ++line_number * line_height) // y
.attr("dy", `${line_number * line_height}${unit}`)
// .attr("dy", `${++line_number * line_height}${unit}`)
.text(word);
}
}
}
measure_width = {
const context = document.createElement("canvas").getContext("2d");
return text => context.measureText(text).width;
}
width = 932
height = 932
radius = width / 6
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.