chart = {
const width = 928;
const height = 2400;
const format = d3.format(",d");
const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
const partition = d3.partition()
.size([height, width])
.padding(1);
const root = partition(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif");
const cell = svg
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y0},${d.x0})`);
cell.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
cell.append("rect")
.attr("width", d => d.y1 - d.y0)
.attr("height", d => d.x1 - d.x0)
.attr("fill-opacity", 0.6)
.attr("fill", d => {
if (!d.depth) return "#ccc";
while (d.depth > 1) d = d.parent;
return color(d.data.name);
});
const text = cell.filter(d => (d.x1 - d.x0) > 16).append("text")
.attr("x", 4)
.attr("y", 13);
text.append("tspan")
.text(d => d.data.name);
text.append("tspan")
.attr("fill-opacity", 0.7)
.text(d => ` ${format(d.value)}`);
return svg.node();
}