Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
Public
Edited
Jan 4
1 fork
1 star
chart = {
const root = treemap(treeData);
console.log(root.leaves());
const svg = d3
.select(DOM.svg(width, height))
.style("font", "10px sans-serif");
const leaf = svg
.selectAll("g")
.data(root.leaves())
.enter()
.append("g")
.attr("transform", (d) => `translate(${d.x0},${d.y0})`);
leaf
.append("rect")
.attr("fill", (d) => {
if (d.data.year === 2022) {
return colors[0];
} else if (d.data.year === 2023) {
return colors[1];
} else if (d.data.year === 2024) {
return colors[2];
} else {
return colors[3];
}
})
.attr("width", (d) => d.x1 - d.x0)
.attr("height", (d) => d.y1 - d.y0);
leaf
.append("text")
.selectAll("tspan")
.data((d) => d.data.month.split(/\s+/g).concat(formatTotal(d.data.total)))
.enter()
.append("tspan")
.attr("x", 10)
.attr(
"y",
(d, i, nodes) => (i === nodes.length - 1) * 5 + 28 + (i - 0.5) * 9
)
.attr("class", (d) => (parseInt(d) ? "value" : "month"))
.text((d) => d);
return svg.node();
}
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.
