chart = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
.style("font", "10px sans-serif");
const rects = svg.selectAll("g.rec")
.data(root.descendants().filter(d=> d.depth===1))
.join("g")
.attr("class", "rec")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
rects.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", "none")
.attr("stroke", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const leaf = svg.selectAll("g.circ")
.data(root.descendants().filter(d=> d.depth===2))
.join("g")
.attr("class", "circ")
.attr("transform", d => `translate(${d.parent.x0 + (d.parent.x1 - d.parent.x0)/2 + d.x},${ d.parent.y0 + (d.parent.y1 - d.parent.y0)/2 + d.y})`);
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("r", d => d.r)
// // Placing circles instead of rectangles
// .attr("cx", d => d.x0 + (d.x1 - d.x0) / 2)
// .attr("cy", d => d.y0 + (d.y1 - d.y0) / 2)
.attr("cx", 0)
.attr("cy", 0);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
data = d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json")
treemap = data => d3.treemap()
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data)
.sum(d => 1)
.sort((a, b) => b.height - a.height || b.value - a.value))
width = 932
height = 600
format = d3.format(",d")
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5")
root = { const root = treemap(data);
root.children.forEach(l1=> {
// Compute the radius of the lv2 nodes
l1.children.forEach( l2 => {
l2.r = Math.sqrt( ( (l2.x1 - l2.x0)*(l2.y1 - l2.y0) )/Math.PI );
});
// Try to pack them
// pack(l1.children.sort((a,b) => d3.descending(a.r, b.r)),
pack(l1.children,
l1.x1 - l1.x0, l1.y1 - l1.y0);
});
return root;
}
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.
