D3: A simple packed Bubble Chart
✓ Published0🌍 Public
Aalokkshukla
Last edited Jul 30, 2017
Created on Jul 30, 2017
A packed bubble chart displays a static set of food items and their associated counts as proportionally sized, colored circles arranged in a tight cluster. The visualization uses D3 v4’s `d3.pack` layout on a hierarchical dataset, with each leaf node rendered as an SVG circle and labeled with its name and count. Color is assigned via `d3.scaleOrdinal` with `d3.schemeCategory20`, and text size scales relative to each circle’s radius.
AI-generated descriptionSimple Bubble Chart D3 v4
var color = d3.scaleOrdinal(d3.schemeCategory20);
var bubble = d3.pack(dataset)
.size([diameter, diameter])
.padding(1.5);
var node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(function(d){
return !d.children
})
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
Update colors and labels .