chart = {
const root = particions(dataGroup);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "15px sans-serif")
.style("font-weight", 600)
.style("fill", "black");
const cell = svg
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y0},${d.x0})`);
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 "aquamarine";
while (d.depth > 1) d = d.parent;
// console.log(d.data[0]);
return color(d.data[0]);
});
const text = cell
.filter(d => d.x1 - d.x0 > 16)
.append("text")
.attr("x", 4)
.attr("y", 13);
text.append("tspan").text(d => {
if (d.depth === 0) return "COMARQUES";
else return d.data[0];
});
text
.append("tspan")
.attr("fill-opacity", 1)
.text(d => ` ${format(d.value)} kW`)
.style("fill", "black")
.style("font", "13px sans-serif")
.style("font-weight", 300);
cell.append("title").text(
d =>
`${d
.ancestors()
.map(d => d.data[0])
.reverse()
.join("/")}\n ${format(d.value)} kW`
);
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.
