d3 = require("d3@7")
data2 = [
{category: "Analysis & research design", pct: 31},
{category: "Data pipelines", pct: 27},
{category: "Operations", pct: 17},
{category: "Writing & comms", pct: 13},
{category: "Troubleshooting", pct: 12}
]
{
const width = 900;
const height = 500;
const color = d3.scaleOrdinal()
.domain(data2.map(d => d.category))
.range(["#f28e2b", "#4e79a7", "#e15759", "#76b7b2", "#59a14f"]);
const root = d3.hierarchy({children: data2})
.sum(d => d.pct)
.sort((a, b) => b.value - a.value);
d3.treemap()
.size([width, height])
.padding(3)
.round(true)(root);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.style("display", "block")
.style("margin", "0 auto");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", d => color(d.data.category))
.attr("rx", 4);
leaf.append("foreignObject")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.append("xhtml:div")
.style("width", "100%")
.style("height", "100%")
.style("display", "flex")
.style("flex-direction", "column")
.style("align-items", "center")
.style("justify-content", "center")
.style("padding", "6px")
.style("box-sizing", "border-box")
.style("text-align", "center")
.style("overflow", "hidden")
.html(d => `
<span style="font-size:${(d.x1 - d.x0) > 120 ? 26 : 18}px; font-weight:bold; color:#1a1a1a; line-height:1.2;">${d.data.category}</span>
`);
return svg.node();
}