Bubble Chart Bubble charts are non-hierarchical packed circles. The area of each circle is proportional its value (here, file size). The organic appearance of these diagrams can be intriguing, but also consider a treemap or a humble bar chart.
chart = { const root = pack(data); 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"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); leaf.append("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill", d => color(d.data.group)); 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)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => d); leaf.append("title") .text(d => `${d.data.title}\n${format(d.value)}`); return svg.node(); }
data = (await d3.csv("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.csv", ({id, value}) => ({name: id.split(".").pop(), title: id.replace(/\./g, "/"), group: id.split(".")[1], value: +value})))
pack = data => d3.pack() .size([width - 2, height - 2]) .padding(3) (d3.hierarchy({children: data}) .sum(d => d.value))
width = 932
height = width
format = d3.format(",d")
color = d3.scaleOrdinal(data.map(d => d.group), d3.schemeCategory10)
d3 = require("d3@5")