DOM.uid("leaf").id
function chart(root) {
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
var format = d3.format(",d"),
color = d3.scaleOrdinal(d3.schemeSet3)
var tooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("color", "white")
.style("padding", "8px")
.style("background-color", "rgba(0, 0, 0, 0.75)")
.style("border-radius", "6px")
.style("font", "12px sans-serif")
.text("tooltip");
// var bubble = d3.pack()
// .size([width, height])
// .padding(1.5);
// bubble(root);
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
console.log(DOM.uid("leaf").id);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("r", d => d.r)
.attr("fill-opacity", 0.9)
.attr("fill", d => color(d.data.group))
.on("mouseover", function(d) {
tooltip.text(d.data.title + ": " + d.data.value + "%" );
tooltip.style("visibility", "visible");
d3.select(this).style("stroke", "black");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function() {
d3.select(this).style("stroke", "none");
return tooltip.style("visibility", "hidden");
});
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("font-size", d => d.r / 2.5)
.attr("font-weight", "bold")
.text(d => d.data.name)
.on("mouseover", function(d) {
tooltip.text(d.data.title + ": " + d.data.value + "%" );
tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function() {
d3.select(this).style("stroke", "none");
return tooltip.style("visibility", "hidden");
});
leaf.append("text")
.attr("transform", d => `translate(0, ${d.r/3})`)
.attr("font-size", d => d.r / 3.5)
.text(d => d.data.value+"%")
.on("mouseover", function(d) {
tooltip.text(d.data.title + ": " + d.data.value + "%" );
tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function() {
d3.select(this).style("stroke", "none");
return tooltip.style("visibility", "hidden");
});
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.
